[TUT] Create a simple rollover image [TUT]

Meti · 22-07-2008, 01:32 PM

Hello.
Today, I'm going to show you how to make a simple rollover image.
Follow the steps, and you'll make it.

Good Luck!
------------------------------------------------------------
Step 1:
Create a new HTML file. You could name it test.html .

Step 2:
If there is already some code on the test.html, delete it all.
Now, add this code:

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 Test</title>
</head>
<body>
</body>
</html>

Step 3:
Add this 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>

Step 4:
Now, you only have to add the image code.
Add it between <body> </body>
Rememeber!: You need to change "hover_image.png and normal_image.png" to the real images.

HTML Code:

<body onLoad="MM_preloadImages('NORMAL_IMAGE.png')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rollover','HOVER_IMAGE.png',1)"><img name="Rollover" border="0" src="NORMAL_IMAGE.png"></a>

Step 5:
You are now done. Your full code will be:

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 Test</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('HOVER_IMAGE.png')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rollover','','image_hover.png',1)"><img name="Rollover" border="0" src="NORMAL_IMAGE.png"></a>
</body>
</html>

Finished!
If you have any further problems, don't hesitate contacting me

Copyright © MetiDesigns.com 2008+
This tutorial was made by Meti on HabboxForum, and cannot be used without permission of the tutorial creator.

Closed by Invent (Forum Moderator): Thread closed due to arguments and going off-topic.

Invent · 22-07-2008, 01:37 PM

Copyright © MetiDesigns.com 2008+
This tutorial was made by Meti on HabboxForum, and cannot be used without permission of the tutorial creator.

Excuse me? So you use code from an application without permission and then say no-one else is allowed to use your "tutorial" to other forums? That's a bit hypocrticial.

Perhaps credit your source first.

Meti · 22-07-2008, 01:37 PM

My source is Javascript :rolleyes:

Invent · 22-07-2008, 01:38 PM

Your source is Dreamweaver if I'm not mistaken.

You've just copied the code directly from the program and wrote a half hearted tutorial.

Meti · 22-07-2008, 01:43 PM

It's still a TUTORIAL :S :rolleyes:
This will help people. Therefore, it is a tutorial.

Now, as a Forum Moderator, you should know that you don't want to start further discussions

Invent · 22-07-2008, 01:44 PM

Furthur discussions? What's wrong with furthur discussions?..

If you want me to take this thread/tutorial seriously you need to explain exactly what the javascript does, thats how you teach someone properly using a tutorial. Not just by spoon feed them code.

Note, I'm not trying to cause an argument I just think you need to expand on the tutorial a bit more.

Meti · 22-07-2008, 01:46 PM

But I've done steps for them to see how the should do it. It's very simple. Try doing it, use notepad or whatever you want. If it doesn't help, I'd love to help you.

Invent · 22-07-2008, 01:47 PM

You've only told them to copy and paste a block of code.

Atleast let them know what the code does!

Excellent1 · 22-07-2008, 01:50 PM

So basically you've took pre-made code and pasted it here and called it your own tutorial? As invent says, what does all this Javascript do?

Meti · 22-07-2008, 01:54 PM

This code rolls over to another image. For example,
You're coding a layout, and when you put your mouse over an image, it should rollover to another image.
Ex: Like navigation images. From the beginning, it's grey. And when you put your mouse over it, it changes colour to black.

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

Thread Tools

[TUT] Create a simple rollover image [TUT]

Posting Permissions