Create element only in the first mouseover

Question

I’m making a website and has an image on it that activates a Javascript function through onmouseover using a function. One of these methods I used in Javascript adds a new tag to a span with an "X" id this image is in, only the method instead of creating only once the tag creates the tag every time the mouse hovers over the image.

I need this method to create only once the tag when the mouse passes over the image.

Below the html of the image:

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

Below the Javascript I used to add the tag, in case the tag <map>:

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

Answer 1

You can check if the <span> already contains a <map> at the end, and only create and insert the map if it is not already there:

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/}

Answer 2

I suggest not creating it in the onmouseover, but already have it in HTML - only hidden. So, you can display it/hide it simply with CSS, without needing 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>

If, on the other hand, you want the tag stay there after the first mouse pass, one way to do this (not necessarily the best) is to reset the function used in the onmouseover after it is used for the first time:

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>

Finally, if there are N images and not just one, a variation of bfavaretto response should solve your problem: check not a specific element (by id), but the parent of the image receiving the Hover (using event.target to obtain the image, parentElement to obtain the span mother and lastChild to get the last child element). Example:

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>

Answer 3

You could try placing a counter by checking if the function has already been executed once and so no longer perform. Example below:

tag = 0;

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

}