La superposition d'image Jquery?
Je cherche à superposer une image dans le coin droit sur une autre image en utilisant jquery.
Fondamentalement, je veux que la 2ème image apparaisse sur l'autre image dans le coin droit lorsque la souris de l'utilisateur survient au-dessus de l'image, puis disparaît lorsqu'elle arrête de rouler sur elle. Comment puis-je réaliser cela avec Jquery?
- Passer la variable LESS à JavaScript
- Le sous-menu à repli réactif Bootstrap a une hauteur fixe lors du premier effondrement
- Désactivation du carrousel de hibou à une largeur de fenêtre spécifique
- Désactiver le défilement vers le bas lorsque la barre d'espace est pressée sur Firefox
- Obtenir la largeur de la dernière ligne dans un paragraphe de texte
@Senad a tout à fait raison, vous n'avez pas besoin de jQuery pour cela. Cependant, si vous avez une situation plus compliquée et que vous recherchez des fonctionnalités similaires, essayez:
Enroulez-les dans un élément contenant. Réglez l'élément contenant sur la position:relative Définissez l'image de recouvrement sur la position:absolute; top:0; left:0; position:absolute; top:0; left:0; Et style la hauteur et la largeur que vous souhaitez … puis utilisez jQuery pour gérer l'événement flottant … HTML:
<div> <img id="main" src="myimg" /> <img id="overlay" src="myimg" /></div>
CSS:
div { position:relative; } #main { width:256px; div { position:relative; } #main { width:256px; height:256px; } #overlay { position:absolute; height:100px; width:100px; top:0; left:0; }
Code:
$(document).ready(function() { $("#main").mouseenter(function() { $("#overlay").show(); }); $("#main").mouseleave(function() { $("#overlay").hide(); }); });
Voir un exemple de travail ici: http://jsfiddle.net/jsney/10/
Vous n'avez pas besoin de jQuery pour cela, vous pouvez utiliser CSS pour cela, par exemple
<a href="#" class="my-overlay">My Overlay</a>
CSS
a.my-overlay { background: url('/images/first-image.jpg') no-repeat; width: 100px;/*width: of image*/; height: 100px;/*height of image*/; display: block; text-indent: -1000px; overflow: hidden; } a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
C'est une solution beaucoup plus facile et acceptable pour tout le monde.
Supposons que votre première image soit enveloppée dans un div.
1 / Ajouter un autre div avec un style "affichage: aucun" et une classe de votre choix 2 / Sur suspendre l'img (si ce n'est pas fait avant) sur div 3 / slideToggle la div qui contient la deuxième image et Voila!
$('div .firstImage').hover(function(){ $('.secondImage').slideToggle(); });
Bien sûr, vous devez définir le style de positionnement approprié dans la div contenant la seconde image.
Voici une façon simple de l'avoir suivi après le code de Thomas ci-dessus. Dans mon cas, je voulais mettre une superposition (essentiellement une boîte grisée avec un grand signe plus) sur une image qui montre qu'elle est cliquable et agrandit la vignette dans une lightbox. Je dois faire ça beaucoup, alors je suis en train d'utiliser des classes pas d'ID.
L'image et l'image superposée ont les mêmes dimensions. . Curiez simplement cache la superposition jusqu'à ce que la fonction de vol stationnaire s'affiche.
Je ne présente pas les trucs de la lightbox, donc c'est plus clair pour ce problème.
Notez que a.hoverTrigger enveloppe le .overlay img ainsi. Si vous ne le faites pas, vous obtiendrez l'effet de scintillement redouté.
Balisage:
<div class="merchImg"> <a href="#" class="hoverTrigger"><img src="_img/_new-store/item.png" /></a> <a href="#" class="hoverTrigger"><img class="overlay hide" src="_img/_new-store/overlay.png" /></a> </div>
Css:
.merchImg { position: relative; } .merchImg .overlay { position: absolute; top:0; left:0; }
Jquery:
$(".hoverTrigger").mouseenter(function() { $(this).parent().find('a .overlay').show(); }); $(".hoverTrigger").mouseleave(function() { $(this).parent().find('a .overlay').hide(); });
Nous pouvons également l'utiliser en utilisant le plugin "jquery.ImageOverlay.js".
Voici un exemple pour cela.
Code ASPX:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" /> <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="Scripts/jquery.metadata.js"></script> <script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script> </head> <body> <form id="form1" runat="server"> <h1> jQuery Image Overlay</h1> <fieldset> <legend><b>Without any options : </b></legend> <ul id="firstGallery" class="image-overlay"> <li><a href="http://www.yahoo.com"> <img alt="Palm Tree" src="Images/palmtree.jpg" /> <div class="caption"> <h3> Write a Title Here</h3> <p> Put a Caption Here</p> </div> </a></li> <li><a href="http://www.google.com"> <img alt="Iguana" src="Images/iguana.jpg" /> <div class="caption"> <h3> Another Title</h3> <p> click for more info</p> </div> </a></li> <li><a href="http://www.google.com"> <img alt="Ceynote" src="Images/ceynote.jpg" /> <div class="caption"> <h3> Just a Title Here</h3> </div> </a></li> </ul> </fieldset> <br /> <br /> <fieldset> <legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color, overlay_speed, overlay_speed_out) : </b></legend> <ul id="secondGallery" class="image-overlay"> <li><a href="http://www.mozilla.com/"> <img alt="firefox" src="Images/firefox-512-200x200.png" /> <div class="caption"> <h3> Get Firefox</h3> </div> </a></li> <li><a href="http://www.mozilla.com/"> <img alt="jungle" src="Images/jungle.jpg" /> <div class="caption"> <h3> Tall Overlay</h3> <p> The overlay height is based upon the content it contains</p> </div> </a></li> </ul> </fieldset> <br /> <br /> <fieldset> <legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata"> metadata plugin</a> : </b></legend> <ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }"> <li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/"> <img alt="bamboo" src="Images/bamboo.jpg" /> <div class="caption"> <h3> Connect to a Lightbox</h3> <p> overlay origin is overridden, not animated</p> </div> </a></li> <li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com"> <img alt="Ships" src="Images/josh-ships.jpg" /> <div class="caption"> <h3> 'Ships' by Josh Neal</h3> <p> different in/out speeds</p> </div> </a></li> <li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }" href="http://www.mozilla.com/"> <img alt="cypress" src="Images/cypress.jpg" /> <div class="caption"> <h3> Digg This!</h3> <p> colors, overlay speed overridden, overlay always open</p> </div> </a></li> </ul> </fieldset> <script type="text/javascript"> // JavaScript for the Image Overlay galleries. $("#firstGallery").ImageOverlay(); $("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' }); $("#thirdGallery").ImageOverlay(); </script> </form> </body> </html>
================================================== ==========================
CSS:
.image-overlay { list-style: none; text-align: left; } .image-overlay li { display: inline; } .image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; } .image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; } .image-overlay a { margin: 9px; float: left; background: #fff; border: solid 2px; overflow: hidden; position: relative; } .image-overlay img { position: absolute; top: 0; left: 0; border: 0; } .image-overlay .caption { float: left; position: absolute; background-color: #000; width: 100%; cursor: pointer; /* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to longtime IE abuse of it, so opacity is not offically supported - use at your own risk. To play it safe, disable overlay opacity in IE. */ /* For Firefox/Opera/Safari/Chrome */ opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3, .image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6 { margin: 10px 0 10px 2px; font-size: 20px; font-weight: bold; padding: 0 0 0 5px; } .image-overlay p { text-indent: 0; margin: 10px; font-size: 1em; }
Téléchargements: Visitez ce lien pour télécharger les fichiers .js et les fichiers d'images et l'exemple en direct de la mise en œuvre de plusieurs façons.
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html
- Création d'un élément HTML de curseur vertical
- Curseur sous forme de bande. Bugs in Safari
- Cliquez sur la rangée du tableau et obtenez la valeur de toutes les cellules
- La largeur d'un élément prenant en compte le mode de quirks en javascript?
- Comment créer des fenêtres contextuelles à côté des liens lorsque vous les utilisez?
- Comment étiez-vous une image ou un bouton brillant lorsque vous passez votre souris sur l'utilisation de javascript ou jquery?
- Incluez à la fois bootstrap.min.css et bootstrap.css ou un seul?
- Utilisation de jQuery lorsqu'il n'y a pas de connexion Internet
- Comment puis-je positionner une image tournée dans un conteneur?
- Débordement: auto ne fonctionne pas sur les appareils tactiles (iOS)