Php Development » image http://www.maheshchari.com Just another WordPress weblog Tue, 17 Jan 2012 02:42:48 +0000 en hourly 1 http://wordpress.org/?v=3.1 css image rollover http://www.maheshchari.com/css-image-rollover/ http://www.maheshchari.com/css-image-rollover/#comments Tue, 23 Jun 2009 17:25:05 +0000 mahesh chari http://www.maheshchari.com/?p=210 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

]]> http://www.maheshchari.com/css-image-rollover/feed/ 1 javascript image rollover http://www.maheshchari.com/javascript-image-rollover/ http://www.maheshchari.com/javascript-image-rollover/#comments Tue, 23 Jun 2009 17:00:25 +0000 mahesh chari http://www.maheshchari.com/?p=206 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

]]> http://www.maheshchari.com/javascript-image-rollover/feed/ 0