Tag'n click

Os web-designers estão cada vez mais criativos e exigentes com relação ao HTML. E depois da onda dos sites em flash (que passou! #obrigadoSteve) algumas características de interatividade das páginas passaram a dificultar a vida dos HTML’ers. Uma delas é o evento mouseover, que no flash era definido sobre objetos gráficos e permitia uma maior precisão e complexidade do que as tags.

É provável que o canvas do HTML5 resolva isso. Mas, enquanto ainda vivemos num mundo onde o IE é usado (comassim?!), precisamos de uma solução mais old school.

Utilizando uma imagem simples e o plugin jQuery imageMap é possível mapear polígonos por meio de pontos e capturar o evento de mouseover sobre eles! Para tratar esses eventos, você mesmo deve fornecer uma função.

<img src="sample.jpg" id="image" />
<br />
<p id="result"></p>

jQuery(document).ready(function(){
	jQuery('#image').imageMap({
		points:[
			[
				{x: 20, y: 142},
				{x: 83, y: 40},
				{x: 150, y: 142}
			],
			[
				{x: 157, y: 142},
				{x: 287, y: 142},
				{x:222, y: 41}
			],
			[
				{x: 290, y: 142},
				{x: 428, y: 142},
				{x:363, y: 41}
			]
		],
		names:[
			'primeiro',
			'segundo',
			'terceiro'
		],
		callback: function(ret){
			//console.warn(ret);
			jQuery('#result').html(ret);
		}
	});
});

Nesse exemplo usamos 3 triângulos, mas os polígonos podem ter mais pontos. Lembrando que o eixo Y no HTML é invertido!

A captura é feita somente quando o mouse se movimenta sobre a imagem e o retorno é passado como parâmetro na função de “callback”. Se ele estiver fora de todos os polígonos, o retorno é sempre -1. Se o cursor estiver sob algum polígono, o resultado pode ser uma string, caso o parâmetro “names” tenha sido passado, ou o número referente ao polígono, começando de 0(zero).

Demo

O plugin está na versão beta, aguardando mais testes. Contribuam! =]

Em breve colocarei mais exemplos aqui. Até!

Plugin jQuery imageMap