JQuery Imagemap mit Maphilighter
Aus Wikizone
Version vom 29. März 2012, 09:47 Uhr von Kholja (Diskussion | Beiträge)
Komplettes Beispiel
Mit dem Maphilight Plugin für jQuery kann man schöne Imagemaps basteln.
Zum Erstellen der Imagemap kann man Inkscape oder Adobe Illustrator benutzen. Diese können aus Vektorformen direkt die Polygone oder Rechtecke erzeugen. So kann man auch einfach mal etwas skalieren.
Das Maphilight Plugin erzeugt einen Rollover Effekt mit einer Randfarbe, Füllfarbe, Schatten und Transparenzen. Es kann auch eine Fade in und Fade out Effekt beim Rollover erzeugen.
HTML Code Beispiel (ist im Komplettbeispiel enthalten):
<html>
<head>
<title>Print</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function() {
$.fn.maphilight.defaults = {
fill: true,
fillColor: 'ffffff',
fillOpacity: 0.3,
stroke: true,
strokeColor: 'ffffff',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
$('.map').maphilight();
});
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="map" style="display: block; background: url("images/dpetry-world.png") repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 960px; height: 420px;">
<canvas width="960" height="420" style="width: 960px; height: 420px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none;"></canvas>
<img class="map maphilighted" src="images/dpetry-world.png" width="960" height="420" border="0" alt="" usemap="#dpetry_world_Map">
</div>
<!-- ImageReady Slices (dpetry-karte.ai) -->
<map name="dpetry_world_Map">
<area shape="rect" alt="" coords="619,183,735,239" href="#asia">
<area shape="rect" alt="" coords="432,123,548,179" href="europe">
<area shape="rect" alt="" coords="500,183,616,239" href="#middleeast">
<area shape="rect" alt="" coords="381,183,497,239" href="#northafrica">
<area shape="rect" alt="" coords="296,258,412,314" href="#southamerica">
</map>
<!-- End ImageReady Slices -->
</body>
</html>
