Eu sugiro não criá-la no onmouseover
, mas já tê-la no HTML - só que escondida. Assim, você consegue exibi-la/ocultá-la simplesmente com CSS, sem precisar de JavaScript:
#ex1 map {
display:none;
}
#ex1 img:hover + map {
display:block;
border: 1px solid red; /* Só para ajudar a ver que funciona */
}
<span id="ex1" >
<img width="794px" height="593px" src="images/crateria.png" style="margin:0;" alt="Crateria" />
<map name="crateria-map">
</map>
</span>
Se, por outro lado, você quiser que a tag continue lá depois da primeira passada de mouse, uma maneira de fazer isso (não necessariamente a melhor) é redefinir a função usada no onmouseover
após a mesma ser usada pela primeira vez:
function mostra(){
var para = document.createElement("map");
para.setAttribute("name", "crateria-map");
document.getElementById("ex1").appendChild(para);
mostra = function() { /* Não faz nada */ }
}
#ex1 map {
border: 1px solid red; /* Só para ajudar a ver que funciona */
}
<span id="ex1" >
<img width="794px" height="593px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>
Por fim, se há N imagens e não só uma, uma variação da resposta do bfavaretto deve resolver seu problema: verifique não um elemento específico (pelo id), mas sim o pai da imagem recebendo o hover (usando event.target
para obter a imagem, parentElement
para obter a span
mãe e lastChild
para obter o último elemento filho). Exemplo:
function mostra(){
if ( event.target.parentElement.lastChild.nodeName != "MAP" ) {
var para = document.createElement("map");
para.setAttribute("name", "crateria-map");
event.target.parentElement.appendChild(para);
}
}
map {
border: 1px solid red; /* Só para ajudar a ver que funciona */
}
<span id="ex1" >
<img width="100px" height="100px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>
<span id="ex2" >
<img width="100px" height="100px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>
<span id="ex3" >
<img width="100px" height="100px" src="images/crateria.png" style="margin:0;" alt="Crateria" onmouseover="javascript:mostra();" />
</span>