Rollover ... avec déplacement d'une image

Pom's

Nouveau WRInaute
Bonjour à vous tous, :lol:
J'ai trouvé cette technique sur un site :
:arrow: http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

Cela permet d'avoir un seul temps de chargement et c'est plus simple qu'un script de préchargement.

Seulement, cela a été fait pour un menu, je souhaiterai l'adapter à plusieurs images comme ici :
:arrow: http://perso.wanadoo.fr/cmonnomdesite/membres/adrientest.htm

Je voudrais faire cette effet pour chaque image du bas. Alors comment utiliser plusieur sources.
J'espère que je vous ai bien expliqué ma demande.

Merci de m'avoir lu.

PS: Je ne m'y connait pas en programmation, d'ou mon passage ici. :wink:
 

aladdin

WRInaute passionné
la technique n'est pas dificile mais si tu t'y connais pas en programmation (en CSS plus spécialement tu ne pourra pas l'utliser), tout est dans les liens que tu a donner
 

Pom's

Nouveau WRInaute
Mais, il ne serait pas possible que quelqu'un m'aide .............. a taper le code pour moi :p

Euh bon je sais non, on va pas me faire le boulot et moi l'utiliser comme ça tranquille. Mais bon tanpis, je ferais avec la vieille technique du renard.

Par contre pourrait tu me dire quelle technique de préchargement marche le mieux.

Merci de ta rapide réponse
 

SIBELIUS

WRInaute occasionnel
Pom's a dit:
Seulement, cela a été fait pour un menu, je souhaiterai l'adapter à plusieurs images
Salut, en fait le tutoriel n'a pas été fait spécifiquement pour un menu.
Ce n'est que l'exemple qui est un menu mais rien ne t'empêche de n'avoir que l'image-lien <a> sans le menu (<ul> / <li>) qui l'entoure.

Il te suffit de désigner ensuite chaque image-lien par une classe ou un id et de choisir son apparence en CSS.

Bien sûr, il te faut connaître un minimum de bases en CSS.
 

Pom's

Nouveau WRInaute
J'ai trouvé !!!!!

J'ai donc trouvé quelque chose qui marchait sur ce principe, même si ce n'est pas exactement les mêmes commandes, ça marche très bien.
Code:
.zoom1 {
width: 100px;
height: 95px;
background-image: url(../photos/mod/membres/portraits/alex3.JPG);
background-repeat:no-repeat;
margin: 0 auto; 
}
.zoom1 p, .zoom1 a {
height: 95px;
display: block;
margin:0
}
.zoom1 a:hover {
background-image: url(../photos/mod/membres/portraits/alex3.JPG);
background-position: 0px -95px;
background-repeat: no-repeat;
}

Par contre, pour utiliser cette technique a plusieurs images, suis je obliger de réecrire ce code en remplaçant le 1 par un 2 puis par 3 .........
ou y'a t'il une méthode plus simple.

Merci de vos réponses
 

aladdin

WRInaute passionné
si tu veux utiliser cette technique t'es obligé de retaper le code pour chaque image .... hé oui, il y a ttjours une face cachée ;)
 

Pom's

Nouveau WRInaute
Bin merci à vous, je vais donc rester au javascript. :D

Et oui pourquoi se faire ^^^^ avec un truc trop chiant quand on est newbie alors qu'il y'a des choses déjà toute faite pour nous.

A bientôt :lol:
 

SIBELIUS

WRInaute occasionnel
aladdin a dit:
si tu veux utiliser cette technique t'es obligé de retaper le code pour chaque image .... hé oui, il y a ttjours une face cachée ;)
Mais non, heureusement, il suffit d'afficher les classes les unes à la suite des autres, séparées par des virgules.

Il y'a juste l'image à changer :

Par exemple :
Code:
.zoom1, .zoom2, .zoom3, .zoom4 {
width: 100px;
height: 95px;
background-image: url(../photos/mod/membres/portraits/alex3.JPG);
background-repeat:no-repeat;
margin: 0 auto;
}

.zoom1 {background-image: url(../photos/mod/membres/portraits/alex3.JPG);}

.zoom2 {background-image: url(../autreimage);}

etc.
}
 

Discussions similaires

Haut