JQuery Imagemap mit Maphilighter
Aus Wikizone
Version vom 2. August 2012, 10:16 Uhr von 149.172.152.49 (Diskussion)
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. Auch mit alten Versionen von Photoshop geht es oder mit Gimp.
Siehe auch: Illustrator - Imagemap erzeugen
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>
