1

Este código que copio permite que al poner el ratón encima de la primera imagen muestre la segunda. Sin embargo yo quiero hacer algo que no consigo. Me gustaría que al poner el ratón encima de la imagen me muestre una caja como un iframe, porque tengo que mostrar un resultado de esa imagen que está en otra pestaña y no es una imagen. ¿Alguien sabe como? introducir la descripción de la imagen aquí

Lo encontré en esta web: (http://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html#.V0_5qpOLSEK)

La respuesta de Alvaro Montoro es buena pero el código me hace esto que muestro en la imagen, a ver si alguien lo sabe solucionar.

introducir la descripción de la imagen aquí

0

2 respuestas 2

1

Si he entendido bien, lo que quieres es que en estado normal sea una imagen, pero cuando se pasa el ratón por encima sea un contenido diferente dentro de un iframe.

Para ello lo que podrías hacer es poner la imagen como fondo del enlace, y cuando se ponga el ratón por encima del enlace, mostrar un iframe que está escondido. Usando un método como ese ni siquiera necesitarías JavaScript, se podría lograr sólo con HTML y CSS:

a {
  display:inline-block;
  width:300px;
  height:300px;
  background-image:url(http://lorempixel.com/300/300/cats);
}

a > iframe {
  display:none;
  width:300px;
  height:300px;
  margin:0;
  padding:0;
  border:0;
}

a:hover > iframe {
  display:block;
}
<a href="PAGINA_A_LA_QUE_QUIERES_IR">
  <iframe src="http://lorempixel.com/300/300/people"></iframe>
</a>

Aunque no es ideal porque el enlace ya no redireccionaría correctamente (además de que no sería HTML válido porque un iframe no debe ir dentro de un a).

3
  • Es exactamente esto @ AlvaroMontoro tu código hace exactamente lo que quiero. Pero me surgen errores. Mi imagen previa se ha multiplicado por toda la home de la web desapareciendo ademas el resto de contenido. Que crees que puede ser... Gracias. Quizás sea la linea: background-image:url ?? Commented el 6 jun. 2016 a las 6:21
  • @MarcLemien Puede ser por diferentes motivos, aunque seguramente es porque tienes que asignar un valor a background-repeat con el comportamiento que quieres que tenga (además, deberías asegurarte de que tienen tamaño puesto y no ocupan toda la página, a no ser que eso sea lo que quieres)
    – Alvaro Montoro
    Commented el 6 jun. 2016 a las 12:37
  • Es una única imagen que va en el pie junto a las imágenes de las redes sociales, por lo que no quiero que se repita. Lo de background-repeat ya lo probé ayer pero no arregla nada. No encuentro la solución. seguramente el problema reside en que es Adobe Muse. Commented el 7 jun. 2016 a las 5:32
1

Lo que he entendido, necesitas abrir una ventana modal cuando pases el puntero del mouse sobre una primera imagen; y luego mostrar una segunda imagen que se copie en ese modal desde un atributo del enlace...

Te he hecho un ejemplo en Jquery, espero que te pueda ayudar... Te recomiendo usar esta librería http://getbootstrap.com/ es muy útil, te ayudará mucho en tus desarrollos.

Nota: NMecesitas usar esta librería, http://jquery.com/download/

$(function(){
  /**
   * Funciónes
   * Obtenemos la imagen secundaria 
   * Abrimos ventana modal
   * Copiamos la imagen secundaria al div .modal-body
   */
   $(document).on('mouseenter', 'a.ejemplo', function(){
    // Obtenemos ela imagen 2
  	var image_2 = $(this).attr('img-load-2');
  	// Mostramos la ventana modal
    $('.modal').show('fast');
    //  Copiamos imagen actual en el modal ".modal-body" 
		$('.modal .modal-body').html('<img src="'+ image_2 +'" />');    
  });
  
  // Función para cerrar ventana modal
  $(document).on('click', '.modal .modal-title span.close', function(){
  	 $(this).closest('.modal').hide('fast');
  });
});
body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
}

.modal {
   display: none;
   position: fixed;
   top: 15%;
 }
 
.modal .modal-ctn {
    background: #fefefe;
    border: #333 solid 1px;
    border-radius: 3px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    z-index: 11;
    width: 360px;
}

.modal:before {
   content: "";
    display: block;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.modal .modal-title {
  position: relative;
  display: block;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #EEEEEE;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.modal .modal-title span.close {
  background-color: #4D4D4D;
  position: absolute;
  text-align: center;
  top: 7px;
  right: 10px;
  display: block;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 360px;
  -moz-border-radius: 360px;
  border-radius: 360px;
}

.modal .modal-title span.close:before {
  content: "X";
  color: #FFFFFF;
  font-size: 11px;
  display: block;
  margin: 4px 2px 0 0;
}

.modal .modal-title span.close:hover,
.modal .modal-title span.close:focus{
  cursor: pointer;
}

.modal .modal-body {
  padding: 10px;
  display: block;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="ejemplo" 
  img-load-1="http://i63.tinypic.com/2e56tmd.png" 
  img-load-2="http://i63.tinypic.com/24e9ht2.png" >
<img src="http://i63.tinypic.com/2e56tmd.png"></a>
  
<!-- Ventana modal -->
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-ctn">
      <div class="modal-title">
        Título de ejemplo
        <span class="close"></span>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>
<!--/ Ventana modal -->

1
  • Has entendido bien, gracias por tu tiempo. Lo único que tiene que desaparecer cuando el ratón ya no está encima de la imagen sin que tengamos que darle un clic a algún lugar para cerrar el evento. Y lo que necesito es tener mucho menos código de ahí que me gustara lo que estaba en esa web que puse. Commented el 6 jun. 2016 a las 5:37

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.