PDA

Click to See Complete Forum and Search --> : 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?

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


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

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