Html/css rollover image+lien

Résolu/Fermé
Signaler
Messages postés
9
Date d'inscription
dimanche 22 février 2009
Statut
Membre
Dernière intervention
29 avril 2011
-
 Doug Smith -
Bonjour,

Je suis coincée sur un problème tout bête.
Je n'arrive pas à faire un roll over avec lien.

Enfait, j'aimerais que lorsque je met ma souris sur l'image, celle-ci soit remplacée
par une autre image. De plus, j'aimerais que cette image puisse servir de lien
cliquable.

J'essaie de faire ça depuis 2 jours, mais je n'y arrive pas...

Merci d'avance pour votre aide :) !



5 réponses

Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 046
Salut !
C'est un problème récurant : il suffit de mettre une image de fond sur un lien, et lors du hover, l'image de fond change :


HTML :

<a href="#" class="rolloover">text</a>


CSS :

.roloover {
   display: inline-block;
   width: 100px;
   height: 40px;
   background-image: url(image1.png);
}

.roloover:hover {
   background-image: url(image2.png);
}
5
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
9
Date d'inscription
dimanche 22 février 2009
Statut
Membre
Dernière intervention
29 avril 2011
2
Merci beaucoup !
Messages postés
591
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
11 février 2016
28
Merci le hollandais volant ;) comment faire sur plusieurs images d' une même page ?
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 046
Comment ça ?
Tu veux dire plusieurs liens différents ? Il suffit de faire la même chose, avec les différents ID.

Sinon tu peux très bien mettre plusieurs liens :
<a href="#" class="rolloover">text1</a>
<a href="#" class="rolloover">text2</a>
<a href="#" class="rolloover">text3</a>
Messages postés
591
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
11 février 2016
28
voici la page que j 'ai faite http://www.jeux-fr.eu et si je continue comme ca elle finira par être trop lourde..alors je voulais me tourner plus vers le css pour alléger tout ca..
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 046
En effet : tu semble avoir une bonne cinquantaine d'images. Donc autant de requêtes HTTP.
En plus de ça, le fichier CSS intègre lui même des images à mettre en fond.
Ça fait donc bien une centaine de requêtes.

C'est énorme.

Tu peux très bien utiliser la méthode ci dessous, mais ça n'allègera pas la page.

Je te conseille plutôt d'utiliser la méthode des portes coulissantes pour ça, mais risque à mon avis de ne pas marcher dans les navigateurs pourris comme IE 6/7/8.

En fait, cette méthode utilise une seule grande image, qui est une mosaïque de toutes les autres.
En fonction du lien, il suffit de placer la grande image au bon endroit derrière, un peu comme un pochoirs.

Tu peux l'essayer avec ceci : https://lehollandaisvolant.net/errors/404.html

Tu vois que je n'ai utilisé que deux images : une "normale" et une pour le "hover".

Ce que se passe, c'est que en fonction du lien, j'ai changé la position de l'image de fond (background-position). Comme ça, l'image même si elle est grande, vient ne montre que la partie que l'on veut.

Lors de l'ajout d'un jeu sur ton site, il te suffit de modifier l'image avec toutes les miniatures et hop !

L'image est à faire "au pixel près" aussi.


Messages postés
591
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
11 février 2016
28
merci pour tes lumières ! Mais quel est ton navigateur?
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 046
Opera en ce qui me concerne.

Mais ma page marche avec Chrome ou Firefox aussi.
Bonjour à tous, excusez moi de déterrer ce topic mais je voudrais savoir si il était possible d'utiliser cette technique (la première citée plus haut) sans pour autant devoir faire apparaître un texte ?

Lorsque je fais un lien en passant par une image et que j'utilise cette méthode, l'image de base reste lorsque que je positionne ma souris sur cette dernière et me met l'autre image (celle que j'aimerais voir remplacé l'image par défault) derrière.

Merci d'avance.