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

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

Pom's
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 8
Inscription: 18 Mai 2005

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

Message le Mer Mai 18, 2005 15:04

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é
WRInaute passionné
 
Messages: 1457
Inscription: 29 Avr 2005

Message le Mer Mai 18, 2005 15:22

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
Nouveau WRInaute
 
Messages: 8
Inscription: 18 Mai 2005

Message le Mer Mai 18, 2005 15:31

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
WRInaute occasionnel
 
Messages: 287
Inscription: 21 Déc 2003

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

Message le Mer Mai 18, 2005 15:50

Pom's a écrit: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
Nouveau WRInaute
 
Messages: 8
Inscription: 18 Mai 2005

J'ai trouvé !!!!!

Message le Mer Mai 18, 2005 17:52

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
WRInaute passionné
WRInaute passionné
 
Messages: 1457
Inscription: 29 Avr 2005

Message le Mer Mai 18, 2005 21:34

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
Nouveau WRInaute
 
Messages: 8
Inscription: 18 Mai 2005

Message le Mer Mai 18, 2005 21:46

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
WRInaute occasionnel
 
Messages: 287
Inscription: 21 Déc 2003

Message le Mer Mai 18, 2005 22:59

aladdin a écrit: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.
}


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité