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

[Pom's]

Bonjour à vous tous,
J'ai trouvé cette technique sur un site :
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 :
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.

[aladdin]

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]

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

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]

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]

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: Tout sélectionner

.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]

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]

Bin merci à vous, je vais donc rester au javascript.

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

[SIBELIUS]

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: Tout sélectionner

.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.
}