0

Hola muy buenas compañeros!

Os explico con imágenes y código mi problema y duda.

introducir la descripción de la imagen aquí

Tengo una imagen como esta, en la que quiero que cada vez que pasas el mouse por encima de las cruces se habrá una descripción y un titulo. Hasta aquí bien, ya que si pasas por encima aparece, y en el botón de cerrar de el div que aparece se cierra, pero hay fallos...

introducir la descripción de la imagen aquí

Fallos como que al pasar el mouse hay que pasarle dos veces por encima para que aparezca, cosa que quiero que sea automática. Os dejo mi código (los div se crean con jQuery, de ahí que no ponga código html):

JS

//grafico vivienda pasiva
$(document).ready(cargaPagina);

function Info(id, titulos, descripcion) {
  this.id = id;
  this.titulos = titulos;
  this.descripcion = descripcion;
};

var miInfo = new Info();

function cargaPagina() {
  var opciones = {
    url: "./js/informacion.php",
    method: "get",
    dataType: "json"
  };

  $.ajax(opciones)
    .done(cargaExito)
    .fail(cargaError);

  function cargaExito(infos) {

    for (var i = 0; i < infos.length; i++) {
      //imagen de la cruz hover
      var $imgCruz = $('<img>');
      $imgCruz.attr('src', './imagenes/mas.png');
      $imgCruz.attr('class', 'c' + i);
      $imgCruz.addClass('mas');
      $imgCruz.attr('id', i);
      $imgCruz.on("mouseover", muestraInfo);

      $('#vp_grafico').append($imgCruz);
    }

    function muestraInfo() {

      //eliminamos contenido si ya existe, si la página esta vacía, lo añadimos
      if ($('#informacion-display').length !== 0) {
        $('#informacion-display').remove();
      } else {

        var thisID = this.id;
        var id = parseInt(thisID); //id

        var $divInfo = $('<div></div>');
        $divInfo.attr('id', 'informacion-display');
        $divInfo.attr('class', 'visible');
        $divInfo.addClass('info' + id);

        var $cerrar = $('<img>');
        $cerrar.attr('id', 'boton-cerrar');
        $cerrar.on('click', quitarInfo);
        $cerrar.attr('src', './imagenes/cerrar.png');
        $divInfo.append($cerrar);

        var $t = $('<h1></h1>');
        $t.html(infos[id].titulos);
        $divInfo.append($t);

        var $hr = $('<hr>');
        $divInfo.append($hr);

        console.log(infos[id].descripciones);
        var $d = $('<p></p>');
        $d.html(infos[id].descripciones);
        $divInfo.append($d);

        $('#vp_grafico').append($divInfo);
      }
    }

    function quitarInfo() {
      if ($('#informacion-display').hasClass('visible')) {
        $('#informacion-display').addClass('oculto');
        $('#informacion-display').removeClass('visible');
      }
    }

  }

  function cargaError(xhr, estado, error) {
    console.log("Error al cargar: " + error);
  }
}

Espero vuestra respuesta y admito sugerencias para hacer lo que es el proyecto mejor, un saludo!

1 respuesta 1

0

El cargar la información con ajax crea un delay, en un principio no hay datos luego generas y cargas, esto toma tiempo, cosa que no contempla tu método muestraInfo(), provocando que en el tiempo 1 aun no haya texto(mouseOver no funciona) y en el tiempo 3 si hay texto(mouseOver funciona). Podrías inutilizar las cruces hasta que tengan texto o cargar toda la información desde un inicio y así evitar el verificar si hay texto o no en el método muestraInfo().

1
  • Hecho y funciona, muchas gracias!!
    – user75193
    el 19 jul. 2018 a las 7:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.