2

Estou fazendo um site e tem uma imagem nele que ativa uma função Javascript através de onmouseover usando uma function. Um destes métodos que usei no Javascript adiciona uma nova tag numa span com um id "X" na qual esta imagem está, só que o método em vez de criar somente uma única vez a tag, cria a tag toda vez que o mouse passa em cima da imagem.

Eu preciso que este método crie somente uma vez a tag quando o mouse passar em cima da imagem.

Abaixo o html da imagem:

<span id="ex1" >
<img width="794px" height="593px" src="images/crateria.png" style="margin:0;" onmouseover="javascript:mostra();" alt="Crateria" />
</span>

Abaixo o Javascript que eu usei para adiciona a tag, no caso a tag <map>:

function mostra(){
   var para = document.createElement("map");
   para.setAttribute("name", "crateria-map");
   document.getElementById("ex1").appendChild(para);
}
1
  • 1
    Não vai adiantar muito você editar a pergunta e incluir mais dúvidas (ainda mais depois de já ter marcado como solucionada), você vai acabar tornando-a ampla demais. Se o primeiro problema foi resolvido, crie uma nova pergunta para tratar o segundo. Commented 23/03/2015 às 5:27

3 Respostas 3

3

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>

3

Você pode verificar se o <span> já contém um <map> no fim, e só criar e inserir o mapa se ele ainda não estiver lá:

function mostra(){
    var span = document.getElementById("ex1");
    // verifica se o último filho do span é um map
    var contemMapa = span.lastChild.nodeName === 'MAP';
    if(!contemMapa) {
        var para = document.createElement("map");
        para.setAttribute("name", "crateria-map");
        document.getElementById("ex1").appendChild(para);
    }
}

http://jsfiddle.net/Lckj9y9x/

2
  • boa noite bfavaretto, eu modifiquei o codigo e não funcionou, eu estou usando id para adicionar a tag dentro da span como vc deve ter notado, pois na verdade eu vou fazer este metodo para outras imagens diferentes. Como eu disse, toda vez que eu passo o mouse na imagem, a tag <map name="#crateria-map"></map> é criada, uma em baixo da outra... Commented 23/03/2015 às 3:26
  • 1
    Veja o link na minha resposta, funciona no cenário que você descreveu. Deve ter mais algum problema no seu código, numa parte que não está na pergunta. De qualquer modo, se vai aplicar isso em muitas imagens, melhor usar a solução do mgibsonbr, só com CSS, bem mais leve.
    – bfavaretto
    Commented 23/03/2015 às 3:34
1

Você poderia tentar colocar um contador, verificando se a função já foi executada uma vez e assim não executar mais. Exemplo abaixo:

tag = 0;

function mostra(){
     if (tag != 1)
   {
   var para = document.createElement("map");
   para.setAttribute("name", "crateria-map");
   document.getElementById("ex1").appendChild(para);
   tag = 1;
   }

}
4
  • mgibsonbr, sua solução de usar " mostra = function() { /* Não faz nada */ }" funcionou, mas vou ver se esta outra solução com o contador também funciona Commented 23/03/2015 às 3:39
  • 1
    @MarceloLinsdeCarvalho Edite sua pergunta para complementar as informações (tem um link pra isso logo abaixo do texto da pergunta). Se colocar essas informações for mudar totalmente a pergunta (e invalidar as respostas que você já recebeu), poste uma nova pergunta separada.
    – bfavaretto
    Commented 23/03/2015 às 3:45
  • @MarceloLinsdeCarvalho Concordo com o bfavaretto, é importante colocar o máximo de contexto na pergunta, para evitar receber respostas que não te ajudem e ainda desperdicem os esforços de quem tentou responder. De todo modo, veja a edição que eu fiz na minha resposta (último trecho de código), ela serve para múltiplas imagens e deve funcionar para o seu caso particular.
    – mgibsonbr
    Commented 23/03/2015 às 3:51
  • Desculpem a todos, eu agradeço pelo ajuda, até o momento eu conseguir resolver meu problema e mais uma vez peço desculpas pela falta de informação e agradeço pela atenção de todos! obrigado Commented 23/03/2015 às 4:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .