[TUT] Create a simple rollover image [TUT]

Meti · 26-07-2008, 06:45 PM

Hi,

Since my last rollover tutorial got closed, I decided to expand the tutorial, and make it better.
I will show you how to design the rollover images, and then, I'll tell you what codes you should add on your file.
Follow those steps, and you'll make it!

Good luck!
-----------------------------------------------------------------------
Step 1:
First of all, you need your rollover images. I've made a small tutorial for the designing part too. You could also do any images you want, but click HERE to see my tutorial. Follow the steps of designing the images.

Step 2:
I hope you've done the images, because it's time to do the coding bit now. First of all, you need to create a new file. Name it whatever you want it to be. Example: index.htm

Step 3:
Open up your file. If there already is some code in your file, remove it.

Step 4:
Add this code to your HTML file

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rollover Image Tutorial</title>
</head>
<body>
</body>
</html>

This is the the code which comes up everytime you create a new file with your program (DreamWeaver, FrontPage etc.)

Step 5:
Add this Javascript code between <head> </head>

HTML Code:

<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 JavaScript code is very important for doing the rollover image, since it's the code which makes the images switch when you put your mouse over the image.

Step 6:
Now, you have to add this code between <body> </body>

HTML Code:

<body onLoad="MM_preloadImages('box_hover.png')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rollover','','box_hover.png',1)"><img src="box.png" name="Rollover" width="94" height="21" border="0"></a>

This code is what you see, on your screen, when you want to see the previews of what you've done.

Step 7:
You're done! Your full code should now look like this:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rollover Image Tutorial</title>
<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>
</head>
<body>
<body onLoad="MM_preloadImages('box_hover.png')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rollover','','box_hover.png',1)"><img src="box.png" name="Rollover" width="94" height="21" border="0"></a>
</body>
</html>

If there's anything you need help with, don't hesitate contacting me!

Copyright © MetiDesigns.com 2008+

Merged by Invent (Forum Moderator). Threads merged due to forum lag.

Tom-743 · 26-07-2008, 06:47 PM

I like the way you've explained the steps clearly, but you still havnt explained what the javascript actualy does.

~~Janczyk~~ · 26-07-2008, 06:55 PM

You've just told people to insert codes into their work without explaining what it does... :S

wsg14 · 26-07-2008, 07:01 PM

It's so much easier to do it in CSS.

Source · 26-07-2008, 07:02 PM

Originally Posted by BOX!

It's so much easier to do it in CSS.

^ Listen to him. Even though we've been over this before in the last thread :/ Plus CSS leave's a smaller footprint over a large page.

~~Stepheen~~ · 26-07-2008, 07:04 PM

can't this be done just by changing li like
li {
before hovered css
}
li hover {
hovering css
}

It'd make more sense imo.

Dentafrice · 26-07-2008, 07:06 PM

You still haven't explained what the Javascript does..

It looks better.. but you still haven't accomplished the task of fully explaining your topic, and doing it in CSS is easier.. and faster, and does not require JS to be on.

Meti · 26-07-2008, 07:07 PM

You could also do it in CSS:
<style type="text/css">
li a:hover {
background-image: url('hover.png');
}
.roll {background-image: url('original.png');
}
</style>
<li class="roll">TEXT</li>

wsg14 · 26-07-2008, 07:09 PM

CSS:

Code:

.image {
background-image: url(image.png);
width: 50px;
height: 50px;
background-position: top;
}

.image:hover {
background-image: url(image.png);
width: 50px;
height: 50px;
background-position: bottom;
}

The reason I have backgorund-position is because it only has to load one image, instead of having the normal image and the image you get when you hover over. So when you hover over the image it doesn't 'blink' (don't know how to describe).
i.e. http://images.fansitegroup.com/header.png

HTML

HTML Code:

<div class="image"></div>

Tom-743 · 26-07-2008, 07:18 PM

Originally Posted by Meti

You could also do it in CSS:
<style type="text/css">
li a:hover {
background-image: url('hover.png');
}
.roll {background-image: url('original.png');
}
</style>
<li class="roll">TEXT</li>

Are you going to explain what it does? becuase its not realy a tut unless you do.

Thread: [TUT] Create a simple rollover image [TUT]

Thread Tools

Posting Permissions