Results 1 to 5 of 5

Thread: IMG COORDS img menu

  1. #1
    Junior Registered
    Join Date
    Oct 2003
    Posts
    2

    IMG COORDS img menu

    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
    Last edited by tweak^; 10-04-2003 at 11:17 PM.

  2. #2
    Senior Member chromate's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    2,348
    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!
    Last edited by chromate; 10-05-2003 at 04:17 AM.

  3. #3
    Administrator Chris's Avatar
    Join Date
    Feb 2003
    Location
    East Lansing, MI USA
    Posts
    7,055
    Check out dynamicdrive.com for some more examples of scripts, you might be able to alter one of them for your needs.
    Chris Beasley - My Guide to Building a Successful Website[size=1]
    Content Sites: ABCDFGHIJKLMNOP|Forums: ABCD EF|Ecommerce: Swords Knives

  4. #4
    Junior Registered
    Join Date
    Oct 2003
    Posts
    2
    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
    Last edited by tweak^; 10-05-2003 at 10:24 AM.

  5. #5
    Senior Member chromate's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    2,348
    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.

Similar Threads

  1. Top menu here at WSP
    By Percept in forum Search Engine Optimization
    Replies: 1
    Last Post: 10-30-2003, 09:30 PM
  2. HTML mouse over menu
    By PTechnik in forum HTML, CSS, Layout, and Design
    Replies: 1
    Last Post: 10-04-2003, 05:31 PM
  3. Mouse Over Menu
    By Kevin in forum HTML, CSS, Layout, and Design
    Replies: 15
    Last Post: 07-06-2003, 08:23 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •