View Full Version : Mouse-over effects, more info


aylaah
04-08-2006, 01:11 AM
I'm considering putting up both a mouse over and a side by side on my website, but as a web-developer novice I am trying to find out how. I have seen a few threads where it is mentioned, and have seen it attributed to being done with Java, but how? Is there a program that does it automatically? Or is it a bit too much for a novice used to using site builders?

If you know somewhere it is in tutorial or instruction format, can you direct me? I've been searching for something but keep getting retouchers websites that use it, and have it in their descriptions for sites. I just don't get how to do it.

I was basically thinking of having a low speed/high speed split, so the mouse over would be great for high speed viewers. If I ever work out how to do it!!

Help? I promise to the one who shows me the light, complete :bow:

Verywierd
04-08-2006, 02:03 AM
I usually use Dreamweaver or Namo to do it but try this:

http://www.htmlcodetutorial.com/images/images_famsupp_59.html

NancyJ
04-08-2006, 03:33 AM
Javscript rollovers are very simple...

<img src = "before.jpg" onmouseover="this.src='after.jpg'" onmouseout="this.src.'before.jpg'">

Thats all there is to it.

Just to break it down for you....

This is the HTML for an image <img src = "path/to/image.ext">
Where path/to/image.ext is the location of the image eg. images/image1.jpg

That line of code will produce an image in an html page. You have an img tag with the src (source) attribute of path/to/image.ext
Now we modify that code to change when we mouse over it.

We use the DHTML attribute, onmouseover, which does exactly what it says on the tin, the code assigned to that attribute will be executed when the user places his mouse over the image.

Now the javascript...
this.src = "path/to/other/image.ext"
very simply, this says we want to set the src attribute of this element to path/to/other/image.ext

And then we use the DHTML attribute onmouseout to change the image back to the original image when we mouse off it.

HTH

aylaah
04-08-2006, 07:56 AM
Yay!

:bow: :bow:

to both of you!

Nanls
04-10-2006, 05:09 PM
Okay, maybe I shouldn't admit this, but I look at sites and find what I like and then go look at the source code. Sometimes you can find the source of the code, like the movie slide show on www.CodeLifter.com that I use on my sites, which I found in this manner. There are all kinds of sites that have examples of code to use at no cost. Just search in google.

~Nancy~
______________________________________________________

www.fixthepixs.com
www.datepixs.com