Mousover Effect For My Links

**jesus4u** · Aug 3rd, 2004, 10:03 AM

Does anyone remember the website that has an easy Javascript code to produce menu flyouts when you mouseover a link?

Thanks

**vbNeo** · Aug 3rd, 2004, 10:10 AM

You can't just use CSS? And what do you mean by fly-outs?

**Jop** · Aug 3rd, 2004, 10:18 AM

Have a look at this article:
http://alistapart.com/articles/dropdowns

nice valid non-javascript (well a bit, to fix an IE glitch) 'menu-flyouts'

**vbNeo** · Aug 3rd, 2004, 10:23 AM

Originally posted by Jop
Have a look at this article:
http://alistapart.com/articles/dropdowns

nice valid non-javascript (well a bit, to fix an IE glitch) 'menu-flyouts'

The example is *****ed in Gecko

**jesus4u** · Aug 4th, 2004, 08:16 AM

thanks for your responses but what I am looking for is a simple way to show a thumbnail image whenever you mouseover a link. Not replace the link what pop a thumbnail image to the right of the link.

**ice_531** · Aug 4th, 2004, 09:09 AM

www.google.com

**jesus4u** · Aug 4th, 2004, 09:14 AM

Originally posted by ice_531
www.google.com

DUH! I tried that already

**Ecniv** · Aug 4th, 2004, 09:33 AM

This (sorta) works in ie... No idea on the other browsers and its probably bad code. Hey you could tweak it though?

Code:

<html>
<head>
<script type='text/javascript'>
function doSwap(t,o,u,x,y) {
	
	if (t==1) {
		o.innerHTML = "<img src='"+u+"' width="+x+" height="+y+" />";
	}else{
		o.innerHTML = u;
	}
	return true;
}
</script>

</head>
<body>
Stuff n nonsense
<a href='#' title='A link' onMouseOver='doSwap(1,this,"./pic",128,32);' onMouseOut='doSwap(2,this,"A link to no-where",0,0);'> A link to no-where </a>
</body>
</html>

Vince

**ice_531** · Aug 4th, 2004, 02:52 PM

if its for a menu...make the menu in photoshop

err do the main background in photoshop cs and then import it to imageready cs and create the menu and layers for the mouseover effects.

if not....did you try the Jscript sites? ( ones with tons of apps and links to java games....i remember seeing link functions ) if i remember the url illpost it

**vbNeo** · Aug 6th, 2004, 01:13 AM

Originally posted by jesus4u
thanks for your responses but what I am looking for is a simple way to show a thumbnail image whenever you mouseover a link. Not replace the link what pop a thumbnail image to the right of the link.

it's rather easy actually, I have to go to school now, but I'll fix something up for you when I get home, tip(a DIV is a very good friend)

**Jop** · Aug 6th, 2004, 06:30 AM

I've fixed a little example for you.
It has 2 states, off and on (duh!). It's all done with a few lines of css.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Mouseover</title>
	<style type="text/css" media="screen">
		a.button{
			display: block;
			width: 200px;
			height: 50px;
			background: url(off.gif);
		}
		
		a.button:hover{
			background: url(on.gif);
		} 
	</style>
</head>

<body>
	<a href="#" class="button"></a>
</body>
</html>

you can see an working example at:
http://validweb.nl/vbforums/mouseover/

Hope this gets you on the right track.

edit: If you need more than one button (obviously), you should make use of unique id's:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Mouseover</title>
	<style type="text/css" media="screen">
		a.button{
			display: block;
			width: 200px;
			height: 50px;
		}
		
		a.button#b1{		background: url(off.gif);	}
		a.button#b1:hover{	background: url(on.gif);	} 
		
		a.button#b2{		background: url(off2.gif);	}
		a.button#b2:hover{	background: url(on2.gif);	} 
	</style>
</head>

<body>
	<a href="#" class="button" id="b1"></a><br />
	<a href="#" class="button" id="b2"></a>
</body>
</html>

Working example:
http://validweb.nl/vbforums/mouseover/morebuttons.html

Good luck!

Thread: Mousover Effect For My Links

Thread Tools

Display

Mousover Effect For My Links

Posting Permissions