Animation image map

@cssxpertsJan 30.2014 — #No dear, it's not possible.

@jedaisoulFeb 20.2014 — #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...

@aelynneauthorFeb 21.2014 — #okay. if i would like to do hover with text appear, using image map, is it also possible?

@jedaisoulFeb 21.2014 — #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).

@jedaisoulFeb 23.2014 — #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:

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="iso-8859-1"&gt;
 &lt;title&gt;Hover Test&lt;/title&gt;
 &lt;style&gt;
 * {
 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;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="map"&gt;
 &lt;div id="point1"&gt;
 &lt;a href="#" title="home"&gt;&lt;img src="graphics/blank_25x50.gif" alt=""&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

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!

[canned-message]attachments-removed-during-migration[/canned-message]

Animation image map

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Animation image map

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴