Help (please): Rollover Image AND Hotspot

Discussion in 'HTML' started by Martin Weil, Dec 14, 2006.

  1. Martin Weil

    Martin Weil Guest

    Hi,

    my main page consist of seven images (rollover images). Each images
    changes to another picture if you move the mouse over an redirects to
    another site (onMouseOut, onMouseOver, etc.)

    But now I have to extend this:

    One of the pictures should contain several different links. I tried this
    by adding a Hotspot (area shape="rect" coords=... etc.).
    Unfortunately my rollover picture is gone, as soon as I enter one of the
    Hotspots.

    Is there any way I can manage to get a rollover image with several links
    in it?

    Thanks for your advice
    Martin
    Martin Weil, Dec 14, 2006
    #1
    1. Advertising

  2. Martin Weil wrote:
    > Hi,
    >
    > my main page consist of seven images (rollover images). Each images
    > changes to another picture if you move the mouse over an redirects to
    > another site (onMouseOut, onMouseOver, etc.)
    >
    > But now I have to extend this:
    >
    > One of the pictures should contain several different links. I tried this
    > by adding a Hotspot (area shape="rect" coords=... etc.).
    > Unfortunately my rollover picture is gone, as soon as I enter one of the
    > Hotspots.
    >
    > Is there any way I can manage to get a rollover image with several links
    > in it?
    >


    Martin, Martin, Martin. Look at you computer monitor. See you code?

    That's right, it right there in front of you. Now think about it for a
    moment, eh. Guess what we see? That is also right...nothing, because you
    haven't supplied us a link to what you have written. How on earth would
    you expect us to help you without your page source?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 14, 2006
    #2
    1. Advertising

  3. Martin Weil

    Martin Weil Guest

    Martin Weil, Dec 14, 2006
    #3
  4. Martin Weil

    jim Guest

    Hi Martin,
    Code is pasted down below; you have to get creative with this one.
    First, you need 3 images: your viewed image, your mouseover image,
    and your image for mapping. The image for mapping is a transparent gif
    which
    is the same size/dimensions as the images you use for your mouseover
    image-swap.

    second: create a div box which is the same dimensions as your swapping
    images.
    using css, set the background-image of that box to your viewable image.

    (hope this is making sense...)
    Next, create a mouseover/mouseout script which changes the background
    images of your div box.

    lastly, put your mapped transparent image inside the div box.
    In the code below, i just created (3) 200x200 gifs: one red, one green,
    and one transparent.
    you can probably substitute your image names and locations in the code
    to test it out, then create your own image map with links.

    BTW, I created the image map in fireworks; does a great job at stuff
    like that!!!

    Hope that helps,

    Jim
    PS: I tested in f-fox prior to posting and it failed... UUGH!
    But, it works great in explorer!

    -----------C O D E S A M P L E----------------------
    <html>
    <head>
    <title>Untitled-1</title>
    <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body bgcolor="#ffffff">
    <div id="dvv"
    onmouseover = "this.style.backgroundImage='url(green.gif)'"
    onmouseout = "this.style.backgroundImage='url(red.gif)'"
    style="position:absolute; left:20px; top:20px; z-index:0; width:200px;
    height:200px; background-image:url(red.gif);">
    <img name="mapper" src="transparent.gif" width="200" height="200"
    border="0"
    usemap="#m_Untitled-1" />
    </div>
    <map name="m_Untitled-1">
    <area shape="circle" coords="135,136, 50" href="http://www.espn.com"
    target="_blank"
    title="espn" alt="espn" >

    <area shape="poly" coords="139,11,91,61,194,61,139,11"
    href="http://www.abcnews.com"
    target="_blank" title="abc news" alt="abc news" >

    <area shape="rect" coords="2,60,81,200" href="http://www.yahoo.com"
    target="_blank"
    title="yahoo" alt="yahoo" >

    <area shape="rect" coords="2,1,83,61" href="http://www.google.com"
    target="_blank"
    title="go google" alt="go google" >

    </map>
    </body>
    </html>
    jim, Dec 15, 2006
    #4
  5. Martin Weil

    Martin Weil Guest

    jim schrieb:
    > Hi Martin,
    > Code is pasted down below; you have to get creative with this one.
    > First, you need 3 images: your viewed image, your mouseover image,
    > and your image for mapping. The image for mapping is a transparent gif
    > which
    > is the same size/dimensions as the images you use for your mouseover
    > image-swap.
    >
    > second: create a div box which is the same dimensions as your swapping
    > images.
    > using css, set the background-image of that box to your viewable image.
    >
    > (hope this is making sense...)
    > Next, create a mouseover/mouseout script which changes the background
    > images of your div box.
    >
    > lastly, put your mapped transparent image inside the div box.
    > In the code below, i just created (3) 200x200 gifs: one red, one green,
    > and one transparent.
    > you can probably substitute your image names and locations in the code
    > to test it out, then create your own image map with links.
    >
    > BTW, I created the image map in fireworks; does a great job at stuff
    > like that!!!
    >
    > Hope that helps,
    >
    > Jim
    > PS: I tested in f-fox prior to posting and it failed... UUGH!
    > But, it works great in explorer!
    >
    > -----------C O D E S A M P L E----------------------
    > <html>
    > <head>
    > <title>Untitled-1</title>
    > <meta http-equiv="Content-Type" content="text/html;">
    > </head>
    > <body bgcolor="#ffffff">
    > <div id="dvv"
    > onmouseover = "this.style.backgroundImage='url(green.gif)'"
    > onmouseout = "this.style.backgroundImage='url(red.gif)'"
    > style="position:absolute; left:20px; top:20px; z-index:0; width:200px;
    > height:200px; background-image:url(red.gif);">
    > <img name="mapper" src="transparent.gif" width="200" height="200"
    > border="0"
    > usemap="#m_Untitled-1" />
    > </div>
    > <map name="m_Untitled-1">
    > <area shape="circle" coords="135,136, 50" href="http://www.espn.com"
    > target="_blank"
    > title="espn" alt="espn" >
    >
    > <area shape="poly" coords="139,11,91,61,194,61,139,11"
    > href="http://www.abcnews.com"
    > target="_blank" title="abc news" alt="abc news" >
    >
    > <area shape="rect" coords="2,60,81,200" href="http://www.yahoo.com"
    > target="_blank"
    > title="yahoo" alt="yahoo" >
    >
    > <area shape="rect" coords="2,1,83,61" href="http://www.google.com"
    > target="_blank"
    > title="go google" alt="go google" >
    >
    > </map>
    > </body>
    > </html>
    >


    Thanks for that, I will get right on it and keep you postet...
    Martin Weil, Dec 16, 2006
    #5
  6. Martin Weil

    Martin Weil Guest

    Thanks very much

    It works for me, too. Unfortunately only with IE, but most people still
    using M$, so this won't be such a big problem.

    Thanks for the code...

    Martin
    Martin Weil, Dec 17, 2006
    #6
  7. Martin Weil

    Arne Guest

    Re: Thanks very much

    Once upon a time *Martin Weil* wrote:
    > It works for me, too. Unfortunately only with IE, but most people still
    > using M$, so this won't be such a big problem.
    >
    > Thanks for the code...


    ???????????????????????????????

    What (and who) are you talking about???????????

    Don't look like you are replying to any post at all, still writing like
    you are, but not quote it?

    * How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
    * From Google: http://www.safalra.com/special/googlegroupsreply/

    --
    /Arne

    Proud User of SeaMonkey. Get your free copy:
    http://www.mozilla.org/projects/seamonkey/
    Arne, Dec 17, 2006
    #7
  8. Re: Thanks very much

    Arne wrote:
    > Once upon a time *Martin Weil* wrote:
    >> It works for me, too. Unfortunately only with IE, but most people still
    >> using M$, so this won't be such a big problem.
    >>
    >> Thanks for the code...

    >
    > ???????????????????????????????
    >
    > What (and who) are you talking about???????????
    >
    > Don't look like you are replying to any post at all, still writing like
    > you are, but not quote it?
    >
    > * How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
    > * From Google: http://www.safalra.com/special/googlegroupsreply/
    >


    Not sure what will or won't work as well...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 17, 2006
    #8
  9. Martin Weil

    dorayme Guest

    Re: Thanks very much

    In article <em3mce$9ng$01$-online.com>,
    Martin Weil <> wrote:

    > It works for me, too. Unfortunately only with IE, but most people still
    > using M$, so this won't be such a big problem.
    >
    > Thanks for the code...
    >
    > Martin


    It is my pleasure, Martin. I am actually selling it now by the
    foolscap page at 10pt. If you want any more, just shout again.

    --
    dorayme
    dorayme, Dec 17, 2006
    #9
    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. VB Programmer

    How create image hotspot?

    VB Programmer, Sep 27, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    10,567
    David Wier
    Sep 27, 2004
  2. WiZZ
    Replies:
    6
    Views:
    7,625
  3. Mark Szlazak
    Replies:
    3
    Views:
    165
    Fletch
    Apr 25, 2006
  4. Replies:
    2
    Views:
    129
  5. Dan
    Replies:
    3
    Views:
    122
Loading...

Share This Page