How can I take an image like so:
_________________________
|.......|.......|.......|.......|.......|.......|

And when, say, the first one is rolled over, you get this:

_________________________
|.......|.......|.......|.......|.......|.......|
|.......|
|.......|
|.......|
|.......|

And each one of the drop down's are links, but then, maybe the second top box is a link in and of itself.

Basically, how can I make an image map rollover to an image map...

use layers.

put the rollover image maps in layers.

hide them initially.

when the mouse moves over the first link(in the image map), set the visibility of that particular dropdown layer content to visible.

and when the mouse moves out, toggle the visibility back to hide.

this way you can have the drop down links you want.




if you are using dreamweaver, then you might wanna take a look at this

http://www.projectseven.com/tutorial...hide/index.htm


let know.

If you're not using dreamweaver, I've coded a pretty good app that works in Mozilla, NS6+, and IE. It does NOT work in NS4.x. It's all in Javascript, but it does the job nicely. I'd post the code here, but it's pretty darned long.

Basically, it's just using the same method as praveen posted above. The function code can be found on lines 45 - 53. and the information you pass to the function can be found on any of the links in the drop down menus. (eg. line 112 - 127)

Hope this helps.

actually.. it's not that long... I'll post it here

<script language="JavaScript" type="text/javascript">
var drop_1=document.getElementById(drop_1);
function showme(id) {
document.getElementById(id).style.visibility="visi ble";
}
function hideme(id) {
document.getElementById(id).style.visibility="hidd en";
}
</script>

then one of the lines that passes info to the function is thus:

<td><a href="blah.com" onMouseOver="showme('drop_1')" onMouseOut="hideme('drop_1')"></a></td>

hope that doesn't thoroughly confuse ya.