Dialog bubbles with keyframe

Question

Dialog bubbles with keyframe

Navigation

#1 by (2 votes)

2

I have the following speech bubble or dialogue bubble that will tell me if the figure in which the mouse is located is a box or circle, the point is that the bubble comes out suddenly, as you might encourage it to come out more slowly and smoothed

    $("area").hover(function() {
    $(this).toggleClass('arriba').siblings().toggleClass('abajo')
    })

 function writeText(txt) {
     if(txt == "Esto es un circulo"){
        document.getElementById('bloque1').style.top = 0;  
        document.getElementById('bloque1').style.left =10;
        document.getElementById("bloque1").style.display = "block";
        document.getElementById("bloque1").innerHTML = txt;
        
     }
     else{
        document.getElementById('bloque1').style.top = 0;  
        document.getElementById('bloque1').style.left =250;
        document.getElementById("bloque1").style.display = "block";
        document.getElementById("bloque1").innerHTML = txt; 
     }
    
    
    }
function ondelete(){
    var div = document.getElementById('bloque1');
    if(div !== null){
        while (div.hasChildNodes()){
            div.removeChild(div.lastChild);
            div.style.display = "none";
        }
    }
}

#figuras {
    list-style: none;
  }
  .arriba {
    transform: scale(1.2);
  }
  
  .abajo {
    transform: scale(0.8);
  }
  .externo{
    position:relative;}
    div {
    transition: 2s linear 1s;
}

.interno {
 position:absolute;
 top:0;
 left:0;
 padding: 10px;
 width: 220px;
 background: #6495ED; /* el color de fondo */
 color: #FFF; /* el color del texto */
 font-family: Arial, Sans-serif;
 font-size: 12px;
 padding: 20px 10px 10px 10px;
 text-align: center;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 display: none;
}
.interno:after {
  border: solid 10px transparent;
  border-top-color: #6495ED;  /* igual al color de fondo */
  border-bottom: 0;
  bottom: -20px;  /* igual al borde + el padding-bottom de la definición anterior */
  content: "";
  display: block;
  height: 0;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">
</script>

<map name="mapa" class="figuras">
    <area id="p_area1" class="area1" shape="circle" coords="125,125,50" href="" 
    onmouseover="writeText('Esto es un circulo')" onmouseout="ondelete()">
    <area id="p_area2" class="area2" shape="rectangle" coords="325,75,425,175" href=""
    onmouseover="writeText('Esto es un rectangulo')" onmouseout="ondelete()">
    </map>
    <div id="bloque2" class="externo">
    <img src="http://i.stack.imgur.com/GvHyu.png" usemap="#mapa" >
    <div id="bloque1" class="interno" >
    </div>
    </div>

javascript html5 html css

asked by psy 03.05.2018 в 17:51

source

1 answer

Listview a Textview on android Is it possible to place a background image on a table using the jquery datatable plugin?

score 2 · Accepted Answer

Instead of using the property display you can use opacity , in addition to the fade of the brubuja little by little you will notice that the content of it disappears before and is half ugly, for which you could rewrite the function ondelete as follows:

function ondelete(){
    var div = document.getElementById('bloque1');
    div.style.opacity = 0;
    setTimeout(function(){
      if(div !== null){
        while (div.hasChildNodes()){
            div.removeChild(div.lastChild);   
        }
      }
    }, 500); 
}

For a better understanding here I leave the example working, with the function ondelete applied to the circle where you will notice this "ugly" effect that I describe and with the function ondelete2 in the square where a more achieved effect is achieved.

Greetings!

$("area").hover(function() {
  $(this).toggleClass('arriba').siblings().toggleClass('abajo')
})

function writeText(txt) {
   if(txt == "Esto es un circulo"){
      document.getElementById('bloque1').style.top = 0;  
      document.getElementById('bloque1').style.left =10;
      document.getElementById("bloque1").style.opacity = 1;
      document.getElementById("bloque1").innerHTML = txt;

   }
   else{
      document.getElementById('bloque1').style.top = 0;  
      document.getElementById('bloque1').style.left =250;
      document.getElementById("bloque1").style.opacity = 1;
      document.getElementById("bloque1").innerHTML = txt; 
   }
}

function ondelete(){
    var div = document.getElementById('bloque1');
    if(div !== null){
        while (div.hasChildNodes()){
            div.removeChild(div.lastChild);
            div.style.opacity = 0;
        }
    }
}
function ondelete2(){
    var div = document.getElementById('bloque1');
    div.style.opacity = 0;
    setTimeout(function(){
      if(div !== null){
        while (div.hasChildNodes()){
            div.removeChild(div.lastChild);   
        }
      }
    }, 500);
}

#figuras {
  list-style: none;
}
.arriba {
  transform: scale(1.2);
}

.abajo {
  transform: scale(0.8);
}
.externo{
  position:relative;
}

.interno {
 position:absolute;
 top:0;
 left:0;
 padding: 10px;
 width: 220px;
 background: #6495ED; /* el color de fondo */
 color: #FFF; /* el color del texto */
 font-family: Arial, Sans-serif;
 font-size: 12px;
 padding: 20px 10px 10px 10px;
 text-align: center;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 opacity: 0;
 transition: 0.5s;
}
.interno:after {
  border: solid 10px transparent;
  border-top-color: #6495ED;  /* igual al color de fondo */
  border-bottom: 0;
  bottom: -20px;  /* igual al borde + el padding-bottom de la definición anterior */
  content: "";
  display: block;
  height: 0;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">
</script>

<map name="mapa" class="figuras">
    <area id="p_area1" class="area1" shape="circle" coords="125,125,50" href="" 
    onmouseover="writeText('Esto es un circulo')" onmouseout="ondelete()">
    <area id="p_area2" class="area2" shape="rectangle" coords="325,75,425,175" href=""
    onmouseover="writeText('Esto es un rectangulo')" onmouseout="ondelete2()">
    </map>
    <div id="bloque2" class="externo">
    <img src="https://i.stack.imgur.com/GvHyu.png" usemap="#mapa" >
    <div id="bloque1" class="interno" >
    </div>
    </div>