JQuery Imagemap mit Maphilighter: Unterschied zwischen den Versionen
Aus Wikizone
Kholja (Diskussion | Beiträge) |
Kholja (Diskussion | Beiträge) |
||
| Zeile 1: | Zeile 1: | ||
| + | Komplettes Beispiel | ||
| + | |||
[[Media:Maphilight-sample01.zip]] | [[Media:Maphilight-sample01.zip]] | ||
| + | |||
| + | 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):''' | ||
| + | |||
| + | |||
| + | <pre> | ||
| + | <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> | ||
| + | </pre> | ||
Version vom 29. März 2012, 09:47 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.
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>
