Definir somente uma parte da imagem como link

[paulo.policani 0]

Boa tarde pessoal,

Sem precisar utilizar de tabelas, é possível que em uma única imagem por exemplo um jpg de um carro, eu consiga colocar para que seja somente link se o usuário clicar na roda do carro?

Se isso for possível e tiverem exemplos, agradeço.

[xanburzum 169]

vc pode fazer isso facilmente usando o Dreamweaver, através de mapeamento de link (hotspot tool com círculo, retângulo ou polígono).

 

Olha este exemplo, através do code.

 

 

<img src="../Pictures/IMG_20012014_090648.fw.png" alt="" width="960" height="540" usemap="#Map"/>
<map name="Map">
  <area shape="rect" coords="201,147,240,194" href="#">
</map>

outro exemplo:

 

 

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

[Gustavo Emygdio Barboza 24]

No frontpage 2000 tem esse recurso também só da uma futucada...

[xanburzum 169]

A tag <map> HTML é usado para declarar um mapa de imagem .

A tag <map> é usada em conjunto com a tag de marcação <area> e <img> para especificar áreas clicáveis ( por vezes referido como "hot spots" ) sobre uma imagem .

Para criar um mapa de imagem , você usa a tag <map> para declarar o mapa de imagem , e a tag <area> ( aninhada dentro da tag <map> ) para definir as áreas clicáveis ​​. A tag <img> pode ser definido em outro lugar na página, e está ligada ao elemento <map> usando o atributo ID .

exemplo

<img src ="/pix/mueller_hut/mueller_hut_t.jpg" width="225" height="151" border="0" alt="Mueller Hut, Monte Cook, e I" usemap ="#muellermap" /> < mapa id = " muellermap " name = " muellermap "> forma <area ="rect" coords ="90,80,120,151" ="javascript:alert('Me');" alt="Me" /> < forma href = área "poly " coords = " 55,55,120,80,90,80,90,100,70,100,20,80,55,55 " href = " http://en.wikipedia.org/wiki/Mount_Cook " target = "_blank" alt = " Mount Cook " /> < forma area = "poly " coords = " 145,80,145,100,215,90,215,80,180,60,145,80 " href = " http://www.natural-environment.com/places/mueller_hut.php "target = " _blank " alt =" Mueller Hut "/> < / map>

Atributos

Tags HTML pode conter um ou mais atributos . Os atributos são adicionados a uma tag para fornecer o navegador com mais informações sobre como a marca deve aparecer ou se comportar. Atributos consistem de um nome e um valor separados por um igual ( =) sinal, com o valor entre aspas duplas . Aqui está um exemplo , style = " color: black; " .

Existem 3 tipos de atributos que você pode adicionar a seus tags HTML :

 

Element-specific, global, e de conteúdo manipulador de eventos.

Os atributos que você pode adicionar a essa marca estão listados abaixo.
Atributos - Element-specific

A tabela a seguir mostra os atributos que são específicos para esta tag / elemento.

 

name - Atribui um nome para o mapa de imagem.

 

Global Attributes

Os seguintes atributos são padrão em todas as HTML 5 tags.

• accesskey
• class
• contenteditable
• contextmenu
• dir
• draggable
• dropzone
• hidden
• id
• inert
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• spellcheck
• style
• tabindex
• title
• translate

Event Handler Content Attributes

Atributos de conteúdo manipulador de eventos que você possa invocar um script de dentro do seu HTML. O script é invocado quando um determinado "evento" ocorre. Cada conteúdo manipulador de eventos atribuem lida com um evento diferente.

• onabort
• oncancel
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• onseeked
• onseeking
• onselect
• onshow
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

[Gustavo Emygdio Barboza 24]

no frontpage quando se clica na imagem aparece uma barra de ferramenta no canto inferior da tela onde se tem um quadrado, circulo e um poligono são os icones onde você define os hiperlinks ...

 

att;

[xanburzum 169]

O dreamweaver é bem melhor e tem mais recursos.

 

 

[paulo.policani 0]

Consegui galera,

Fiz imagens diferentes mesmo deixando uma inteira somente como link.

Obrigado a todos.

[Gustavo Emygdio Barboza 24]

É claro que o dreamweaver é melhor longe de falar ao contrário mas o front page por ser mais simples que indiquei pois a duvida do era somente marcar parte da imagem só. vc explica tanto até o não foi perguntado que a pessoa se perde nas informações... eu tento ser objetivo possível... no final o amigo fez uma gambi que resolveu o problema...

[xanburzum 169]

ok, paulo.policani