HTML Imagemaps regular VS CSS Based
I found that CSS Based HTML Imagemaps allow you get do neat things like set the style of the hot spots based on: hover, click, visited, etc. But you are limited to use squares & rectangles.
However I do not believe that you can do this in the standard html image maps. But the benefit of standard html image maps are that you can polygons, circles.
Is that limitation true?
Sample CSS Based Image Map Code
<div class="imgmap_css_container" id="SeatingChartMap"><a style="position: absolute; `top: 396px; left: 565px; width: 20px; height: 43px;" alt="A: 1: 1" title="A: 1: 1" href="11" target="" ><em>A: 1: 1</em></a><a style="position: absolute; top: 395px; left: 541px; width: 19px; height: 45px;" alt="A: 1: 2" title="A: 1: 2" href="12" target="" ><em>A: 1: 2</em></a><a style="position: absolute; top: 392px; left: 516px; width: 21px; height: 47px;" alt="A: 1: 3" title="A: 1: 3" href="13" target="" ><em>A: 1: 3</em></a><a style="position: absolute; top: 392px; left: 492px; width: 22px; height: 47px;" alt="A: 1: 4" title="A: 1: 4" href="14" target="" ><em>A: 1: 4</em></a><a style="position: absolute; top: 390px; left: 469px; width: 20px; height: 48px;" alt="A: 1: 5" title="A: 1: 5" href="15" target="" ><em>A: 1: 5</em></a><a style="position: absolute; top: 387px; left: 442px; width: 24px; height: 48px;" alt="A: 1: 6" title="A: 1: 6" href="16" target="" ><em>A: 1: 6</em></a></div>`
Sample Standard HTML Image Map Code
<img src="rexall_place-seating-chart1561-791.gif" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
<area shape="poly" coords="346,93,339,155,355,158,375,92,347,92" href="2" alt="" title="">
<area shape="rect" coords="305,95,332,152" href="1" alt="" title="">
<area shape="rect" coords="201,92,234,153" href="433" alt="" title="">
<area shape="rect" coords="237,92,266,154" href="4343" alt="" title="">
<area shape="rect" coords="272,91,300,154" href="32" alt="" title="">
<area shape="rect" coords="186,317,226,373" href="221" alt="" title="">
<area shape="rect" coords="183,443,212,477" href="11" alt="" title="">
<area shape="circle" coords="107,271,42" href="32" alt="" title="">
<area shape="poly" coords="361,230,367,241,424,239,410,202,360,229" href="2" alt="" title="">
<area shape="poly" coords="30,176,21,209,18,248,20,282,64,280,62,253,72,228,83,199开发者_如何学Go,31,172" href="2" alt="" title="">
</map>
An alternative to maphilight is Image Mapster: http://www.outsharked.com/imagemapster/ I'm the author of this plugin, in full disclosure. It adds a substantial number of capabilities compared to maphilight (on which it was initially based).
I do not believe that you could do non-square link hotspots using CSS, however, you could watch where someone clicks on the image using Javascript and have something fire or go to a url based on where the click was registered. Or maybe using HTML5 canvas you could register some odd shaped hotspots?
I confirmed: CSS Based Image Maps
They do not support ovals, circles, polygons
Standard Image Maps:
They do support rectangles, ovals, circles, polygons
If you choose Standard Image Maps you can use this jquery plug-in to have control over hover and fill colors and borders, etc. http://davidlynch.org/js/maphilight/docs/#defaults
You can make circles, ovals, and a few irregular polygons by abusing the border-radius property. Here's a circle:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Document</title>
<style type="text/css">
#link {
width: 100px;
height: 100px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
border-radius: 50px 50px 50px 50px;
background: blue;
display: block;
text-indent: -999em;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Test Document</h1>
<a href="http://google.com/" id="link">Google</a>
</body>
</html>
This is not what border-radius is intended for, but it works in most modern browsers (but not in older IEs, like IE 8 and lower).
For more info, see: http://www.css3.info/preview/rounded-border/
加载中,请稍侯......
精彩评论