Does anyone remember the website that has an easy Javascript code to produce menu flyouts when you mouseover a link?
Thanks
Printable View
Does anyone remember the website that has an easy Javascript code to produce menu flyouts when you mouseover a link?
Thanks
You can't just use CSS? And what do you mean by fly-outs?
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 GeckoQuote:
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'
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.
Quote:
DUH! I tried that already
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
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:
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)Quote:
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.
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.
you can see an working example at: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>
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:
Working example: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>
http://validweb.nl/vbforums/mouseover/morebuttons.html
Good luck!