Javascript function to specify an image map?

Discussion in 'HTML' started by Jim Van Abbema, Dec 6, 2004.

  1. Just beneath my row of navigation buttons, I am using rollovers to bring up
    different graphic images, each which have been mapped with several links.
    Of course, each graphic requires its own image map. What script can I use
    to bring up the correct image map when its respective graphic is displayed?

    Thanks,
    Jim Van Abbema
     
    Jim Van Abbema, Dec 6, 2004
    #1
    1. Advertising

  2. Jim Van Abbema

    Guest

    Jim Van Abbema wrote:

    > Just beneath my row of navigation buttons, I am using rollovers to bring
    > up different graphic images, each which have been mapped with several
    > links.
    > Of course, each graphic requires its own image map. What script can I use
    > to bring up the correct image map when its respective graphic is
    > displayed?



    Don't use a script.
    See thread 11/30/04 "How to create rollovers in imagemaps"
     
    , Dec 6, 2004
    #2
    1. Advertising

  3. <> wrote in message
    news:kj5td.8659$...
    > Jim Van Abbema wrote:
    >
    >> Just beneath my row of navigation buttons, I am using rollovers to bring
    >> up different graphic images, each which have been mapped with several
    >> links.
    >> Of course, each graphic requires its own image map. What script can I
    >> use
    >> to bring up the correct image map when its respective graphic is
    >> displayed?

    >
    >
    > Don't use a script.
    > See thread 11/30/04 "How to create rollovers in imagemaps"
    >


    This really doesn't answer my question. The rollover functions
    independently of the image maps. When the graphic is displayed, I need to
    ensure that the respective specific image map is in use.
     
    Jim Van Abbema, Dec 7, 2004
    #3
  4. Jim Van Abbema

    Guest

    Jim Van Abbema wrote:

    >
    > <> wrote in message
    > news:kj5td.8659$...
    >> Jim Van Abbema wrote:
    >>
    >>> Just beneath my row of navigation buttons, I am using rollovers to bring
    >>> up different graphic images, each which have been mapped with several
    >>> links.
    >>> Of course, each graphic requires its own image map. What script can I
    >>> use
    >>> to bring up the correct image map when its respective graphic is
    >>> displayed?

    >>
    >>
    >> Don't use a script.
    >> See thread 11/30/04 "How to create rollovers in imagemaps"
    >>

    >
    > This really doesn't answer my question. The rollover functions
    > independently of the image maps. When the graphic is displayed, I need to
    > ensure that the respective specific image map is in use.


    I could be wrong, but I doubt anyone is going to serve up exactly what you
    want. You'll have to apply the known methods recursively as you move down
    through images. I still suggest the non-script solution. Old-style image
    maps have accessibility problems. Read the article at alistapart, and I
    think you'll be able to come up with a solution. Also have a look at the
    work done at:
    http://www.meyerweb.com/eric/css/edge/index.html
    ....which again may not be ecactly what you want. Make modifications to
    your needs.
     
    , Dec 7, 2004
    #4
  5. Jim Van Abbema

    mscir Guest

    wrote:

    > Jim Van Abbema wrote:
    >
    >><> wrote
    >>
    >>>Jim Van Abbema wrote:
    >>>
    >>>>Just beneath my row of navigation buttons, I am using rollovers to bring
    >>>>up different graphic images, each which have been mapped with several
    >>>>links.
    >>>>Of course, each graphic requires its own image map. What script can I
    >>>>use
    >>>>to bring up the correct image map when its respective graphic is
    >>>>displayed?
    >>>
    >>>
    >>>Don't use a script.
    >>>See thread 11/30/04 "How to create rollovers in imagemaps"

    >>
    >>This really doesn't answer my question. The rollover functions
    >>independently of the image maps. When the graphic is displayed, I need to
    >>ensure that the respective specific image map is in use.

    >
    > I could be wrong, but I doubt anyone is going to serve up exactly what you
    > want. You'll have to apply the known methods recursively as you move down
    > through images. I still suggest the non-script solution. Old-style image
    > maps have accessibility problems. Read the article at alistapart, and I
    > think you'll be able to come up with a solution. Also have a look at the
    > work done at:
    > http://www.meyerweb.com/eric/css/edge/index.html
    > ...which again may not be ecactly what you want. Make modifications to
    > your needs.


    Maybe you can use this approach, it uses multiple images, each using a
    unique image map (I only included 2 maps here as an example).

    By changing the visibility property of the grahpics, you automatically
    select which image map is in use. This approach has several graphics
    that are the same size, that have the same 'main menu' choices on their
    left sides, and individual 'sub-menu' choices on their right sides.
    Moving the mouse over the main menu areas changes which graphic/imagemap
    combination is in use, and displays the appropriate submenu choices on
    the right side.

    <style type="text/css">
    img {
    border: 0;
    visibility: hidden;
    position: absolute;
    top: 10px;
    left: 10px
    width: 540px;
    height: 540px;
    }
    </style>

    <SCRIPT type="text/javascript">
    var lasttype=10101;
    function LoadMenu (type) {
    if (type==lasttype)
    return true;
    for (var n=0; n<6; n++)
    if (n==type)
    document.images[n].style.visibility="visible";
    else
    document.images[n].style.visibility="hidden";
    lasttype=type;
    return true;
    }

    </SCRIPT>
    </HEAD>

    <BODY>
    <IMG src="mainmenu.jpg" usemap="#mainmenumap"
    style="visibility:visible;">
    <IMG src="frozenfood.jpg" usemap="#submenumap1">
    <IMG src="freshfood.jpg" usemap="#submenumap2">
    <IMG src="beverages.jpg" usemap="#submenumap3">
    <IMG src="homehealth.jpg" usemap="#submenumap4">
    <IMG src="petfood.jpg" usemap="#submenumap5">

    <map name="submenumap1" id="submenumap1">
    <area shape="rect" coords="7, 57, 167, 143" onmouseover= "LoadMenu(1)">
    <area shape="rect" coords="7, 153, 167, 239" onmouseover= "LoadMenu(2)">
    <area shape="rect" coords="7, 249, 167, 334" onmouseover= "LoadMenu(3)">
    <area shape="rect" coords="7, 347, 167, 430" onmouseover= "LoadMenu(4)">
    <area shape="rect" coords="7, 449, 167, 527" onmouseover= "LoadMenu(5)">
    <area shape="rect" coords="191,87,533,120" HREF = "large.htm">
    <area shape="rect" coords="191,121,533,152" HREF = "small.htm">
    </map>

    <map name="submenumap3" id="submenumap3">
    <area shape="rect" coords="7, 57, 167, 143" onmouseover= "LoadMenu(1)">
    <area shape="rect" coords="7, 153, 167, 239" onmouseover= "LoadMenu(2)">
    <area shape="rect" coords="7, 249, 167, 334" onmouseover= "LoadMenu(3)">
    <area shape="rect" coords="7, 347, 167, 430" onmouseover= "LoadMenu(4)">
    <area shape="rect" coords="7, 449, 167, 527" onmouseover= "LoadMenu(5)">
    <AREA SHAPE="RECT" COORDS="192,83,534,55" HREF="tea.htm" TITLE="Tea">
    <AREA SHAPE="RECT" COORDS="192,115,532,87" HREF="eg25.htm" TITLE="earl
    grey 25 bags">
    <AREA SHAPE="RECT" COORDS="192,147,534,119" HREF="eg100.htm"
    TITLE="earl grey 100 bags">
    <AREA SHAPE="RECT" COORDS="194,181,532,149" HREF="eg200.htm"
    TITLE="earl grey 200">
    </map>
     
    mscir, Dec 7, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joe
    Replies:
    0
    Views:
    688
  2. Martin
    Replies:
    13
    Views:
    12,861
    Nilson
    Nov 14, 2007
  3. Jsp
    Replies:
    2
    Views:
    349
    Simon
    Jan 16, 2005
  4. Ryan Sullivan

    Javascript Image Viewer from Image Map

    Ryan Sullivan, Feb 29, 2004, in forum: Javascript
    Replies:
    3
    Views:
    256
  5. Jim Van Abbema

    Function to specify a certain image map?

    Jim Van Abbema, Dec 7, 2004, in forum: Javascript
    Replies:
    1
    Views:
    89
    McKirahan
    Dec 7, 2004
Loading...

Share This Page