Forum Moderators: open

Message Too Old, No Replies

Changing images on mouseover

The css forum said i needed java for this.

         

Bones6

7:07 pm on Jan 14, 2008 (gmt 0)

10+ Year Member



does anyone know the java to let me get this done:

"" Now, it is about 5AM when I'm posting this, so I apologize in advance for any misspellings...

I'm currently attempting to get images for the links to change on mouse over and on action, but for the life of me can't figure out how!
Now, I believe I've done it before, but I kinda don't remember how I did it. The images are not background images, they are actual images with the words typed into them.

Any help would be appreciated, and again sorry if this is a simple little snippet of code! ""

Thats what i asked in the CSS forum and i got this response:
"" Only background images can be changed w/ CSS. You'll need to use Javascript. ""

Now I hate Java, so I really don't know much about it... does anyone know what code i need?

MatthewHSE

7:38 pm on Jan 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First, "Java" is an entirely different thing than JavaScript... ;)

Second, why couldn't you use background images? That would allow you to use CSS to do what you want.

If that's not an option, check out Dynamic Drive or some other such repository for navigation scripts, mouseover effects, etc. You'll find plenty of ready-made scripts to choose from.

[edited by: MatthewHSE at 8:30 pm (utc) on Jan. 14, 2008]

lavazza

8:00 pm on Jan 14, 2008 (gmt 0)

10+ Year Member



As you hate javaSCRIPT, maybe this'll help get you started

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EditTitle</title>
</head>
<body>
<p> hello world</p>
<p>
<a href="http://www.example.com">
<img id="aUniqueImageNameHere" src="images/test001.JPG" alt="some alt text goes here"
onMouseOver='aUniqueImageNameHere.src="images/test002.JPG";'
onMouseOut='aUniqueImageNameHere.src="images/test001.JPG";'></a>
</p>
<p>
another paragraph
</p>
</body>
</html>

Bones6

8:58 pm on Jan 14, 2008 (gmt 0)

10+ Year Member



Thanks, i'll try that out lol

[edited by: Bones6 at 8:59 pm (utc) on Jan. 14, 2008]

phranque

1:53 am on Jan 15, 2008 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



since you love javascript so much now, i should point out that it might be useful to preload your mouseover images.
otherwise there is a delay as each image is requested and loaded into cache during the initial mouseover.
you can do this with the onload event on the body tag.
if they are small it might not matter...