Mouse zoom over event that shows an iframe

Question

Mouse zoom over event that shows an iframe

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

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 I can not do. I would like that when I put the mouse over the image, it shows me a box like 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?

I found it on this website: ( link )

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

javascript html

asked by Marc Lemien 02.06.2016 в 11:39

source

2 answers

1

What I understood, you need to open a modal window when you pass the mouse pointer over a first image; and then show a second image that is copied in that modal from an attribute of the link ...

I have made an example in Jquery, I hope I can help you ... I recommend using this library link is very useful, it will help you a lot in your developments.

Note: You do not need to use this library, link

$(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 -->

answered by 02.06.2016 в 13:56

Create a trigger to execute it before insert Error With sublime text 3

score 1 · Accepted Answer

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

For this, what you could do is put the image as background of the link, and when you put the mouse over the link, show a iframe that is hidden. Using a method like that you would not even need JavaScript, it could be achieved only with 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>

Although it is not ideal because the link would no longer redirect correctly (besides it would not be valid HTML because a iframe should not go within a a ).