|
How To Make An Image Rollover |
|
|
|
|
Written by David
|
|
Tuesday, 24 June 2008 |
To create a rollover image on the web you need to create some javascript code.
The easiest way of doing this is to use a program such as Dreamweaver. Click on "Insert", "Interactive Image", "Roll Over Image" and following instructions. (This will depend on the version of Dreamweaver you have). Dreamweaver will then show you what to do.
If you do not have a program such as Dreamweaver or other similar program you can write the code by hand.
If you know about computer programming I.E. HTML then you can code the buttons by hand. This is an example below of a simple Roll Over Image.
The Javascript works so that when you move your mouse over the image the image changes to a different image and then when you mouse your mouse away from the image the image returns to the original image. This effect looks like the button can be pressed down is using 2 images. 1) beveled up and 2) beveled down.
Javascript Code:
This is the code for the javscript which you need to insert somewhere at the top of the page. You can insert it into the <HEAD></HEAD> tags:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
} function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
} function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
} function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script> This is the code which goes onto the button on the page:
<img name="Image1" border="0" src="originalimage.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','newimage.jpg',1)">
|
|
Last Updated ( Tuesday, 24 June 2008 )
|
