JQuery Imagemap mit Maphilighter - Versionsgeschichte

149.172.152.49 am 2. August 2012 um 09:16 Uhr

2012-08-02T09:16:34Z

Kholja am 29. März 2012 um 08:47 Uhr

2012-03-29T08:47:32Z

Kholja am 29. März 2012 um 08:43 Uhr

2012-03-29T08:43:35Z

Kholja: Die Seite wurde neu angelegt: „[Media:Maphilight-sample01.zip]“

2012-03-29T08:43:06Z

Die Seite wurde neu angelegt: „[Media:Maphilight-sample01.zip]“

Neue Seite

[Media:Maphilight-sample01.zip]

@@ Zeile 5: / Zeile 5: @@
 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.
 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.

← Nächstältere Version		Version vom 29. März 2012, 08:47 Uhr
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>

← Nächstältere Version		Version vom 29. März 2012, 08:43 Uhr
Zeile 1:		Zeile 1:
−	[Media:Maphilight-sample01.zip]	+	[[Media:Maphilight-sample01.zip]]