PDA

View Full Version : [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:

<!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>

<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.

<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:

<!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! :P
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.
Dentafrice
22-07-2008, 01:56 PM
I really don't think you know what the code does do you?

You know that when you put your mouse over it, it changes, and that is about it.

Why not expand on the code, tell the 'users' reading this page what the functions do, how it works.

That is a tutorial.

Not saying.. "copy and paste this, copy and paste this", that is just source code.
Joe!
22-07-2008, 01:57 PM
As you have copied from dreamweaver, surely its much easier to just click Insert>Image Objects>Rollover Image in dreamweaver? much quicker than copying and pasting the code you have posted lol. It would be a bit better if you actually explained what the javascript done as well, like previous members have posted.
Hayd93
22-07-2008, 02:04 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 ;)


Thats the one thing that really gets on my nerves. When users say your a moderator stop. Thats basicly blackmail.

I never usually do this but - rep.

The tutoral anyway. yes its a good tutoral for people who are unsure of this. Maybe explain what you are doing to help them even more.
Decode
22-07-2008, 02:12 PM
I would use CSS for rollovers, it takes so much less code.

<style type="text/css">
li a:hover {
background-image: url('hover.gif');
}
.roll {background-image: url('nothover.gif');
}
</style>
<li class="roll">HIIII</li>
Source
22-07-2008, 02:52 PM
Yea you can do it with all classes. Much better and less strain on older pc's (by about 0.00001% :P ).



.button {
width: 100px;
padding: 10px;
float: left;
background: #FFFFFF;
}

.button:hover {
background: #000000;
}
kk.
22-07-2008, 03:37 PM
I would use CSS for rollovers, it takes so much less code.

<style type="text/css">
li a:hover {
background-image: url('hover.gif');
}
.roll {background-image: url('nothover.gif');
}
</style>
<li class="roll">HIIII</li>
dont forget that with this method, you should add a peice of code that pre-loads the image thats going to show on hover. :)
Independent
22-07-2008, 04:13 PM
I've seen that on dynamic drive. I've seen that on dynamic drive. I've seen that on dynamic drive. I've seen that on dynamic drive. I've seen that on dynamic drive. I've seen that on dynamic drive. I've seen that on dynamic drive.

KK's code is easier by much. +REP, I'd have done via it in an img tag using some simpler js.
Oddsocks
22-07-2008, 04:31 PM
Yea you can do it with all classes. Much better and less strain on older pc's (by about 0.00001% :P ).



.button {
width: 100px;
padding: 10px;
float: left;
background: #FFFFFF;
}

.button:hover {
background: #000000;
}




Wouldnt work in IE, thats why you should use an A:hover with display block :)
Meti
22-07-2008, 05:56 PM
*removed*?!? I'm trying to be nice, and help this community out, by doing this tutorial, to learn some of you who didn't know this. And all I get for respons is -rep's.

I can take harsh critism, but when I get -rep's for something I really shouldn't get them for, I feel really angry.

It's a code *removed*!

No one said, "oh, thanks for doing this, but you could of..."

Not even 1 *removed* "thank you" from anyone!

"I've seen that on dynamic drive" - Yes, you maybe f'ing saw that on dynamic drive, but I didn't take this code from dynamic drive.

And for you who think this only is a code, LMAO. I had to do things too. I had to do the rollovers, i had to write down step by step, so it would be much easier for you to see and learn. And all you say is "simple copy and paste".

And i swear, someone of you has used this tutorial, but just don't have the self-confident to say "thanks for that", because you think you'll get bullied by everyone else who actually can do this without even pressing anything. Write every *removed* word with the keypad.

You are some selfish ******* ****!

Thanks for reading :rolleyes:

Edited by Invent (Forum Moderator): Please don't avoid the filter.
Dentafrice
22-07-2008, 06:02 PM
That's real professional, quit crying over rep.

Quit crying because someone criticized you, it happens.. live with it and quit being a baby.

Maybe if you would write a tutorial and not just throw us Dreamweaver code, that might help :rolleyes:
Joe!
22-07-2008, 06:02 PM
*removed*?!? I'm trying to be nice, and help this community out, by doing this tutorial, to learn(*teach) some of you who didn't know this. And all I get for respons is -rep's.

I can take harsh critism, but when I get -rep's for something I really shouldn't get them for, I feel really angry.

It's a code *removed*!

No one said, "oh, thanks for doing this, but you could of..."

Not even 1 *removed* "thank you" from anyone!

"I've seen that on dynamic drive" - Yes, you maybe *removed* saw that on dynamic drive, but I didn't take this code from dynamic drive.

And for you who think this only is a code, LMAO. I had to do things too. I had to do the rollovers, i had to write down step by step, so it would be much easier for you to see and learn. And all you say is "simple copy and paste".

And i swear, someone of you has used this tutorial, but just don't have the self-confident to say "thanks for that", because you think you'll get bullied by everyone else who actually can do this without even pressing anything. Write every *removed* word with the keypad.

You are some selfish ******* ****!

Thanks for reading :rolleyes:

Calm down tbh, we're just advising you on how to improve your tutorial?
Forgot to add, your making a really good image for your 'company', designers should be able to take contructive criticism.
Excellent1
22-07-2008, 06:08 PM
I can almost guarantee you nobody has used this.
Meti
22-07-2008, 06:09 PM
who cares??! I don't think I will open it. I'll just be a Freelance designer instead.


And Invent, do i avoid the filter if i say *removed*? It could be another word :S

Edited by Invent (Forum Moderator): Please don't avoid the filter.
Joe!
22-07-2008, 06:10 PM
Nice approach to life.
Excellent1
22-07-2008, 06:13 PM
And Invent, do i avoid the filter if i say *removed*? It could be another word :SWhy do you keep trying to provoke him? You clearly meant **** so quit trying to be an imbecile, oh wait, you are already.
Joe!
22-07-2008, 06:14 PM
who cares??! I don't think I will open it. I'll just be a Freelance designer instead.


And Invent, do i avoid the filter if i say *removed*? It could be another word :S

In the context of which you we're using it, it was obvious what word you meant.
Meti
22-07-2008, 06:16 PM
..OOO.. Really cool :rolleyes:

I clearly meant that word, but how should he know?

/\
()
Invent
22-07-2008, 06:19 PM
And Invent, do i avoid the filter if i say *removed*? It could be another word
Us moderators have a unique and magical thing called...common sense. We understand what you meant by that word seeing as there is not really another word similar to the one you posted :)

Also, the context in which you used the word also gave away what you meant by using it.
Joe!
22-07-2008, 06:19 PM
Because Invent is a normal human being and can read?
Basically what Invent posted at the same time as me.
Meti
22-07-2008, 06:25 PM
Cool...
Dentafrice
22-07-2008, 06:26 PM
who cares??! I don't think I will open it. I'll just be a Freelance designer instead.


And Invent, do i avoid the filter if i say *removed*? It could be another word :S

Edited by Invent (Forum Moderator): Please don't avoid the filter.

Who would want to hire a freelancer with an attitude like you. Nobody.
Excellent1
22-07-2008, 06:27 PM
Cool...Grow up and get off this forum.
Invent
22-07-2008, 06:28 PM
I'm going to have to close this thread sorry :P

Feel free to start the thread again Meti (but if you do, please try to expand on the tutorial a bit more..).

Want to hide these adverts? Register an account for free!