Howto create rollovers in imagemaps?

Discussion in 'HTML' started by timothy, Nov 30, 2004.

  1. timothy

    timothy Guest

    I'm trying to create rollovers inside an imagemap. I'm using Gimp 2.0 to
    create the graphics and maps and Quanta 3.2.1 to edit code. Here's my code
    as of now:

    <img src="map.png" width="256" height="256" border="0" usemap="#map">
    <map name="map">

    <area shape="circle" name=one coords="128,134,57"
    onmouseover="document.one.src='/map/image/green.png'"
    onmouseout="document.one.src='/map/image/red.png'"
    href="http://www.google.com" /> </map>

    How can I fix this issue? Thanks to all who reply......
    timothy, Nov 30, 2004
    #1
    1. Advertising

  2. timothy

    Philip Ronan Guest

    timothy wrote:

    > I'm trying to create rollovers inside an imagemap. I'm using Gimp 2.0 to
    > create the graphics and maps and Quanta 3.2.1 to edit code. Here's my code
    > as of now:
    >
    > <img src="map.png" width="256" height="256" border="0" usemap="#map">
    > <map name="map">
    >
    > <area shape="circle" name=one coords="128,134,57"
    > onmouseover="document.one.src='/map/image/green.png'"
    > onmouseout="document.one.src='/map/image/red.png'"
    > href="http://www.google.com" /> </map>
    >
    > How can I fix this issue? Thanks to all who reply......


    Unless I'm very much mistaken, what you're trying to do is impossible.

    Break your clickable parts into separate images (using CSS to place them in
    the appropriate positions), and script them as ordinary roll-over images.

    --
    phil [dot] ronan @ virgin [dot] net
    http://vzone.virgin.net/phil.ronan/
    Philip Ronan, Nov 30, 2004
    #2
    1. Advertising

  3. timothy

    timothy Guest

    On Tue, 30 Nov 2004 18:02:03 +0000, Philip Ronan wrote:

    > timothy wrote:
    >
    >> I'm trying to create rollovers inside an imagemap. I'm using Gimp 2.0 to
    >> create the graphics and maps and Quanta 3.2.1 to edit code. Here's my
    >> code as of now:
    >>
    >> <img src="map.png" width="256" height="256" border="0" usemap="#map">
    >> <map name="map">
    >>
    >> <area shape="circle" name=one coords="128,134,57"
    >> onmouseover="document.one.src='/map/image/green.png'"
    >> onmouseout="document.one.src='/map/image/red.png'"
    >> href="http://www.google.com" /> </map>
    >>
    >> How can I fix this issue? Thanks to all who reply......

    >
    > Unless I'm very much mistaken, what you're trying to do is impossible.
    >
    > Break your clickable parts into separate images (using CSS to place them
    > in the appropriate positions), and script them as ordinary roll-over
    > images.


    The gimp plug-in that creates maps for me has javascript events
    intergrated into the plug in. I was assuming that it was possibe. This
    person has a tutorial on dis-jointed rollovers and imagemaps,:
    http://www.daxassist.com/js/disjointedimagemap.cfm
    but as you can tell, I wish to have in with in the map it's self. I've
    seen some general information on google that suggests that it's possible,
    unsure if it's efficient, but possible.
    timothy, Nov 30, 2004
    #3
  4. timothy

    Guest

    timothy wrote:

    > I'm trying to create rollovers inside an imagemap. I'm using Gimp 2.0 to
    > create the graphics and maps and Quanta 3.2.1 to edit code. Here's my code
    > as of now:
    >
    > <img src="map.png" width="256" height="256" border="0" usemap="#map">
    > <map name="map">
    >
    > <area shape="circle" name=one coords="128,134,57"
    > onmouseover="document.one.src='/map/image/green.png'"
    > onmouseout="document.one.src='/map/image/red.png'"
    > href="http://www.google.com" /> </map>
    >
    > How can I fix this issue? Thanks to all who reply......


    Image maps have some accessibility problems; methods have been
    invented to get around using them. This involves using actual text
    in transparent divs that overlay an image. CSS hover qualities
    can be set for the text in the divs, and for the background of the divs
    too, if you wish. There was an article at alistapart a while back --
    http://www.alistapart.com/articles/imagemap/
    ....which IMO is a great improvement over old style image maps.
    --
    mbstevens
    http://www.mbstevens.com
    , Nov 30, 2004
    #4
  5. On Tue, 30 Nov 2004 10:30:48 -0800, timothy wrote:

    > The gimp plug-in that creates maps for me has javascript events
    > intergrated into the plug in. I was assuming that it was possibe. This
    > person has a tutorial on dis-jointed rollovers and imagemaps,:
    > http://www.daxassist.com/js/disjointedimagemap.cfm
    > but as you can tell, I wish to have in with in the map it's self. I've
    > seen some general information on google that suggests that it's possible,
    > unsure if it's efficient, but possible.


    You can probably do rollovers within an image map but the rollover will
    have to replace the entire image map image. Which makes it much less good
    than indivijulary rollover images.

    --
    Jeffrey D. Silverman |
    Website | http://www.newtnotes.com

    Drop "PANTS" to reply by email
    Jeffrey Silverman, Nov 30, 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. David

    imagemaps

    David, Oct 18, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    681
    S. Justin Gengo
    Oct 18, 2005
  2. Paul F. Johnson

    imagemaps and css

    Paul F. Johnson, Nov 14, 2003, in forum: HTML
    Replies:
    5
    Views:
    510
    Sid Ismail
    Nov 14, 2003
  3. brucie

    images vs imagemaps

    brucie, Jan 21, 2004, in forum: HTML
    Replies:
    11
    Views:
    625
    brucie
    Jan 22, 2004
  4. Nathan Sokalski

    White strip showing up between two imagemaps

    Nathan Sokalski, Sep 22, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    371
    Nathan Sokalski
    Sep 23, 2006
  5. Yrrah
    Replies:
    5
    Views:
    334
Loading...

Share This Page