Destaque em imagem mapeada e zoom

[tatimartini 0]

Olá pessoal, tenho uma imagem (um caminhão), ao clique na peça do caminhão, preciso que dê destaque e que abra uma modal com zoom...

 

Mais ou menos como no exemplo> http://ponto.me/tmp/mapa_Brasil_CSS/map.html#am

 

Mas a diferença é que a imagem do caminhão é inteira. É possível fazer em javascript? Por onde começar?

 

Terei várias imagens em cadeia, quando abrir o motor do caminhão, clica e abre outra peça do motor e por ai vai...

 

Qual a solução que me sugerem? Obrigada desde já!

[Snowden 94]

com a tag <map>, use o Dreamweaver para mapear as áreas que deseja linkar

<p>Click em um planeta</p>
<img src="http://www.w3schools.com/tags/planets.gif" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="//imasters.com.br">
<area shape="circle" coords="90,58,3" alt="Mercury" href="//terra.com.br">
<area shape="circle" coords="124,58,8" alt="Venus" href="//bing.com.br">
</map>

usando um fancybox como exemplo de modal

$('map[name="planetmap"]>area').on('click', function(event){
    var area = $(this).attr('href');
    $.fancybox.open({type:'iframe', href: area});
    return false;
});