Image Map Production

Map image (Image Map), which refers to a depending link object is artificially divided into a number of links points to a different region or regions corresponding image "hot spots" (made available on Hotspots), and provided a good click "hot spots" when, will the corresponding page pop-up links.

Requires a picture, set a hot spot area and uses a <map> and <area>, wherein the area <area> tag defines the image map (Note: refers to the image map is an image with clickable region) .

Comment:

• The area element is always nested inside the map element. The area element may be defined area of ​​the image map.
• usemap Properties <img> can be referenced in the <map> id or name of the attribute (depending on the browser), it should be simultaneously added to the id and name attribute <map>.

Property Value

value	description
x1,y1,x2,y2	If the shape attribute is set to "rect", the predetermined value of the upper left corner and the coordinates of the lower right corner of the rectangle.
x,y,radius	If the shape attribute is set to "circ", the predetermined value of the center coordinates and the radius.
x1, y1, x2, y2, .., xn, in	If the shape attribute is set to "poly", the predetermined value of the coordinates of each polygon side. If the first and last coordinate coordinate inconsistent, then in order to close the polygon, the browser must be added the last pair of coordinates.

Simple examples

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

Use Dreamweaver to produce maps

1. Insert the image on the page.

2. Draw the hot zone. Click on the map of China on the page, select the bottom of the "Properties" column of the "hot spot rectangle tool" to draw hot spots on the map, as shown below:

3. When hot spots After drawing a rectangle, or a rectangle draw a good re-select the hot spot area, the image attributes panel becomes hot property panel. In the "Links" box, select the area to be a hot link to the landing page, open a new window in the select "_blank" "target" box, the link to the page, in the "Replace" box, fill in the relevant prompt instructions. As shown below:

 

 

 

 

Js join the Compare function compares the effect of map-hyun

<map id="Map" name="Map">
    <area alt="Yukon" coords="88,95,29,152,34,164,88,206,81,187,78,170,84,150,85,134,89,115,94,107" href="./?p=YT" onclick="typeof s_trackButton == 'function' &amp;&amp; s_trackButton('Change Region');setPC('YT');" onmouseout="visibToggleSplash('mapYT','hide')" onmouseover="visibToggleSplash('mapYT','showBlock')" rel="nofollow" shape="poly" /> 
    <area alt="British Columbia" coords="89,319,41,295,33,300,25,282,13,234,19,224,34,224,43,218,41,180,35,170,98,216,76,264" href="./?p=BC" onclick="typeof s_trackButton == 'function' &amp;&amp; s_trackButton('Change Region');setPC('BC');" onmouseout="visibToggleSplash('mapBC','hide')" onmouseover="visibToggleSplash('mapBC','showBlock')" rel="nofollow" shape="poly" /> 
</map>
<img class="absolute" height="434" id="mapYT" src="images/map_yukon.png" usemap="#Map" width="477" /> 
<img class="absolute" height="434" id="mapBC" src="images/map_britishcolumbia.png" usemap="#Map" width="477" />

js part

function visibToggleSplash(tagId, showHide) {
    switch (showHide){
      case 'showBlock':
        if ( document.getElementById(tagId) )
            document.getElementById(tagId).style.display='block';
        if ( document.getElementById('link'+tagId) )
            document.getElementById('link'+tagId).className='selected';
        break;
    case 'hide':
        if (document.getElementById(tagId))
            document.getElementById(tagId).style.display='none';
        if (document.getElementById('link'+tagId))    
            document.getElementById('link'+tagId).className='';
        break;
    default:
        return false;
    }
}

 

 

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/04/06/3001917.html