Page Title: How to make nice and clean rollover images? |
View or add comments: |
Most of you know that I like nice and clean code to respect the W3C standard. But to respect those standards does not mean to have a boring website without enhanced features and a nice template. So here is a tutorial to make nice and clean linked rollover images similar to the ones we have in our navigation menu just above the banner.
Step 1:
Here is the JavaScript to put between the head tags to use rollover images for you links:
© Macromedia Dreamweaver JS functions
Make sure to place that inside the tags:
It is really important.
Our example assume that we are using, JPEG image but it can be other extensions. Also image.jpg will be the primary image and image_rollover.jpg will be the rollover image when your mouse will point on the primary image.
Step 2:
Now let's look what happens inside the body tags:
First you have to preload images to make the behavior smooth. It is done with the code:
inside the first body tag, it will give something like:
Every rollover images have to be preload the same way.
Step 3:
Finally insert the following code for each linked image:
Obviously every image will have a different name (image.jpg), a different rollover image (image_rollover.jpg) and a different ID (image_id). For the path of the images we advice you to use relative path.
Concrete example:
Hope you'll enjoy this tut. Don't hesitate to make some comments. If you have questions ask in the forums.
D.G.
Step 1:
Here is the JavaScript to put between the head tags to use rollover images for you links:
Code :
// hide source code
// hide line numbers
// hide source code
// hide line numbers
1
2 <script type="text/javascript">
3 <!--
4 function swapImgRestore() { //v3.0
5 var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
6 }
7
8 function preloadImages() { //v3.0
9 var d=document; if(d.images){ if(!d.p) d.p=new Array();
10 var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
11 if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
12 }
13
14 function findObj(n, d) { //v4.01
15 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
16 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
17 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
18 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
19 if(!x && d.getElementById) x=d.getElementById(n); return x;
20 }
21
22 function swapImage() { //v3.0
23 var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
24 if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
25 }
26 //-->
27 </script>
© Macromedia Dreamweaver JS functions
Make sure to place that inside the tags:
It is really important.
Our example assume that we are using, JPEG image but it can be other extensions. Also image.jpg will be the primary image and image_rollover.jpg will be the rollover image when your mouse will point on the primary image.
Step 2:
Now let's look what happens inside the body tags:
First you have to preload images to make the behavior smooth. It is done with the code:
inside the first body tag, it will give something like:
Code :
// hide source code
// hide line numbers
// hide source code
// hide line numbers
1 <body class="body class" onload="preloadImages('path/image_rollover.jpg')">
Every rollover images have to be preload the same way.
Step 3:
Finally insert the following code for each linked image:
Code :
// hide source code
// hide line numbers
// hide source code
// hide line numbers
1
2 <a href="link_target" onmouseout="swapImgRestore()" onmouseover="swapImage('image_id','','path/image_rollover.jpg',1)">
3 <img src="path/image.jpg" style="width: Xpx; height=Ypx; border: Zpx;" alt="" id="image_id" /></a>
Obviously every image will have a different name (image.jpg), a different rollover image (image_rollover.jpg) and a different ID (image_id). For the path of the images we advice you to use relative path.
Concrete example:
Code :
// hide source code
// hide line numbers
// hide source code
// hide line numbers
1 <head>
2 <script type="text/javascript">
3 <!--
4 function swapImgRestore() { //v3.0
5 var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
6 }
7
8 function preloadImages() { //v3.0
9 var d=document; if(d.images){ if(!d.p) d.p=new Array();
10 var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
11 if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
12 }
13
14 function findObj(n, d) { //v4.01
15 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
16 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
17 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
18 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
19 if(!x && d.getElementById) x=d.getElementById(n); return x;
20 }
21
22 function swapImage() { //v3.0
23 var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
24 if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
25 }
26 //-->
27 </script>
28 </head>
29 <body onLoad="preloadImages('datas/tut/rollover/image2.jpg')">
30 <a href="http://dumbgenius.bhsdesign.com" onMouseOut="swapImgRestore()" onMouseOver="swapImage('rollover','','datas/tut/rollover/image2.jpg',1)"><img src="datas/tut/rollover/image1.jpg" name="rollover" style="width: 50px; height=53px; border: 0px;"></a>
31 </body>
Hope you'll enjoy this tut. Don't hesitate to make some comments. If you have questions ask in the forums.
D.G.
Donation:If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months. |
|
Site Activity
Quick Menu
  
|
  |
Our Services
Statistics
18582 registered members,1870 topics in forums,
21586 posts in forums,
13589714 pages served since 2004-05-09.
7th Version Design
