www.webdeveloper.com
Results 1 to 6 of 6

Thread: Animation image map

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    57

    Animation image map

    Hello,

    Is it possible to add animation to image mapping? I have a large image with several point, and i want when I hover over the point it will animated, like buzz effect etc. How to do this? this is my image.fac_img.jpg

    every point in this image, i use image mapping. thank you/

  2. #2
    Join Date
    Jan 2014
    Location
    India
    Posts
    3
    No dear, it's not possible.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,562
    As above,that is not possible, but a similar effect can be achieved with position: absolute and a:hover. I'll try and do a demo if I have time...

  4. #4
    Join Date
    Jul 2013
    Posts
    57
    okay. if i would like to do hover with text appear, using image map, is it also possible?

  5. #5
    Join Date
    Mar 2012
    Posts
    1,562
    I'm not sure what you are asking. Text can appear with an image map, you just cannot have images appear. With hover, you can have text and/or images without an image map. I'll get round to a demo soon (I hope).

  6. #6
    Join Date
    Mar 2012
    Posts
    1,562
    OK, I've finally had time to put together a demo. To simplify the example, I've cut a 250x250px area of your map which has only on (red) marker on it. From that I have cut a 25x50px image of the red marker, which I've converted into an animated gif. Then I've created a blank transparent 25x50px image which acts as a place-holder in the html for the marker.

    There are two separate animation actions set up:

    1. The 'title="home"' in the html anchor causes a tool-tip "home" to appear when you mouse over the hot spot.

    2. The '#point1 a:hover' etc. in the css style causes the animated gif to be displayed when you mouse over the hot spot.

    To set up the demo, you need the 3 graphic files, and the following code:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="iso-8859-1">
    <title>Hover Test</title>
    <style>
    * {
    margin:0;
    padding:0;
    border:0;
    }
    body {
    position: absolute;
    }
    #map {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 250px;
    height: 250px;
    background: url('graphics/fac_img_part.gif') no-repeat;
    z-index:1;
    }
    #point1{
    position: absolute;
    top: 85px;
    left: 115px;
    width: 25px;
    height: 50px;
    z-index:2;
    }
    #point1 a:link,
    #point1 a:visited,
    #point1 a:active {
    position: absolute;
    text-decoration: none;
    color: #FF0;
    }
    #point1 a:hover {
    position: absolute;
    color: #FFF;
    background: url('graphics/point1_ani.gif') no-repeat;
    }
    </style>
    </head>
    <body>
    <div id="map">
    <div id="point1">
    <a href="#" title="home"><img src="graphics/blank_25x50.gif" alt=""></a>
    </div>
    </div>
    </body>
    </html>
    Note:
    1. Cut and paste the code into a file called 'hovertest.html' (or some such).
    2. Download the 3 graphic files and put them in a folder called 'graphics' which is a child to the folder containing the code. (If you put them elsewhere you will need to amend the code accordingly).

    Good luck!
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles