Afficher une image plus grande sur la vignette du survol du

Pour une liste d'images que j'ai l'url pour le carré de la vignette http://example.com/img1_thumb.jpg et pour la taille d'origine (toute proportion) http://example.com/img1.jpg. Je vous montre les vignettes dans la grille, et je voudrais montrer l'original lorsque l'utilisateur place la souris sur une image dans la grille. Peut-être l'aide d'un élément flottant, l'objectif est que l'utilisateur peut voir l'image plus en détail et de voir les parties de l'recadrée dans la vignette.

Comment puis-je le faire? Je suis un débutant en HTML/css/Javascript

OriginalL'auteur Addev | 2013-03-16

  1. 3

    U peut fonctionner sans les vignettes..

    pour les vignettes

    <img src="http://example.com/img1.jpg" class="compress"/>

    sur le vol stationnaire de la ci-dessus montrent ce un

    $(".compress").hover(function(){
  $(".image").show();

});

    image complète

     <img src="http://example.com/img1.jpg" class="image"/>

    css

     .compress{
  width:20%;
/*aspect ratio will be maintained*/

}

.image{
display:none;
position:absolute;


 }

    ses pas complète,mais je pense que cela pourrait aider

    OriginalL'auteur Nikhar

  2. 9

    Il y a beaucoup de plugins jQuery qui font cela. Puisque vous êtes un débutant, je recommande de commencer. Voici un article avec des options différentes. Voici un exemple de ce que vous cherchez.

    grand. J'ai été surpris de voir combien de temps il a fallu pour trouver quelque chose comme cela, avec cette simplicité. J'ai pensé que ce serait une chose commune.

    OriginalL'auteur ryan

  3. 1

    Utiliser JQuery:

    $(function() {
      $('#thumbnails img').click(function() {
            $('#thumbnails').hide();
            var src = $(this).attr('src').replace('.png', 'Large.png');
            $('#largeImage').attr('src', src).show();
      });
      $('#largeImage').hide().click(function() {
            $(this).hide();
            $('#thumbnails').show();
      });
});

<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">
    Un clic n'est pas un hover ...

    OriginalL'auteur makedon

  4. 1

    Fondamentalement, vous pouvez créer un <div class="some_class"><img src="http://example.com/img1.jpg"></div> ensemble de display:none et puis de lier un événement à la thumb div comme ceci : 

    $(".thumb_class").hover(function(){
   $(".some_class").show()
},
function(){
   $(".some_class").hide()
}

    Bien sûr, vous pouvez personnaliser chaque div . La deuxième function laissez vous hide la div lorsque la souris est en dehors de la manette. Espère que j'ai été le plus clair possible.

    OriginalL'auteur steo