Home / Questions / 11675
Accepted
Marc Lemien
Asked: 2020-06-03 01:39:48 +0800 CST 2020-06-03 01:39:48 +0800 CST

Zoom event on mouse over that shows an iframe

  • 772

This code that I copy allows that when putting the mouse over the first image it shows the second one. However, I want to do something that I can't. I would like that when I put the mouse over the image it shows me a box as an iframe, because I have to show a result of that image that is in another tab and it is not an image. Does anyone know how? enter image description here

I found it on this website: ( http://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html#.V0_5qpOLSEK )

Alvaro Montoro's answer is good but the code does what I show in the image, let's see if someone knows how to solve it.

enter image description here

javascript

2 Answers

  1. What I've understood, you need to open a modal window when you hover over a first image; and then display a second image that is copied into that modal from an attribute of the link...

    I have made you an example in Jquery, I hope it can help you... I recommend you to use this library http://getbootstrap.com/ it is very useful, it will help you a lot in your developments.

    Note: You need to use this library, 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
  2. Best Answer

    If I understand correctly, what you want is that in normal state it is an image, but when you hover the mouse over it it is a different content inside a iframe.

    To do this, what you could do is put the image as the background of the link, and when the mouse is over the link, show a iframehidden one. Using a method like that you wouldn't even need JavaScript, it could be done with just HTML and 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>

    It's not ideal though because the link would no longer redirect properly (plus it wouldn't be valid HTML because a iframeshouldn't go inside a a).

    • 1