[Resolvido] Colocar informações dentro da área do mapa

[Marcos Barbosa 1]

Pessoal, tenho uma imagem e dentro dela tenho alguns itens de menus, trouxe ela direto para o Dreamweaver e utilizei a ferramenta mapa para distribuir os itens de menus.

Mas preciso colocar um input logo abaixo de uma das coordenadas desse mapa, não estou sabendo como fazer, alguem poderia me dar uma dica. A divisão desse mapa está assim

       	<img src="imagens/teste.jpg" border="0" usemap="#Map" />

           <map name="Map" id="Map">
             <area shape="rect" coords="108,408,247,440" href="#" alt="Aventais especiais" />
             <area shape="rect" coords="111,452,293,481" href="#" alt="Bolsas Exclusivas" />
             <area shape="rect" coords="109,490,302,519" href="#" alt="Newslleter" />
              **** bem aki preciso colocar esse INPUT *****  

             <area shape="rect" coords="107,519,313,547" href="#" alt="Input E-mail"  /> 

           </map>

[Ted k' 126]

Vamos lá, o input não pode ser colocado dentro de um map, os maps servem para mapear uma área e colocar links nelas, só para isso, onde irá colocar esse input será no menu em uma div flutuante

[Marcos Barbosa 1]

Mas eu tenho como colocar uma DIV dentro da área do mapa ?

[allex_carvalho 124]

Mas eu tenho como colocar uma DIV dentro da área do mapa ?

 

Não. Você faria uma div fora e flutuaria ela sobre a região do link, algo mais ou menos assim:

 

<img src="imagens/teste.jpg" border="0" usemap="#Map" />

           <map name="Map" id="Map">
             <area shape="rect" coords="108,408,247,440" href="#" alt="Aventais especiais" />
             <area shape="rect" coords="111,452,293,481" href="#" alt="Bolsas Exclusivas" />
             <area shape="rect" coords="109,490,302,519" href="#" alt="Newslleter" />
              **** bem aki preciso colocar esse INPUT *****  

             <area shape="rect" coords="107,519,313,547" href="#" alt="Input E-mail"  /> 

           </map>
<div id="flutuante" style="position:relative; z-index:10; top:-50px; left:0;">
<input ...>
</div><!--flutuante-->

 

Ai você só ajusta o top e o left para colocar o input onde desejar.

[Marcos Barbosa 1]

Vlw, vou tentar aki e posto o resultado.

 

Vlw, ficou muito legal.

 

Não. Você faria uma div fora e flutuaria ela sobre a região do link, algo mais ou menos assim:

 

<img src="imagens/teste.jpg" border="0" usemap="#Map" />

           <map name="Map" id="Map">
             <area shape="rect" coords="108,408,247,440" href="#" alt="Aventais especiais" />
             <area shape="rect" coords="111,452,293,481" href="#" alt="Bolsas Exclusivas" />
             <area shape="rect" coords="109,490,302,519" href="#" alt="Newslleter" />
              **** bem aki preciso colocar esse INPUT *****  

             <area shape="rect" coords="107,519,313,547" href="#" alt="Input E-mail"  /> 

           </map>
<div id="flutuante" style="position:relative; z-index:10; top:-50px; left:0;">
<input ...>
</div><!--flutuante-->

 

Ai você só ajusta o top e o left para colocar o input onde desejar.

[Ted k' 126]

Que bom que tirou suas dúvidas! :natallaugh:

 

Obrigado por ajudar também allex_carvalho