Espace Membre
Partenaires
GameCorp - Index des forums
Game Making
Programmation
Création de sites
A:hover - Changements de style de puce

A:hover - Changements de style de puce

Daru13 Message lu Posté le 12 Jan 2008 à 01:16 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
 Bonsoir chers GameCorpiens :smile: .
Voila, je concois mon nouveau site, et j'ai décidé d'ajouter une petite icone devant chaque lien du menu latéral :

Image

A savoir que les icones seronts revues, ce sont des betas :wink: .

_______________________________________

Le contenu du cadre rouge représente l'effet du passage de la souris sur ce lien.
Le titre du lien ( ici "Histoire" ) va devenir gras et l'iconehabituellement rouge ( à gauche ddu titre du lien ) va devenir verte.


Le contenu du cadre cyran, c'est tout simplement un lien tel qu'il est lorsque la souris n'est pas pointée dessus.

_______________________________________

Voila, je voudrais qu'au passage de la souris sur chaque lien, l'icone à gauche ce ces dernier devienne verte.
J'ai quelques idées, mais je ne sais pas vraiment comment proceder.

Déja, je pense que je devrais mettre ces liens en "liste à puce" de manière à, via le CSS, changer l'habituel disque des liens en icone rouge.
J'usqu'ici, pas de problème.

Mais comment faire pour changer l'icone rouge en icone verte au passage de la souris sur un lien ?
Voici deux extraits de mon code CSS :

Code :
#menu
{
float:left;
width:167px;
height:1373px;
z-index:2;
}
.element_menu
{
background-image:url("base_menu lat.png");
border:0px solid black;
margin-bottom:20px;
z-index:2;
}


Et encore :

Code :
.element_menu a:hover
{
color:white;
font-weight:bold;
}


Le truc que je pensais faire, c'était de changer le style de puces au passage de la souris sur un lien du menu, autrement dit rajouter dans ".element_menu a:hover" :
Code :
list-style-image: url("puce verte.png");


Je n'ai pas essayé, mais à mon avis, cela modifieras toutes les puces. En gros, que je pointe ma souris sur n'importe que lien du menu, toutes les puces deviendronts vertes, non :strange: ?

Voila, si vous pouvez m'aider ça serait super :happy: .
Si vous avez beoin de plus d'infos, n'hésitez pas !
stilobique Message lu Posté le 12 Jan 2008 à 09:57 Bulle
Avatar de stilobique
Newser

Messages : 2368
GCPoints : 834447
 Il nous faut aussi le code Xhtml !
En tout cas il s'agit d'un menu, si tu veut respecter la sémantique d'un bon webmaster il t faut mettre se menu en liste, sa c'est clair !
Sinon oui, se que tu à donné comme CSS c'est plus ou moins sa... mais pense à faire les test en même temps sous Internet Explorer, les 2 logiciels ne gère pas de la même façon les puces !

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.
Daru13 Message lu Posté le 12 Jan 2008 à 14:49 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
 D'ac j'essaie :wink: .
Je te met le XHTML quand j'aurais passé ça en liste à puce, parsque sinon là c'est que des images affichés, et attention au code :absurd: .
Darktib Message lu Posté le 12 Jan 2008 à 15:01 Bulle
Avatar de Darktib
Membre Ultime

Messages : 4017
GCPoints : 347288
 Perso je pense aussi qu'il faudrait le xhtml.
Puis, question esthetique, je trouve que la police est trop d"calée par rapport aux puces...
Daru13 Message lu Posté le 12 Jan 2008 à 15:15 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
 Je sais, je vais retravailler la police aujourd'hui ( ainsi que prochianement les puces :wink: ).
Daru13 Message lu Posté le 13 Jan 2008 à 00:19 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
 Voila, j'ai passé les liens de mon menu en liste à puce, et j'ai changé le style des puces du menu :smile: .
Là, ça marche perfect.

Sauf que d'avoir rajouté la commande de changement de style de puce dans ".element_menu a:hover" ça ne fait rien :pathetic: ...

Une idée ?
Ah, et au passage, voila mon code XHTML ( si il vous parait bizzare ( coté organisation / CSS intégré aux balises ) ne vous inquietez pas, je vous expliquerais :wink: ).

Trève de blabla :cool: :
Code :
<body
 style="margin-left: 100px; width: 1000px; color: rgb(0, 0, 0); background-color: rgb(110, 110, 110);">
<div style="color: rgb(233, 232, 232);" id="menu">
<div
 style="margin-top: 245px; margin-left: 19px; width: 167px; height: 1042px;"
 class="element_menu">
<div
 style="text-align: left; color: rgb(233, 232, 232); margin-left: 0px; width: 32px;"
 id="corps">
<div
 style="text-align: left; margin-left: 142px; width: 33px; margin-top: 5px; height: 0px;"><br />
<br />
<br />
<br />
</div>
</div>
<img style="height: 23px; width: 837px;" alt=""
 src="barre%20de%20titre%20page.png" /><br />
<img style="height: 37px; width: 147px;" alt=""
 src="cat%E9go1%20lat.png" /><a> <br />
</a>
<ul>
  <li><a>Histoire</a></li>
  <li><a>Protagonistes</a></li>
  <li style="width: 139px;">Progression</li>
  <li>Screenshots</li>
  <li>Ressources</li>
</ul>
<img style="width: 147px; height: 37px;" alt=""
 src="cat%E9go2%20lat.png" /><br />
<ul>
  <li>The legend
of Zelda</li>
  <li>Adventure of
Link</li>
  <li>A link to
the Past<br />
  </li>
  <li>Link&rsquo;s awakening</li>
  <li>Ocarina of
time</li>
  <li>Majoras&rsquo;s Mask</li>
  <li>The wind
waker </li>
  <li>The minish
cap</li>
  <li>Four sword
aventure</li>
  <li>Twilight
princess</li>
  <li>Phantom
Hourglass</li>
  <li>Les autres</li>
</ul>
<img style="width: 147px; height: 37px;" alt=""
 src="cat%E9go3%20lat.png" /><br />
<ol>
  <li>Game design</li>
  <li>Level design</li>
  <li>Programmation</li>
  <li>Cahier des
charges</li>
</ol>
<img style="width: 147px; height: 37px;" alt=""
 src="cat%E9go4%20lat.png" /><br />
<ul>
  <li>Votes</li>
  <li>Banni&egrave;re</li>
  <li>Affiliés</li>
  <li>Sites utiles</li>
</ul>
<img style="width: 147px; height: 37px;" alt=""
 src="cat%E9go5%20lat.png" /><br />
<ul>
  <li>Sondages</li>
  <li>Astuces</li>
  <li>Design du
site </li>
</ul>
</div>
</div>


J'ai juste mis les balises de lien sur les 2 premiers "futurs liens" pour tester ( d'ailleur ça marche pas :absurd: ).
Mod Message lu Posté le 13 Jan 2008 à 09:41 Bulle
Avatar de Mod
Webmaster

Messages : 4954
GCPoints : 2100823
 Aïe. Ca pique les yeux de voir un code comme ça. Indente ton code, passe des lignes, ce sera beaucoup plus clair pour monsieur tout le monde, et sans doute pour toi aussi. Exemple :

Code :
<body style="margin-left: 100px; width: 1000px; color: rgb(0, 0, 0); background-color: rgb(110, 110, 110);">
  <div style="color: rgb(233, 232, 232);" id="menu">
    <div style="margin-top: 245px; margin-left: 19px; width: 167px; height: 1042px;" class="element_menu">
    
      <div style="text-align: left; color: rgb(233, 232, 232); margin-left: 0px; width: 32px;" id="corps">
        <div style="text-align: left; margin-left: 142px; width: 33px; margin-top: 5px; height: 0px;">
          <br /><br /><br /><br />
        </div>
      </div>
      
      <img style="height: 23px; width: 837px;" alt="" src="barre%20de%20titre%20page.png" /><br />
      <img style="height: 37px; width: 147px;" alt="" src="cat%E9go1%20lat.png" /><br />
      
      <ul>
        <li>Histoire</li>
        <li>Protagonistes</li>
        <li style="width: 139px;">Progression</li>
        <li>Screenshots</li>
        <li>Ressources</li>
      </ul>
      
      <img style="width: 147px; height: 37px;" alt="" src="cat%E9go2%20lat.png" /><br />
      
      <ul>
        <li class="test">The legend of Zelda</li>
        <li class="test">Adventure of Link</li>
        <li class="test">A link to the Past</li>
        <li>Link&rsquo;s awakening</li>
        <li>Ocarina of time</li>
        <li>Majoras&rsquo;s Mask</li>
        <li>The wind waker </li>
        <li>The minish cap</li>
        <li>Four sword aventure</li>
        <li>Twilight princess</li>
        <li>Phantom Hourglass</li>
        <li>Les autres</li>
      </ul>
      
      <img style="width: 147px; height: 37px;" alt="" src="cat%E9go3%20lat.png" /><br />
      
      <ol>
        <li>Game design</li>
        <li>Level design</li>
        <li>Programmation</li>
        <li>Cahier des charges</li>
      </ol>
      
      <img style="width: 147px; height: 37px;" alt="" src="cat%E9go4%20lat.png" /><br />
      
      <ul>
        <li>Votes</li>
        <li>Banni&egrave;re</li>
        <li>Affiliés</li>
        <li>Sites utiles</li>
      </ul>
      
      <img style="width: 147px; height: 37px;" alt="" src="cat%E9go5%20lat.png" /><br />
      
      <ul>
        <li>Sondages</li>
        <li>Astuces</li>
        <li>Design du site</li>
      </ul>
    </div>
  </div>
</body>


Et lorsqu'il s'agit de mettre du CSS, n'utilise l'attribut style que si c'est absolument nécessaire. Dès que tu le peux écrit ton CSS dans ta feuille de style.

Par rapport à ton code, tu as deux problèmes : le premier, c'est que tu veux modifier l'image de la balise <li>, mais que tu pointes ton :hover sur le <a></a>. Tu ne risques pas de parvenir à tes fins comme ça. Le second problème, c'est que tes balises <a></a> de test ne sont pas valides : tu n'as pas mis de href=""... Sans ça ton lien ne fonctionnera pas, et le CSS non plus.
Let's make some tweets
Daru13 Message lu Posté le 13 Jan 2008 à 10:11 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
 Ahhh d'ac je pensais pas que le "href=" serait obligatoire :absurd: .
J'vais essayer alors :happy: . Merci à vous tous !

Sinon, pour ce qui est du code zarbioïde, c'est en fait parsque j'utilise NvU pour m'aider pour le site :wink: .
Enfin bon, je m'en sert surtout pour avoir un rapide aperçu car je code surtout moi-même.

Mais des fois je modifie le positionement, la longueur ou la largeur ( etc... ) de certains éléments via NvU, et lui applique le style dans les balises, c'est pour ça :wink: .

Mais quand la page sera finie, alors je mettrais tout ça au clair, j'ordonnerais quoi :smile: .

EDIT : Même avec le lien complet, ça ne marche pas :sad: ...
Autre idée :absurd: ?
Dernière édition le 13 Jan 2008 à 13:45
Darktib Message lu Posté le 13 Jan 2008 à 19:35 Bulle
Avatar de Darktib
Membre Ultime

Messages : 4017
GCPoints : 347288
 Je connais pas le xhtml (je trouve que c'est un langage horrible a lire^^) mais est_ce que tu peux récupere un event du style:

if (mouseOnGadget(lien)=1 )
{
showGreenButton(lien)
}
else
{
showRedButton(lien)
}

J'ai mis le code en pseudo - C, avec une espece de coloration syntaxique.
Dernière édition le 13 Jan 2008 à 19:37
stilobique Message lu Posté le 13 Jan 2008 à 19:47 Bulle
Avatar de stilobique
Newser

Messages : 2368
GCPoints : 834447
 Pour ton code test sa :
Code :
div#menu
{
      list-style-type:url('../../images/menu/puce%20rouge.png'); // Lien relatif par rapport à la feuille de style
}

div#menu li:hover
{
      list-style-type:url('../../images/menu/puce%20verte.png');
}


Se simple bout de code devrait marcher, si c'est pas le cas il faut trouver l'erreur, moi généralement pour voir si c'est le CSS qui ne convient pas je rajouter un truc du genre couleur de fond rouge ou couleur de police différente.

Sinon une coloration du code serait super méga géniale :proud:

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.
Venyux Message lu Posté le 16 Jan 2008 à 21:59 Bulle
Avatar de Venyux
Membre Novice

Messages : 119
GCPoints : 22323
Citation :

Je connais pas le xhtml (je trouve que c'est un langage horrible a lire^^) mais est_ce que tu peux récupere un event du style:

if (mouseOnGadget(lien)=1 )
{
showGreenButton(lien)
}
else
{
showRedButton(lien)
}

J'ai mis le code en pseudo - C, avec une espece de coloration syntaxique.


Je ne pense pas que cela soit possible en HTML, en CSS plutôt. ;)
Mod Message lu Posté le 16 Jan 2008 à 22:02 Bulle
Avatar de Mod
Webmaster

Messages : 4954
GCPoints : 2100823
 Ni XHTML, ni CSS, c'est plutôt du JavaScript qu'il faudrait là.

Tiens ça faisait longtemps que l'on ne t'avais pas vu, Venyux :happy: .
Let's make some tweets
Daru13 Message lu Posté le 16 Jan 2008 à 22:17 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
Citation :

Pour ton code test sa :

Code :
div#menu
{
list-style-type:url('../../images/menu/puce%20rouge.png'); // Lien relatif par rapport à la feuille de style
}

div#menu li:hover
{
list-style-type:url('../../images/menu/puce%20verte.png');
}

Se simple bout de code devrait marcher, si c'est pas le cas il faut trouver l'erreur, moi généralement pour voir si c'est le CSS qui ne convient pas je rajouter un truc du genre couleur de fond rouge ou couleur de police différente.

Sinon une coloration du code serait super méga géniale :proud:


Ai' essayé, mais aucun changements :confused: ...


Citation :

Ni XHTML, ni CSS, c'est plutôt du JavaScript qu'il faudrait là.


Sans doute. Je verrais alors ce détail plus tard :wink: .
stilobique Message lu Posté le 16 Jan 2008 à 22:18 Bulle
Avatar de stilobique
Newser

Messages : 2368
GCPoints : 834447
 Il faudrait le résultat en ligne pour voir mieux :proud:

Non, sa affiche la puce rouge ? Ou la verte ? Ou rien ? Tu avait un autre bout de code ?

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.
Daru13 Message lu Posté le 16 Jan 2008 à 22:20 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
 Ca laisse la puce rouge :wink: .
Pour voir le résultat en ligne ça va être difficile pour l'instant, fauit encore attendre un peu de temps :absurd: .
stilobique Message lu Posté le 16 Jan 2008 à 22:41 Bulle
Avatar de stilobique
Newser

Messages : 2368
GCPoints : 834447
 Je suis bête :absurd:

Tu a tester sous Mozilla Firefox ? Sous internet explorer l'utilisation du Hover ne fonctionne que pour les liens !

Sinon faut que je regarde dans mon code et je te dit sa... demain parce que la je suis fatigué :pathetic:

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.
Daru13 Message lu Posté le 16 Jan 2008 à 22:51 Bulle
Avatar de Daru13
Membre Elite

Messages : 2869
GCPoints : 95966
Citation :

Tu a tester sous Mozilla Firefox ?


N'as tu donc pas lu mon sondage, pauvre ignorant :proud: ?
Mozzilla bien entendu :tongue: .

Sinon ne vous cassez pas le c** pour ça, je verrais ça plus tard, je délaisse un peu en ce moment :wink: .
Yukishi Message lu Posté le 02 Mar 2008 à 15:11 Bulle
Avatar de Yukishi
Membre Novice

Messages : 73
GCPoints : 13950
 Avec du CSS c'est très bien possible, testé et approuvé :

Code :
<style type="text/css">
<!--
/* LEFT MENU STYLE */
#left_menu ul { list-style-type: none; padding: 4px; margin: 0px 0px 0px 10px;  }
#left_menu ul li a 
{ 
background: transparent url(http://zelda-no-densetsu.fr.nr/Images/zelda-003.gif) left no-repeat; 
padding-left: 15px;
text-align: left;
display: block;
font-family: arial; 
font-size: 11px;
text-decoration: none;
line-height: 20px;
color: #000;
}
#left_menu ul li a:hover { background: transparent url(http://zelda-no-densetsu.fr.nr/Images/13.gif) left no-repeat; color: #CC0000; font-weight: bold;}
#left_menu b { margin-left: 15px; }
-->
</style>
</head>

<body>
<div id="left_menu">
<ul>
  <li><a href="#"> &nbsp;&nbsp;Lien</a></li>
  <li><a href="#">&nbsp;&nbsp;Lien</a></li>
  <li><a href="#">&nbsp;&nbsp;Lien</a></li>
</ul>
</div>
</body>
</html>


Il ne reste plus qu'a le modifier pour qu'il te convienne.
Image

>> Reseau <<
GameCorp - Index des forums
Game Making
Programmation
Création de sites
A:hover - Changements de style de puce
Répondre
GameCorp - Site d'apprentissage et d'entraide à la création de jeux vidéo.
XHTML Valid 1.1 - Page générée en 0.048 secondes