Html/css rollover image+lien
Résolu/Fermé
misalala
Messages postés
9
Date d'inscription
dimanche 22 février 2009
Statut
Membre
Dernière intervention
29 avril 2011
-
28 juil. 2010 à 20:52
Doug Smith - 15 févr. 2013 à 23:21
Doug Smith - 15 févr. 2013 à 23:21
A voir également:
- Html/css rollover image+lien
- Lien url - Guide
- Verifier un lien - Guide
- Créer un lien pour partager des photos - Guide
- Image iso - Guide
- Lien copié - Forum Téléphones & tablettes Android
5 réponses
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 056
29 juil. 2010 à 00:20
29 juil. 2010 à 00:20
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 :
CSS :
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);
}
misalala
Messages postés
9
Date d'inscription
dimanche 22 février 2009
Statut
Membre
Dernière intervention
29 avril 2011
2
29 juil. 2010 à 02:12
29 juil. 2010 à 02:12
Merci beaucoup !
gwenm
Messages postés
591
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
11 février 2016
30
20 juin 2011 à 11:25
20 juin 2011 à 11:25
Merci le hollandais volant ;) comment faire sur plusieurs images d' une même page ?
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 056
20 juin 2011 à 12:06
20 juin 2011 à 12:06
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 :
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>
gwenm
Messages postés
591
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
11 février 2016
30
20 juin 2011 à 12:12
20 juin 2011 à 12:12
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..
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 056
20 juin 2011 à 12:49
20 juin 2011 à 12:49
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.
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.
gwenm
Messages postés
591
Date d'inscription
lundi 6 octobre 2008
Statut
Membre
Dernière intervention
11 février 2016
30
20 juin 2011 à 13:55
20 juin 2011 à 13:55
merci pour tes lumières ! Mais quel est ton navigateur?
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 056
20 juin 2011 à 13:58
20 juin 2011 à 13:58
Opera en ce qui me concerne.
Mais ma page marche avec Chrome ou Firefox aussi.
Mais ma page marche avec Chrome ou Firefox aussi.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
