IMG COORDS img menu

[tweak^]

ok this is gonna get super complicated. what i want is when i mouse over a certain link i want a menu to appear that will have links in it. the catch is my links are in coords form in an image. here is the code.

<MAP NAME="Ballardhigh">
<AREA SHAPE=rect COORDS="15,30,110,46" HREF="activities.htm" ALT="Activities">
<AREA SHAPE=rect COORDS="15,53,122,66" HREF="transportation.htm" ALT="Transportation">
<AREA SHAPE=rect COORDS="111,113,125,180" HREF="sponsors.htm" ALT="Sponsors">
<AREA SHAPE=rect COORDS="140,134,210,145" HREF="districts.htm" ALT="Districts">
<AREA SHAPE=rect COORDS="159,7,260,18" HREF="contact.htm" ALT="Contact">
<AREA SHAPE=rect COORDS="225,89,300,100" HREF="students.htm" ALT="Students">
<AREA SHAPE=rect COORDS="226,121,270,132" HREF="staff.htm" ALT="Staff">
<AREA SHAPE=rect COORDS="227,26,397,75" HREF="about.htm" ALT="About">
</MAP>
now is there a way to make my links show a sub menu on mouseover?

EDIT: it does not need to follow the mouse or anything like that.

ALSO: i do not want my image to link to anywhere anymore, i just want them to show a popup menu. prefferably not in a new window, like a java thing. floating

[chromate]

I'm not totally sure, because I always try and keep things more simple than this :) But I would tackle it by using CSS, JavaScript and DHTML.

Create several divs and make all their visibilities set to hidden. Then, in the links of your image map, use some JavaScript to set the required div to visible onMouseOver. And set back to hidden onMouseOut.




First some JavaScript:



function showObject(obj) { obj.visibility = "visible"; }

function hideObject(obj) { obj.visibility = "hidden"; }


Then your CSS / HTML content:


<div id="activities" style="visibility: hidden;"> Content relating to activities link</div>
<div id="transportation" style="visibility: hidden;"> Content Relating to your transportation link</div>


And then in your image map links...


<AREA SHAPE=rect COORDS="15,30,110,46" HREF="activities.htm" onMouseOver="showObject(activities);" onMouseOut="hideObject(activities)" ALT="Activities">
<AREA SHAPE=rect COORDS="15,53,122,66" HREF="transportation.htm" onMouseOver="showObject(transportation);" onMouseOut="hideObject(transportation)" ALT="Transportation">



The above should work for IE but netscape will handle it slightly differently. Check out: http://www.dansteinman.com/dynduo/

Hope this helps you out. Welcome to the forums! :)

[Chris]

Check out dynamicdrive.com for some more examples of scripts, you might be able to alter one of them for your needs.

[tweak^]

ok i can do everything except the java bit

function showObject(obj) { obj.visibility = "visible"; }

function hideObject(obj) { obj.visibility = "hidden"; }

i don't know where to put that or how

only problem is if the java doesn't work nothing does lol.

the next porblewm is that i need to be able to put links in the image that shows up. thats why i was hoping to be able to click a menu when i clicked activities

[chromate]

Just stick all your java functions inside script language tags, like so:

<script language="javascript">
function showObject(obj) { obj.visibility = "visible"; }
function hideObject(obj) { obj.visibility = "hidden"; }
</script>

I'm not totally sure exactly what you want to do from your description. But if you want another menu to appear when someone clicks "activities" for example, then just put your new menu in the "activities" div. And instead of using the onMouseOver and onMouseOff just put the function call as the hypertext reference, like so:

<AREA SHAPE=rect COORDS="15,30,110,46" HREF="javascript: showObject(activities)">

<div id="activities" style="visibility: hidden;"> Put your activities menu here. </div>

Hope this helps! Sounds like you need to learn some basic JavaScript. If you have at least a basic knowledge then you will be able to learn from other existing code and use the bits that you need to get the job done.