=
3.215.182.81

Daschmi's Notizblog

Logo des Etikators - Tool um online drucken von Etiketten für selbst angefertigte Tinkturen

AreaCanvas

Mit dem jQuery Plugin "AreaCanvas" ist es möglich ImageMap Bereiche auf einer Grafik zu markieren. Die Markierung erfolgt dabei über das HTML5 Element "canvas" und es werden Polygone, Kreise und Rechtecke der Imagemap unterstütz.

Beispiel der Nutzung:


	

<img id="img_areacanvas_example" src="gfx/areacanvas_imagemap.png" width="300" height="300" border="0" alt="" usemap="#map_img_areacanvas_example" />
<map name="map_img_areacanvas_example">
	<area shape="rect" alt="" coords="179,172,287,278" href="1" />	
	<area shape="circle" alt="" coords="88,129,75" href="2" />
	<area shape="poly" alt="" coords="157,15,277,15,277,141,214,141,214,60,157,60" href="3" />
</map>
		
jQuery(document).ready(function() {

	var areacanvas_example = jQuery('#img_areacanvas_example').areacanvas( {
		'mark_multiple': true,
		'trans_gif': '<?php echo get_template_directory_uri(); ?>/gfx/trans.gif',
		'hover_color': 'rgba(29, 134, 200, 0.5)',
		'mark_color': 'rgba(29, 134, 200, 1)',			
	} );
			
} );
		

Anwendungsbeispiele: