CSS: Changer l'image src sur img: hover
J'ai besoin de changer l'URL source <img> sur hover.
J'ai essayé ça mais ça ne marchera pas:
HTML
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>
CSS
#my-img:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Toute aide serait appréciée.
Mettre à jour:
Cela ne fonctionne que pour Webkit/Google Chrome.
Avec seulement html et css, il n'est pas possible de changer le src de l'image. Si vous remplacez la balise img par la balise div, vous pourrez peut-être modifier l'image définie comme arrière-plan de la manière suivante
div {
background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Et si vous pensez pouvoir utiliser du code javascript, vous devriez pouvoir modifier le src de la balise img comme ci-dessous.
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />J'ai modifié quelques modifications relatives à Patrick Kostjens.
<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png"
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>
DEMO
Ce que vous pouvez faire, c'est tricher un peu en définissant width et height à 0 pour masquer l'image réelle et appliquer du code CSS pour faire ce que vous voulez:
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Et le rembourrage donnant à la variable img la taille que vous souhaitez lui donner (la moitié de la taille de votre image réelle).
J'avais un problème similaire mais ma solution consistait à avoir deux images, une cachée (affichage: aucune) et une visible. En survol survolant une plage environnante, l'image d'origine change pour afficher: aucune et l'autre image à afficher: bloquer. (Peut-être utiliser 'inline' à la place en fonction de votre situation)
Cet exemple utilise deux balises span au lieu d'images pour que vous puissiez voir le résultat lorsque vous l'exécutez ici. Malheureusement, je n'avais aucune source d'image en ligne à utiliser.
#onhover {
display: none;
}
#surround:hover span[id="initial"] {
display: none;
}
#surround:hover span[id="onhover"] {
display: block;
}<span id="surround">
<span id="initial">original</span>
<span id="onhover">replacement</span>
</span>Voici une approche alternative utilisant du CSS pur. L'idée est d'inclure à la fois les images dans le balisage HTML et de les afficher ou de les masquer en conséquence:
HTML
<a>
<img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" />
<img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>
CSS
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
jsfiddle: https://jsfiddle.net/m4v1onyL/
Notez que les images utilisées ont les mêmes dimensions pour un affichage correct. En outre, la taille des fichiers images étant assez petite, le chargement multiple n’est pas un problème dans ce cas, mais peut-être si vous souhaitez basculer l’affichage des images de grande taille.
J'ai une autre solution. Si quelqu'un utilise AngularJs: http://jsfiddle.net/ec9gn/30/
<div ng-controller='ctrl'>
<img ng-mouseover="img='eb00eb'" ng-mouseleave="img='000'"
ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>
Le Javascript:
function ctrl($scope){
$scope.img= '000';
}
Pas de CSS ^^.
D'accord avec la réponse d'AshisKumar,
il y a un moyen de changer l'URL de l'image avec la souris dessus en utilisant les fonctionnalités de jQuery comme ci-dessous:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", url1); //URL @the time of mouse over on image
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", url2); //default URL
});
});
Puisque vous ne pouvez pas changer la src avec CSS: Si jQuery est une option pour vous, vérifiez ce violon.
Démo
$('#aks').hover(
function(){
$(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
},
function(){
$(this).attr('src','http://dummyimage.com/100x100/000/fff')
}
)
Il utilise essentiellement la méthode .hover() ... il faut deux fonctions pour que cela fonctionne. Quand vous entrez dans le vol stationnaire et quand vous le quittez.
Nous utilisons le .attr (abréviation d'attribut) pour modifier l'attribut src.
Notez que vous avez besoin de la bibliothèque jQuery incluse, comme dans le violon, pour que cela fonctionne.
Personnellement, je choisirais l'une des solutions JavaScript/jQuery. Non seulement cela conserve votre sémantique HTML (une image est affichée comme un élément img avec son image src habituelle définie dans le balisage), mais si vous utilisez une solution JS/jQuery, vous pourrez également utiliser le fichier JS/jQuery to précharge votre image de survol.
Le préchargement de l'image de survol signifie qu'il n'y aura probablement aucun délai de téléchargement lorsque l'utilisateur survolera l'image d'origine, ce qui permettra à votre site de se comporter de manière beaucoup plus professionnelle.
Cela veut dire que vous avez une dépendance à JS, mais la petite minorité qui n'a pas JS activé ne va probablement pas être embêtée - et tout le monde aura une meilleure expérience ... et votre code sera bon aussi!
J'ai eu un problème similaire - je veux remplacer picture sur: survolez, mais ne pouvez pas utiliser BACKGRUND-IMAGE en raison de l'absence de conception adaptative de Bootstrap.
Si vous aimez bien que je veuille seulement changer d'image: survolez (mais n'insistez pas pour changer de code SRC pour certaines balises d'image), vous pouvez faire quelque chose comme ceci: c'est une solution uniquement en CSS.
HTML:
<li>
<img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
<img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>
CSS:
li { position: relative; overflow: hidden; }
li img.hoverPhoto {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
opacity: 0;
-web-kit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;li
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }
Si vous voulez du code compatible IE7, vous pouvez masquer/afficher: image HOVER en ne positionnant pas par opacité.
Sur les anciens navigateurs, :hover ne fonctionnait que sur les éléments <a>. Il faudrait donc faire quelque chose comme ça pour que cela fonctionne.
<style>
a#aks
{
width:100px;
height:100px;
display:block;
}
a#aks:link
{
background-image: url('http://dummyimage.com/100x100/000/fff');
}
a#aks:hover
{
background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>
<a href="#" id="aks"></a>
Le code suivant fonctionne sur Chrome et Firefox
<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>
Vous ne pouvez pas modifier l'attribut img de la balise src à l'aide de CSS. Possible en utilisant Javascript onmouseover() gestionnaire d'événements.
HTML:
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>
Javascript:
function hover() {
document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}
Vous ne pouvez pas changer le src img en utilisant css. Vous pouvez cependant utiliser la solution css pure suivante. HTML:
<div id="asks"></div>
CSS:
#asks {
width: 100px;
height: 100px;
background-image: url('http://dummyimage.com/100x100/0000/fff');
}
#asks:hover {
background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Ou, si vous ne souhaitez pas utiliser une div avec une image d'arrière-plan, vous pouvez utiliser une solution javascript/jQuery. Html:
<img id="asks" src="http://dummyimage.com/100x100/000/fff" />
jQuery:
$('#asks')
.mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
.mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});
Pour cela, vous pouvez utiliser le code ci-dessous
1) html
<div id = "aks">
</div>
2) css
#aks
{
width:100px;
height:100px;
background-image:url('http://dummyimage.com/100x100/000/fff');}
#aks:hover {
background-image:url('http://dummyimage.com/100x100/eb00eb/fff');
}
En ce qui concerne la sémantique, je n’aime pas les solutions données jusqu’à présent. Par conséquent, j'utilise personnellement la solution suivante:
.img-wrapper {
display: inline-block;
background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}
.img-wrapper > img {
vertical-align: top;
}
.img-wrapper > img:hover {
opacity: 0;
}<div class="img-wrapper">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>Ceci est une solution uniquement CSS avec une bonne compatibilité de navigateur. Il utilise un wrapper d'image dont l'arrière-plan est initialement masqué par l'image elle-même. En vol stationnaire, l'image est masquée par l'opacité, ainsi l'image d'arrière-plan devient visible. De cette façon, on n'a pas un wrapper vide mais une image réelle dans le code de balisage.
Le meilleur moyen de changer src pour image est:
<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
Voir la démo en direct: http://www.audenaerde.org/csstricks.html#imagereplacecss
Prendre plaisir!
Essayez ce code.
.card {
width: 200px;
height: 195px;
position: relative;
display: inline-block;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
width:200px;
}
.card:hover .img-top {
display: inline;
} <!DOCTYPE html>
<html lang="en">
<head>
<title>Image Change on Hover with CSS</title>
</head>
<body>
<div class="card">
<img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">
<img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">
</div>
</body>
</html>Heres une solution CSS pure. Placez l'image visible dans la balise img, placez la deuxième image comme arrière-plan dans le css, puis masquez l'image en survol.
.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but4 a:hover img{
visibility:hidden;
}
<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>