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

Code:

<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

Code:

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

Thread: Image rollover drop down menus.

Thread Tools

Search Thread

Image rollover drop down menus.

Bookmarks

Bookmarks

Posting Permissions