1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How To Make A Rollover Image Map?

Discussion in 'HTML & Website Design' started by bad_bob00, May 14, 2009.

  1. #1
    Hi,

    I've created a simple imagemap (code below) but I would also like to make this imagemap a rollover image. Anyone got any ideas how to do this?
    SEMrush

    Thanks for any help
     
    bad_bob00, May 14, 2009 IP
    SEMrush
  2. seokingdom07

    seokingdom07 Banned

    Messages:
    132
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First: You need to make your overlay image with the text that you want to be hovered. .
    Second: You need to make rollover image.
    Third: Host all of your images either in Photobucket or ImageShack.
    Fourth:Open your overlay image in Miscrosoft Paint. Use the Select Tool to make a rectangle around the text on the image that you want to be hovered. . The first two numbers are your positioning numbers, the second two numbers are your size numbers (The numbers in the image are just an example). You will need both of them when you code your rollovers.
    Fifth:You now need to add CSS to make your overlay image appear. Get the overlay image url that you hosted earlier and replace the URLHERE in the header style codes. You will also need to adjust the NUMBER property to fit the image's size. Leave all other CSS as is to prevent the code from not fuctioning properly.

    .header{
    background:url(URLHERE) top left no-repeat;
    display:block;width:NUMBERpx;height:NUMBERpx;
    position:absolute;left:0px;top:0px;
    z-index:0;
    }

    Sixth:After you have your overlay image up, you now need to create the rollover images. You will need however many rollover images to correspond with your links. Look back at the working preview to understand. Each rollover class will have it's own positioning and background image. Get the rollover image url that you hosted earlier and replace the URLHERE in the rollover style codes. You will also need to adjust the NUMBER property to fit the image's size. Leave all other CSS as is to prevent the code from not fuctioning properly. You also do not need to copy and paste the script that ImageReady gives for image mapping if you are using this tutorial. You will however have to make multiple CSS names for each rollover you create. This involves a lot image hosting and positioning (Just as a warning). If you are an impatient individual, you will more than likely not want to use this tutorial. Read further if you are using this tutorial.
    a.NAMEHERE{
    position:absolute;top:NUMBERpx;left:NUMBERpx;
    display:block;overflow:hidden;
    width:NUMBERpx;height:NUMBERpx;
    background-color:transparent;
    z-index:4;
    visibility:visible;display:inline;
    }
    a.NAMEHERE:hover{
    background:url(URLHERE) top left no-repeat;
    z-index:4;
    visibility:visible;display:inline;
    }

    Seventh:After the CSS is installed, you now need to imput the actual HTML tags. (You can either place this in your I'd Like To Meet or About Me section in your editing page.)


    ^You will need to add and change the CSS rollover HTML tags by how many you create.
    The tutorial is over.
    ^It is mainly just a link with a background image that is placed over the overlay image when you hover over a desired place.
     
    seokingdom07, May 14, 2009 IP
    bad_bob00 likes this.
  3. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #3
    Thanks for the help, but I'm just wondering isn't there another simpler way to do it using the code I already have?

    I was reading about using the onMouseOver command, is it not possible to add this to my code somehow?


    Thanks again, would appreciate any more help.
     
    bad_bob00, May 14, 2009 IP
  4. amuthavalli

    amuthavalli Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    see here, mouseover image.... :)

    dynamicdrive.com/dynamicindex15/index.html
     
    amuthavalli, May 14, 2009 IP
  5. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #5
    Thanks there is rollover stuff there but nothing about rollover imagemaps :(

    Anyone else know how to do it?
     
    bad_bob00, May 14, 2009 IP
  6. free3dart

    free3dart Active Member

    Messages:
    241
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    try web page maker, coffee cup html editors that will generate codes for you.
     
    free3dart, May 14, 2009 IP
  7. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #7
    Something like this? Inline Javascript example here just throws up an alert box. Replace it with whatever JavaScript you need.

    
    <map name="gemmaatkinson" id="gemmaatkinson">
      <area shape="rect" coords="76,479,120,515"  alt="Vote Yes" href="url"
            onmouseover="alert('I will vote YES')" />
      <area shape="rect" coords="229,480,275,516"  alt="Vote No" href="url"
            onmouseover="alert('I will vote NO')" />
    </map>
    <div>
      <img border="0" usemap="#gemmaatkinson" alt="gemma atkinson vote"
           width="300" src="gemma-atkinson.jpg" height="700" />
    </div>
    
    Code (markup):
     
    FilmFiddler, May 14, 2009 IP
    bad_bob00 likes this.
  8. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #8
    Thanks FilmFiddler, thats excellent, but any idea how I display a new image instead of the alert box?


    Thanks again
     
    bad_bob00, May 15, 2009 IP
  9. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #9
    Sorry to bump this up again, but does anyone know how to do the above but instead of showing an alert box it changes the image instead?

    Thanks for any help
     
    bad_bob00, Sep 17, 2009 IP