Hover or Rollover?

**abwebs** · Jun 27, 2001, 12:00

Hello all,
I have what seems to be a simple idea, but I can't seem to figure out how to implement it. I'd like to have one .jpg swap for another .jpg when a user hovers over the image with their mouse, however I DO NOT want the .jpg to have an active link to another html page.

I am somewhat familiar with CSS :hover, and Javascript rollovers, but I think CSS :hover only works with text, and I've only written JS rollovers with active page links. Can I somehow take the <a href > out of the JS command and have it work?

Other Solutions?

**creole** · Jun 27, 2001, 13:04

You could have it set up so that the user rolls over a piece of text but the image it what changes.

**maximumedge** · Jun 27, 2001, 13:56

hello,

i could be wrong, but i don't think there's a way to completely remove the link. however, you could do something like this:

Code:

<html>
<head>
<script language=JavaScript>
function over() {
document.images[0].src = "ul.gif";
}
function out() {
document.images[0].src = "ur.gif";
}
</script>
<body>
<a href="JavaScript:over()" onmouseover="over();return true" onmouseout="out();return true">
<IMG SRC="ur.gif">
</a>
</body>
</html>

this still has a link, but it doesn't go to another html page.

Jason Weinstein
webmaster@MaximumEdge.com
http://www.MaximumEdge.com/

**abwebs** · Jun 28, 2001, 03:47

You could have it set up so that the user rolls over a piece of text ...

The text would still require a link to another page?

i could be wrong, but i don't think there's a way to completely remove the link...

Tried it, still goes to another page if user clicks on it.

Still searching for an alternative.

Thanks for your input.

Maybe I'll post this in Client Side Scripting category.

**maximumedge** · Jun 28, 2001, 05:58

Originally posted by abwebs
Tried it, still goes to another page if user clicks on it.

the forum seems to have changed my code for some reason. try changing it so that 'java script' is just one word.

Jason

**lucas** · Jun 28, 2001, 06:05

you could have it link back to the same page if you can't think of a way to do it without a link. or you could even have it link to an anchor thats located at the same area, so if the user clicks on it, nothing happens.

**maximumedge** · Jun 28, 2001, 06:10

Originally posted by lucas
you could have it link back to the same page if you can't think of a way to do it without a link. or you could even have it link to an anchor thats located at the same area, so if the user clicks on it, nothing happens.

yes, you could do that, but a link to the same page would cause the page to reload and a link to an anchor would change the position of the page. it's better to link it to a javascript function that doesn't point to another page.

Jason Weinstein
webmaster@MaximumEdge.com
http://www.MaximumEdge.com/

**abwebs** · Jun 28, 2001, 06:21

Exactly what I was trying to avoid - loading a page ! Thanks again for your help maximumedge! !

<a href="java script: over()" onmouseover="over();return true" onmouseout="out();return true"> <IMG SRC="example.jpg"> </a>

seems to work!

**creole** · Jun 28, 2001, 19:10

If you can't get that working then you could just leave it as a link but implement the "No refresh" link setup that Kevin Yank describes.

**duckie** · Jun 29, 2001, 14:11

Try

Code:

<a href="javascript:;" ....>

instead.

That way you don't trigger any javascript clicking on the "link".

**the judge** · Jun 29, 2001, 21:11

This may be of some help.
http://66.34.42.140/forums/showthrea...?threadid=8217

judge

**delemtri** · Jul 1, 2001, 10:31

Can't you just put the onMouseOver in the <img> code?

The SitePoint Forums have moved.

User Tag List

Thread: Hover or Rollover?

Thread Tools

Display

Hover or Rollover?

Bookmarks

Bookmarks

Posting Permissions