JQuery Imagemap mit Maphilighter: Unterschied zwischen den Versionen
Aus Wikizone
Kholja (Diskussion | Beiträge) |
|||
| Zeile 5: | Zeile 5: | ||
Mit dem Maphilight Plugin für jQuery kann man schöne Imagemaps basteln. | 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. | + | 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. | 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. | ||
Aktuelle Version vom 2. August 2012, 10:16 Uhr
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>
