[résolu] Rollover multiple

Bonjour tout le monde !

Je ne suis pas du tout un expert dans tout ce qui est HTML, CSS et autres, je me suis penché dessus depuis que je "personnalise" la page myspace de mon groupe de musique,
donc je vous expose mon problème :

Je veux insérer plusieurs rollovers (un menu classique, 4 catégories donc 4 rollovers différents, à des endroits differents, logique) sur une même page. Après des heures de recherche, j'étais enfin tombé sur un code qui semblait marcher ! *victoire !* Malheureusement ma joie fut de courte durée quand, une fois appliqué sur les 4 images différentes, seule l'image du dernier rollover était appliquée à tous les rollovers (en gros je me retrouver avec 4 même rollover au lieu d'en avoir 4 différents...

Voila mon problème, voici les codes que j'ai utilisé, il se peut que ce soit le bordel que certaines parties ne servent a rien, comme je l'ai dit, c'est plus du bricolage que de la logique pure que je fais...

<div class="add"><style>
.Rollover1
a.rollover:link, .rollover{
	width:237px;
	height:36px;
	display:block;
	background-image:url('http://img689.imageshack.us/img689/4288/addpp.jpg');}
a.rollover:hover{id="2"
	width:237px;
	height:36px;
	display:block;
	background-image:url('http://img695.imageshack.us/img695/7890/add2r.jpg');}
</style><a class="rollover" href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=525659327"><br /><a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=525659327"><b>Myspace Image Rollover</b><br /></div><center></a>




<div class="mail"><style>
.Rollover2
a.rollover:link, .rollover{
	width:231px;
	height:36px;
	display:block;
	background-image:url('http://img186.imageshack.us/img186/5743/mailcw.jpg');}
a.rollover:hover{id="4"
	width:231px;
	height:36px;
	display:block;
	background-image:url('http://img651.imageshack.us/img651/2904/mail2.jpg');}
</style><a class="rollover" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.messageV3&friendID=525659327&MyToken=9bf1efe5-0efc-4b92-a971-02d0e16661a6"><br /><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.messageV3&friendID=525659327&MyToken=9bf1efe5-0efc-4b92-a971-02d0e16661a6"><b>Myspace Image Rollover</b><br /></div><center></a>




<div class="comment"><style>
.Rollover3
a.rollover:link, .rollover{
	width:333px;
	height:36px;
	display:block;
	background-image:url('http://img412.imageshack.us/img412/5099/commentbg.jpg');}
a.rollover:hover{id="6"
	width:333px;
	height:36px;
	display:block;
	background-image:url('http://img221.imageshack.us/img221/1219/comment2.jpg');}
</style><a class="rollover" href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=525659327&MyToken=9bf1efe5-0efc-4b92-a971-02d0e16661a6"><br /><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=525659327&MyToken=9bf1efe5-0efc-4b92-a971-02d0e16661a6"><b>Myspace Image Rollover</b><br /></div><center></a>




<div class="pics"><style>
.Rollover4
a.rollover:link, .rollover{
	width:300px;
	height:36px;
	display:block;
	background-image:url('http://img229.imageshack.us/img229/7207/picse.jpg');}
a.rollover:hover{id="8"
	width:300px;
	height:36px;
	display:block;
	background-image:url('http://img717.imageshack.us/img717/914/pics2u.jpg');}
</style><a class="rollover" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=525659327"><br /><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=525659327"><b>Myspace Image Rollover</b><br /></div><center></a>


.add { top: 841px; left: 52%; margin-left: -540px; width: 237px; height: 36px; position: absolute; } 
.mail { top: 841px; left: 52%; margin-left: -303px; width: 231px; height: 36px; position: absolute; } 
.comment { top: 841px; left: 52%; margin-left: -72px; width: 333px; height: 36px; position: absolute; } 
.pics { top: 841px; left: 52%; margin-left: 261px; width: 300px; height: 36px; position: absolute; }

Voila ça fait plusieurs jours que je lutte pour comprendre ce qui ne va pas mais rien n'y fait, je pédale dans la semoule...
Modifié par NeKrobAt (07 Mar 2010 - 17:13)

Hello

Alors, la première chose à faire serait déjà de regrouper tous tes styles dans un seul bloc style.
Ensuite, je vais tenter de t'expliquer tes erreurs...

Prenons ton premier rollover :

<div class="add"><style> 
.Rollover1 
a.rollover:link, .rollover{ 
    width:237px; 
    height:36px; 
    display:block; 
    background-image:url('http://img689.imageshack.us/img689/4288/addpp.jpg');} 
a.rollover:hover{id="2" 
    width:237px; 
    height:36px; 
    display:block; 
    background-image:url('http://img695.imageshack.us/img695/7890/add2r.jpg');} 
</style><a class="rollover" href="(...)lien1(...)"><br /><a href="...)lien1(...)"><b>Myspace Image Rollover</b><br /></div><center></a> 

Dans ce code, ce qu'on peut tout d'abord remarquer, c'est que tu ouvres deux fois la balise de lien '<a>' avec exactement la même chose, il n'en faut qu'une.

Ensuite, concernant ton bloc de style, ton premier identifiant est ".Rollover1 a.rollover:link, .rollover", ce style s'appliquera donc à tous les éléments liens ayant la classe "rollover" eux mêmes contenus dans un bloc de classe "Rollover1", ainsi qu'à tous les éléments de classe "rollover". Or ici ta balise "<a>" contient la classe "rollover" uniquement. Tu n'identifies donc pas correctement ta classe vu que chacun de tes rollover sera identifier de la même manière.

La facon correcte d'aborder ton problème serait de corriger les identifiants sous la forme ".rollover1 a:link" et ".rollover1 a:hover" => l'élément lien contenu dans le bloc rollover1.
Ton contenu quand à lui devrait simplement être écrit sous la forme

<div class="rollover1"><a href="(...)lien1(...)">Myspace Image Rollover</a></div>

tu peux également remarquer que tu redéfinis exactement la même chose dans ton link et dans ton rollover. Ton rollover gardera les propriétés du lien définies précédemment.
Au final, tu peux donc utiliser un code de ce style :

<style> 
.rollover1 a{ 
    width:237px; 
    height:36px; 
    display:block; 
    background-image:url('http://img689.imageshack.us/img689/4288/addpp.jpg');
} 
.rollover1 a:hover{
    background-image:url('http://img695.imageshack.us/img695/7890/add2r.jpg');
}

.rollover2 a{ 
    width:231px;
    height:36px;
    display:block; 
    background-image:url('http://img186.imageshack.us/img186/5743/mailcw.jpg'); 
} 
.rollover2 a:hover{
    background-image:url('http://img651.imageshack.us/img651/2904/mail2.jpg');
}

.rollover3 a{ 
    width:233px; 
    height:36px; 
    display:block; 
    background-image:url('http://img412.imageshack.us/img412/5099/commentbg.jpg');
} 
.rollover3 a:hover{
    background-image:url('http://img221.imageshack.us/img221/1219/comment2.jpg');
}

.rollover4 a{ 
    width:230px; 
    height:36px; 
    display:block; 
    background-image:url('http://img229.imageshack.us/img229/7207/picse.jpg');
} 
.rollover4 a:hover{
    background-image:url('http://img717.imageshack.us/img717/914/pics2u.jpg');
}
</style>

<div class="rollover1"><a href="(...)lien1(...)">Myspace Image Rollover</a></div>
<div class="rollover2"><a href="(...)lien2(...)">Myspace Image Rollover</a></div>
<div class="rollover3"><a href="(...)lien3(...)">Myspace Image Rollover</a></div>
<div class="rollover4"><a href="(...)lien4(...)">Myspace Image Rollover</a></div>

(Je n'ai pas testé le code ci dessus donc il se peut qu'une erreur s'y soit glissée, mais l'idée y est)

j'suis pressé par le temps donc j'ai fait que survoler ta réponse sans tester mais j'te remercie déjà d'avoir pris l'temps de m'aider ! Dès que je peux, j'me penche plus en détail là dessus et je viens dire ce qu'il en est !

Bon bin j'ai plus qu'a te faire un gros calin !

Effectivement y avait quelques problemes dans ce que t'as écrit mais c'etait juste des problemes de taille et autres conneries rien de méchant !

Merci infiniment !

ravi d'avoir pu aider
Modifié par pixelb (07 Mar 2010 - 22:22)