23

Jun

css image rollover

Posted by mahesh chari  Published in CodeIgniter, css, Html, PHP/mysql

image rollover effect with css background image

Here we use basic css back ground image to get rollover effect.the logic is simple and we can find it in comments in script itself.

  • we create a empty link
  • set back ground as test1.jpg and display to block and height and width to 150px.
  • build a suido selctor hover to link and set back ground image to test2.jpg
  • this works even javascript disabled browsers also

Download Script

image-rollover-css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>image rollover with css</title>
<style type="text/css">
<!--
#imagerollover a {
	background-image: url(test2.JPG);
	display: block;
	background-repeat: no-repeat;
	height: 150px;
	width: 150px;
}
#imagerollover a:hover{
	background-image: url(test1.JPG);
}
-->
</style>
</head>
<body>
<div id="imagerollover"><a href="#test">&nbsp;</a></a></div>
</body>
</html>

Download Script

image-rollover-css

Popularity: 7% [?]

Tags:

More
1 comment

23

Jun

javascript image rollover

Posted by mahesh chari  Published in Html, javascript

image rollover effect with javascript image object

  • we create a image object with new Image();
  • set a source attribute to test1.jpg.
  • create onmouseover even function ,then set image object src to test2.jpg
  • create onmouseout event function,then set image object src to test1.jpg
  • to test click even we can see a small alert box.

Download Sorce Code

image-rollover-javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html>
<head>
<title>Image Roll over</title>
</head>
<body>
<div id="imagerolover"></div>
<script>
var myimage=new Image(); //create a image object
myimage.src="test1.jpg";//initially set test1.jpg as src attribute
//onmouseover set test2.jpg as src
myimage.onmouseover=function(){
this.src="test2.jpg";
}
//on mouseout set test1.jpg src again
myimage.onmouseout=function(){
this.src="test1.jpg";
}
//create click event 
myimage.onclick=function(){
alert('U clicked me');
}
//get imagerolover div element by id and append the image
document.getElementById('imagerolover').appendChild(myimage);
</script>
</body>
</html>

Download Sorce Code

image-rollover-javascript

Popularity: 4% [?]

Tags:

More
no comment

10

Jun

css opacity tutorial

Posted by mahesh chari  Published in css, Html, javascript

tutorial for Cross Browser Compatible CSS opacity

At earlier stage of CSS the opacity property of element is big issue to make compatible with all browsers.but now CSS3 almost modern browsers support this property.Even though it takes time to rule CSS3 the web world.Here we see example.

Download Source Code

css-opacity-source code-example

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.toggleopacity img {
	filter:alpha(opacity=50); 
	-moz-opacity:0.5;
	opacity:0.5;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
 
.toggleopacity:hover img {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

HTML Code

1
2
3
4
5
6
7
8
9

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS opacity tutorials and example</title>
</head>
<body>
<a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a> <a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a>
</body>
</html>

Setting Opacity of element with Javascript

Below Javascript function set the element opacity to at desired level for given element.
if opacity is 0 specified ,it hides the element as there no need to display the element further.

function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	if(opacity == 0)
	{ object.display = 'none'; }
	else
	{ object.display = 'block'; }
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

Download Source Code

css-opacity-source code-example

Popularity: 4% [?]

Tags: ,

More
1 comment

10

Jun

round corners with css sprites

Posted by mahesh chari  Published in css, Html

round corners with css sprites

We know that all modern web browsers supports rounded corner elements but it doesn’t work in IE6.we know that all majority users are IE6 after the fire fox in organizations.here we use CSS sprites technique ,we already discussed about the advantage of the CSS sprites in my previous post.

css-sprite-rounded-corner-example

Steps

Download Script/Source Code
here we make the 16degrees rounded corners.for that we use 32x32px(twice the corner size) circle image as shown below.
example image with 32x32px size
we create four corner divs in a container divs and place them at every corner and with a given image is back ground.
Below example is self explanatory with comments in it. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Round Corners With CSS</title>
<style type="text/css">
<!--
.roundeddiv { 
	width: 400px;
	position: relative;
	background-color: #006702;
	padding: 0px;
	display: block;
}
<!-- Here we use on class common for all corners that shares commen properties-->
.corner {
	background-image: url(round.jpg);
	position: absolute;
	height: 16px;
	width: 16px;
	background-repeat: no-repeat;
	overflow: hidden;
	z-index: 1;
	margin: 0px;
	padding: 0px;
}
h3 {
	margin: 0px;
	padding: 0px;
}
 
.container {
	position: relative;
	padding: 16px;
}
<!-- we come from top right as anti clock wise -->
<!-- Top Right Corner  -->
.tr {
	top: 0px;
	right: 0px;
	background-position: -16px 0px;
}
<!--Bottom Right Corner -->
.br {
	right: 0px;
	bottom: 0px;
	background-position: -16px -16px;
}
 
<!--Bottom Left Corner -->
.bl {
	left: 0px;
	bottom: 0px;
	background-position: 0px -16px;
}
<!--Top Left Corner -->
.tl {
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
}
 
-->
</style>
</head>
<body>
<div class="roundeddiv">
<!-- start corner divs -->
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
  <div class="corner tl"></div>
<!-- end corner divs -->
<!-- start content -->
  <div class="container">
    <h3>Rounded Corners Example </h3>
    <h3>Rounded Corners with CSS sprites Tutorials. </h3>
  </div>
<!-- end content -->
</div>
</body>
</html>

Download Script/Source Code

Popularity: 6% [?]

More
no comment

27

May

hack password

Posted by mahesh chari  Published in Html, javascript

how to hack stored passwords in web browser for websites.

 

Yes ,you can hack any stored password in any browser ,any web site with in five seconds.Even you don’t know any basic programming language.but it works for only stored passwords in browser only.

Gmail ,Orkut Account before hackOrkut,Gmail forma after hack

hack stored password for Orkut ,Gmail and Google Account

Open the login page of the orkut that stored ,then paste the below code in URL bar or Address bar,simple you can see the password

1

javascript:document.getElementById('Passwd').type='text';void(0);

hack stored password for Yahoo mail

yahoo mail hackyahoo mail password hack

Open the login page of the yahoo that stored ,then paste the below code in URL bar or Address bar,simple you can see the password 

1

javascript:document.getElementById('passwd').type='text';void(0);

hack any web site password

Yes ,again it is true you can hack any sites password,simple follow the below steps.
1.open login page of any web site that stored .

open login page of any site that stored

open login page of any site that stored

2.Open context menu by right clicking on the page,then select view source from that you can see a new window that has code,search for
a word type=”password” ,beside you can find id also password-hack-source-code


then replace with password with that id
paste it in address bar of the browser,then press enter or return key on your key board. browser-password-hack

3.Its done you can see hidden password password-hacked-any-site

Please note this article is informative purpose only.!!!

So don’t store your passwords on any public computer.

Popularity: 9% [?]

Tags:

More
7 comments

27

May

preventing multiple form submission with php

Posted by mahesh chari  Published in Html, PHP/mysql

preventing multiple form submission with php

A dynamic web aplication contains atleast a web form that stores data in any database. major issue is data redundancy . we discussed already in my previous post preventing multiple form submission with javascript.
even though it works partially ,we can prevent it by server side also .
we use two methods to prevent multiple form submission

Redirecting user to another page

when a form submitted to server, we process the input and send user to another success full or error page.

using hidden field 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php 
session_start();
$rand_string=md5(uniqid(rand(), true));
$_SESSION['s_form']=$rand_string;
 $errors="";
if(isset($_POST['Submit']) 
and $_POST['s_form_randomizor']==$_SESSION['s_form']){
if($_POST['names']==""){
$errors="Names field required.";
}else{
$_SESSION['s_form']=$rand_string;
}
}
?>

HTML part

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prevent multple form submission</title>
</head>
 
<body>
<?php echo (isset($_POST['Submit']) and $errors!="")?$errors:'';?>
<form id="s_form" name="form1" method="post" action="">
  <input name="names" type="text" id="names" />
  <input type="submit" name="Submit" value="Submit" />
  <input type="hidden" name="s_form_randomizor" value="<?php echo $rand_string;?>"/>
</form>
</body>
</html>

Download Source Code

prevent-multlple-form-submission

Popularity: 4% [?]

More
no comment

26

May

javascript setintervel

Posted by mahesh chari  Published in Html, javascript

Calling a Javascript function in regular interval

Generelly we need to work or call a javascript function . for that we user setInterval function .below example shows how we use it.
setInterval function takes two parameters ,first parameter function handler and second parameter the time in milli seconds.
below example show a simple counter that executes the function in every second interval.

javascript setinterval example and tutorial

javascript setinterval example and tutorial

Download Source Code

javascript-setinteval-source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
<head>
<title>javascript setInterval();</title>
</head>
 
<body>
<script type="text/javascript">
var timer;//stores the timer varible for a function
var count=0;
function start(){
timer=setInterval(sethtml,1000);
}
function sethtml(){
document.getElementById('timer').innerHTML=count++;
}
 
function stoptimer(){
clearInterval(timer);
}
</script>
<a href="#start" onclick="start();">Start</a> <a href="#stop" onclick="stoptimer();">Stop</a>
<div id="timer"></div>
</body>
</html>

Download Source Code

javascript-setinteval-source code

Popularity: 4% [?]

More
no comment

26

May

preventing multiple form submission with javascript

Posted by mahesh chari  Published in Html, javascript

Prevent or stop multiple form submission with JavaScript

A dynamic web application contains at least one user form and the big issue is data redundancy (duplicate data). The main reason is multiple form submission. when a form is being sent to the server,the user can send the form data multiple times by pressing Enter (return ) key or clicking the submit button.in this example we disable this features while form being submitted.but it fails when user refreshes or click the F5 button . To prevent Refresh event we use Server side check or redirect to another page .

Down load Source Code

prevent-multiple-form-submission

Example for client side check

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prevent multiple form submission with javascript</title>
<script type="text/javascript">
/*
This function validates the form data for rules.
Don't allow multiple form submission.
remember remember
if user refreshes while sending it fails.
for that we check for server side also
*/
var form_submited=false;
function validate(){
if(form_submited==true){alert('Form already submitted.');return false;}
	var name=document.ex_form.names.value;//access name value
	if(name==''){
		alert('Name is required.');
		return false;
	}
		form_submited=true;
		document.ex_form.Submit.disabled='disabled';//set form submitt button disabled
		document.ex_form.Submit.value='Processing..';//set form submit button text is processing.
	return true;
}
</script>
</head>
<body>
<form id="ex_form" name="ex_form" method="post" action="" onSubmit="return validate();">
  <input name="names" type="text" id="names" />
  <input type="submit" name="Submit" value="Submit"  />
</form>
</body>
</html>

Down load Source Code

prevent-multiple-form-submission

Popularity: 4% [?]

More
2 comments

26

May

css sprites image preloding

Posted by mahesh chari  Published in css, Html

Image pre loading with css and image sprites

We discussed image pre loading with javascript in my previous post.but it can’t be use full when javascript disabled browsers (off course use disables).So i got one idea how to implement without javascript for image preloading .

With Hidden Div Element

here the trick ,we know that browser loads all the assets (images,audio,embed elements ) as they appear in the HTML document.So we create a dive and hide and make it null style element .put the images which you want to load .

using css image sprites

for tri state button we need three image for each state (normal, hover, focus) by default we load normal image back ground. when we hove first time the second image loaded . so we use images sprites. as shown

Sample Sprite image for tri state buttons

Sample Sprite image for tri state buttons

Download Example Source code

image-preloading-with-css-sprites source code

Example for HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Preloading With CSS and Sprites</title>
</head>
<body>
<!--
please visit for detailed tutorial http://www.maheshchari.com
Here we use simple trick ,it work even without javascript
first create a div element with given style attributes specified above.
include the images  which to be preloaded.
remember put this div after the body tag,
since this element is first rendered,
all the images are loaded before they used
 -->
 image-preloading-with-css-sprites
<div id="preloader_div"> <img src="amphi-thetre.jpg" /> <img src="amphi-thetre1.jpg" /> <img src="amphi-thetre2.jpg" /> <img src="amphi-thetre3.jpg" /><img src="ex-sprite.png" /></div>
<div id="wrapper">begin your work here.</div>
<h3>Preloading with images sprites example tri state button.</h3>
<ul id="tributtons">
  <li><a href="http://www.maheshchari.com/">button1</a> </li>
  <li><a href="http://www.maheshchari.com/">button2</a> </li>
  <li><a href="http://www.maheshchari.com/">button3</a> </li>
</ul>
</body>
</html>

Css sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<style type="text/css">
<!--
 
#preloader_div {
	display: none; 
	height: 0px;
	width: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
<!-- tri state buttons -->
#tributtons {
	list-style-type: none;
}
#tributtons a,a:visited {
	display: block;
	background-image: url(ex-sprite.png); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 150px;
	height: 24px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
}
#tributtons a:hover {
	background-position: 0px -24px;
}
#tributtons a:focus {
	background-position: 0px -48px;
}
 
-->
</style>

Download Example Source code

image-preloading-with-css-sprites source code

Popularity: 6% [?]

Tags: ,

More
6 comments

16

May

javascript image preloading

Posted by mahesh chari  Published in Html, javascript

Image Preloading with JavaScript

Now a days web visitor prefers to see fancy page designing .when designing most attractive web page ,it becomes must use lot of images ,back grounds ,animation effects.
When page becomes more attractive with lot of images, it takes time to load all the images and it consumes the user bandwidth.
Generally each embedded page elements like images, audio, video objects are loaded when browser makes HTTP request to server. When it comes to tri state buttons, mouse over image, loading large images, the user wait to see effects at first time. After loading first time browser will cache the image.

Image Object

So over come this first time loading of image we use JavaScript image object for loading.
We create an image object instance before web page body loaded, so the browser will make HTTP request before the required mouse over, image hover effect, tri state buttons.
Most advanced browser now a days use DOM, so it works on all browser.

CSS and Sprites

for javascript disabled browsers we can use css & sprite image preloading.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image preload</title>
<script type="text/javascript">
function preload_images(){
	img_length=preload_images.arguments.length;
	for(var i=0;i<img_length;i++){
		src=preload_images.arguments[i];
		img=new Image();
		img.src=src; //here we make http request
	}
}
// we are calling the function there by making HTTP request for images before page body loads
//here we use function argument property for multiple images
//remember all the image paths can be absolute or relative
preload_images('myimg.gif','urimg.jpg');
</script>
</head>
<body>
</body>
</html>

download source code

image-preloading-javascript-source-code

Popularity: 4% [?]

Tags: ,

More
5 comments
Page 2 of 212