PDA

View Full Version : Image rollover drop down menus.



thaartist
08-02-2006, 01:08 AM
I need code to make rollover images create dropdowns beneath them (of text) and return to the original image when the mouse is hovered off the dropdown OR off the original image.

Anyone got any code to accomplish this?!?! I've been altering code from this site all day and got reallll close just not totally there.

Greatly appreciate it! Thanks...

Joe

mburt
08-02-2006, 01:16 AM
Found your other thread


<html>
<head>
<style type="text/css">
.menu {
width:100px;
padding:3px;
font:12px ms sans serif;
display:none;
position:absolute;
border:1px solid gray
}
</style>
<script language="javascript">
function showMenu(which,tf) {
if (tf==true) {
which.style.display="block"
}
if (tf==false) {
which.style.display="none"
}
}
</script>
</head>
<body>
<img src="" onmouseover="showMenu(menu1,true)" onmouseout="showMenu(menu1,false)">
<div class="menu" id="menu1" style="left:10px;top:45px" onmouseover="showMenu(menu1,true)" onmouseout="showMenu(menu1,false)">
Item 1
<br>Item 2
<br>Item 3
<br>Item 4
<br>Item 5
</div>
</body>
</html>

To add more menus..
change the id



<img src="" onmouseover="showMenu(menu2,true)" onmouseout="showMenu(menu2,false)">

<div class="menu" id="menu2"... onmouseover="showMenu(menu2,true)" onmouseout="showMenu(menu2,false)">

thaartist
08-02-2006, 02:03 AM
Thanks! I ended up using Open Cube... I didn't know open cube did this as well... only thing is its supppper slow from all the extra coding the program includes...

imma mess wit your code tho and see whatsup.... if your code works it'll definintely load way faster...

Thanks again!

Joe

chbrandt
12-27-2007, 05:42 AM
I know this is an old thread, but I had a quick question about it...

<img src="" onmouseover="showMenu(menu1,true)" onmouseout="showMenu(menu1,false)">

I only see a place for one IMG file...but I want it to change on rollover to another image. I'm sure this isn't hard to add, but I cant get the code right....Any ideas?

By the way, this is a GREAT simple code for its purpose. Thanks!

Chris

djr33
12-27-2007, 06:48 AM
This is for a menu, not images. There are thousands of scripts available for "rollover" or "mouseover" image swapping-- just google for that, and I guarantee you'll find one easily.

chbrandt
12-27-2007, 07:07 AM
I understand it's for a menu.....but I want it to rollover images as well. I guess I need to know how to add a rollover to it. Another slight problem is there is no delay onmouseout....I've tried setTimeout and setInterval but with my little knowledge of javascript, I can't get it to work. Thanks

Chris

djr33
12-27-2007, 07:11 AM
You can add more than one action to a javascript attribute in an html tag by placing a semi-colon between them. Use this plus a mouseover image script, then.

Does that work?