J'ai besoin de changer l' <img>
URL source sur hover
.
J'ai essayé mais ne fonctionnera 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.
content
ne fonctionne qu'avec:before
ou:after
alors cela ne fonctionnera pas. Pourquoi ne pas utiliser undiv
avec une image d'arrière-plan et changer l'image d'arrière-plan en survol?DIV
.content:
seul fonctionne avec:before
ou:after
img
balise et supprimer simplement lesrc
de votre image. Bien que ce soit un peu étrange, cela fonctionnera. @HamedKamrava: Vous ne pouvez utiliser qu'une image ou pouvez-vous utiliser autre chose?:before
ou:after
pseudo classes à utilisercontent:url(...)
. Mise à jour: cela ne fonctionne que pour Webkit / Google Chrome.Réponses:
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 comme suit
Et si vous pensez que vous pouvez utiliser du code javascript, vous devriez pouvoir changer le src de la balise img comme ci-dessous
la source
<img src="..." style="visibility: hidden" />
J'ai modifié quelques changements liés à Patrick Kostjens.
DEMO
http://jsfiddle.net/ssuryar/wcmHu/429/
la source
J'ai eu un problème similaire mais ma solution était d'avoir deux images, une cachée (affichage: aucune) et une visible. Au survol d'une étendue environnante, l'image d'origine change pour afficher: aucun et l'autre image à afficher: bloc. (Peut utiliser 'inline' à la place selon vos circonstances)
Cet exemple utilise deux balises span au lieu d'images afin que vous puissiez voir le résultat lors de son exécution ici. Je n'avais malheureusement aucune source d'images en ligne à utiliser.
la source
span#initial
à la place despan[id="initial"]
Ce que vous pouvez faire est de tricher un peu en définissant
width
etheight
à 0 pour masquer l'image réelle et appliquer du CSS pour faire ce que vous voulez:Et le rembourrage fait de la
img
balise la taille que vous voulez qu'elle ait (la moitié de la taille de votre image réelle).Violon
la source
Voici une approche alternative utilisant du CSS pur. L'idée est d'inclure les deux images dans le balisage HTML et de les afficher ou de les masquer en conséquence sur: hover
HTML
CSS
jsfiddle: https://jsfiddle.net/m4v1onyL/
Notez que les images utilisées sont de mêmes dimensions pour un affichage correct. En outre, ces tailles de fichier d'images sont assez petites, donc le chargement de plusieurs images n'est pas un problème dans ce cas, mais peut l'être si vous souhaitez basculer l'affichage d'images de grande taille.
la source
Concernant la sémantique, je n'aime aucune solution donnée jusqu'à présent. Par conséquent, j'utilise personnellement la solution suivante:
Il s'agit d'une solution CSS uniquement avec une bonne compatibilité avec les navigateurs. Il utilise un wrapper d'image qui a un arrière-plan qui est initialement masqué par l'image elle-même. En survol, l'image est masquée à travers l'opacité, par conséquent l'image d'arrière-plan devient visible. De cette façon, on n'a pas de wrapper vide mais une image réelle dans le code de balisage.
la source
J'ai encore une solution. Si quelqu'un utilise AngularJs: http://jsfiddle.net/ec9gn/30/
Le Javascript:
Pas de CSS ^^.
la source
J'ai eu un problème similaire - je veux remplacer l'image sur: survoler mais je ne peux pas utiliser BACKGRUND-IMAGE en raison du manque de conception adaptative de Bootstrap.
Si vous comme moi ne voulez changer l'image que sur: survolez (mais n'insistez pas pour changer SRC pour la balise d'image donnée), vous pouvez faire quelque chose comme ça - c'est une solution CSS uniquement.
HTML:
CSS:
Si vous voulez un code compatible IE7, vous pouvez masquer / afficher: l'image HOVER en positionnant pas par opacité.
la source
Puisque vous ne pouvez pas changer le
src
avec CSS: Si jQuery est une option pour vous, vérifiez ce violon.Démo
Il utilise essentiellement la
.hover()
méthode ... il faut deux fonctions pour le faire fonctionner. Lorsque vous entrez dans le survol et lorsque vous le quittez.Nous utilisons le
.attr
(abréviation pour attribut) pour changer l'src
attribut.Il convient de noter que vous avez besoin de la bibliothèque jQuery incluse comme dans le violon pour que cela fonctionne.
la source
Violon
D'accord avec la réponse d'AshisKumar,
il existe un moyen de changer l'URL de l'image au survol de la souris en utilisant la fonctionnalité jQuery comme ci-dessous:
la source
a
avecdisplay:block
diffère-t-il de div? Le sujet de départ voulait changer l'src
attribut deimg
throughcss
et non un tour de piste.Personnellement, j'irais avec l'une des solutions JavaScript / jQuery. Non seulement cela conserve votre sémantique HTML (c'est-à-dire qu'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 JS / jQuery pour précharger votre image de survol.
Le préchargement de l'image de survol signifiera qu'il n'y aura probablement pas de retard de téléchargement lorsque l'utilisateur survole l'image d'origine, ce qui entraînera un comportement beaucoup plus professionnel de votre site.
Cela signifie que vous avez une dépendance à JS, mais la petite minorité qui n'a pas activé JS ne sera probablement pas trop agitée - et tout le monde aura une meilleure expérience ... et votre code sera bon aussi!
la source
Vous ne pouvez pas modifier
img
l'src
attribut de la balise avecCSS
. Possible en utilisant le gestionnaire d'événements Javascriptonmouseover()
.HTML:
Javascript:
la source
Vous ne pouvez pas modifier l'img src à l'aide de css. Vous pouvez cependant utiliser la solution css pure suivante. HTML:
CSS:
Ou, si vous ne souhaitez pas utiliser un div avec une image d'arrière-plan, vous pouvez utiliser une solution javascript / jQuery. Html:
jQuery:
la source
Pour cela, vous pouvez utiliser le code ci-dessous
1) html
2) css
la source
Sur les navigateurs plus anciens,
:hover
ne fonctionnait que sur les<a>
éléments. Il faudrait donc faire quelque chose comme ça pour que ça marche.la source
Le code suivant fonctionne à la fois sur Chrome et Firefox
la source
Voici une solution CSS pure. Mettez l'image visible dans la balise img, mettez la deuxième image en arrière-plan dans le css, puis masquez l'image en survol.
la source
La meilleure façon de changer
src
d'image est:Voir la démo en direct: http://www.audenaerde.org/csstricks.html#imagereplacecss
Prendre plaisir!
la source
Essayez ce code.
la source
Il existe un autre moyen simple d'utiliser uniquement HTML et CSS!
Enveloppez simplement votre
<img>
tag avec div comme ceci:Ensuite, dans votre fichier CSS, masquez l'img et définissez l'image d'arrière-plan de l'élément div d'emballage:
Et voilà!
la source