CSS Image maps-Image map

Css

Original Address: http://frankmanno.com/ideas/css-imagemap-redux/

1. First, what is the image map?

is to mark a place with a URL on a picture, and when the mouse is over, give code like <a href= "url" title= "description words" >links</a>
Effect.

2. View instances

Example 1 Example 2

3. Methods

This is XHTML:

<DL id= "Officemap" >
<DT id= "Monitor" >1. Monitor</dt>
<dd id= "Monitordef" ><a href= "#" ><span>here ' my "Monitor. I wish I had an lcd!</span></a></dd>
</dl>

Analysis of this code is necessary, because he is the structure, the effect must be through a tag: hover, as well as: the definition of hover span, how to achieve the specific effect?

1.) Need a picture, then give #officemap a background picture office.jpg

dl#officemap{
margin:0;
padding:0;
Background:transparent URL (office.jpg) top left no-repeat;
height:262px;
width:350px;
position:relative;
}

Define the internal element relative positioning, otherwise how to position the map?

2.) down is DT DD label

dt{margin:0; padding:0; position:absolute; font-size:85%; display:none; * * Introduction of this URL, do not show * *
dd{margin:0; padding:0; position:absolute; font-size:85%; }/* Definition Absolute Positioning * *

3.) #monitorDef的定义, A:hover effect

dd#monitordef{top:65px; left:114px;} /* Define Location/*
Dd#monitordef a{position:absolute; width:73px; height:69px; text-decoration:none;}
Dd#monitordef a span{display:none;}
Dd#monitordef a:hover{position:absolute background:transparent url (office.jpg) -109px-317px no-repeat;
Top: -10px; Left: -5px; }/* background picture sliding, reference sliding door technique (similar in principle), positioning of span content * *

4. Down is the focus, how is span the main effect achieved?

Dd#monitordef a:hover span{
Display:block;
text-indent:0;
Vertical-align:top;
Color: #000;
Background-color: #F4F4F4;
Font-weight:bold;
Position:absolute;
border:1px solid #BCBCBC;
bottom:100%;
margin:0;
padding:5px;
width:250%;
}/* don't need an explanation here.

5. The original author believes that this model is not ideal (ideal), because the background image may be too cumbersome, the second model is based on the PNG image Transparency principle (Firefox)

CSS improvements are as follows:

Dd#monitordef a{position:absolute; width:73px; height:69px; text-decoration:none;
Background:transparent URL (note.png) repeat;}
Dd#monitordef a:hover{position:absolute background:transparent url (office.jpg) -109px-317px no-repeat;
Top: -10px; Left: -5px; Background:transparent URL (http://www.webjx.com/htmldata/2006-05-14/hover.png) repeat;}

This avoids, make office.jpg so troublesome picture, just give a label plus background picture can distinguish map location, but only Firefox support how line, we
What about the familiar IE?

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' http://www.webjx.com/htmldata/2006-05-14/ Hover.png ', sizingmethod= ' scale ');

The author is using him to achieve, the domestic CSS researchers have translated the technology

And I use: Filter:alpha (opacity=80), then resolved, are CSS filter, this study again, I do not understand!