Problème : list-style-image [Résolu/Fermé]

Signaler
Messages postés
487
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 février 2021
-
Messages postés
487
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 février 2021
-
Bonsoir,

Entre autres images, j'en ai trois qui intéressent la question que je pose :
- une petite flèche bleue (en forme de triangle) : fleche.png
- une autre même taille mais verte : flechev.png
- une autre même taille mais grise : flecheg.png

fleche.png (bleue) est celle que j'utilise pour "pointer" les éléments de liste à différents endroits d'un site. Ça, c'est bon. Une liste particulière (récapitulative) recense les différents éléments possibles dont certains sont obligatoires (je voudrais la flèche verte) et d'autres optionnels (la grise).

j'ai essayé ça :

<style type="text/css">
...
#recap ul {list-style-image: url(/img/fleche.png);}
...
</style>
</head>

<body>
...
<div id="recap">
<script language="javascript" type="text/javascript">
document.recap.ul.list-style-image = "url(/img/flechev.png)";
</script>
<ul>
<li> texte...
<li> texte...
<li> texte...
<li> texte...
<li> texte...
<script language="javascript" type="text/javascript">
document.recap.ul.list-style-image = "url(/img/flecheg.png)";
</script>
<li> texte...
<li> texte...
<li> texte...
<li> texte...
<li> texte...
<li> texte...
</ul>
</div>

Et ça ne marche pas. A la place de javascript, j'ai essayé de redéfinir les styles avec
<style type="text/css">
#recap ul {list-style-image: url(/img/flechev.png);}
</style>

Ça ne marche pas non plus. Je suis sûr et certain de faire une erreur mais je ne sais pas comment je pourrais faire alors j'essaye en vain différents trucs.

Quelqu'un a-t-il une idée ?



3 réponses

Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
439
Salut,

La façon de procéder a été donnée dans la première réponse : il faut plusieurs classes. C'est la base du css.


<style>
li { list-style-type: disc; }
li.obligatoire { list-style-type: circle; }
li.optionnel { list-style-type: square; }
</style>

<div id="recap">
<ul>
<li> 0. texte... </li>
<li class="obligatoire"> 1. texte... </li>
<li class="optionnel"> 2. texte... </li>
<li class="optionnel"> 3. texte... </li>
</ul>
</div>
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
487
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 février 2021
109
Merci beaucoup, ça c'est une réponse claire.
J'appliquais les styles à UL et non à LI.
Merci. Question résolue.
Bonjour,
si vous voulez plusieurs types de flèches il faut plusieurs classes.
Je voit aucunement l'intérêt de votre javascript (à moins de faire quelque chose qui doit réagir en fonction d'un événement, dans ce cas il faut mettre cet événement ainsi que son listener) et de toute façon votre syntaxe est fausse: vous devez cibler un élément par son id(getElementById()) ou plusieurs par son nom de balise(getElementByTagName()).


Voici dess exemples:
http://www.coursweb.ch/javascript/dom-css.html

Mais bon si'l ne s'agit pas d'événementiel faites seulement plusieurs classes css ou id, éventuellement vous pouvez utiliser l'héritage en CSS pour avoir une classe parent et changer uniquement le curseur selon l'affichage désiré et tenant compte de l'ordre/organisation des balises.
Utilisateur anonyme
+10
Messages postés
487
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 février 2021
109
Merci pour votre réponse et, même après avoir lu la page correspondant au lien que vous m'avez indiqué, je ne vois toujours pas comment procéder.

Le code ci-dessous fonctionne normalement dans les autres listes du site. Or, le style s'applique à la balise UL et ce style va être rendu visible lors de l'affichage des LI. Là, plusieurs LI vont être affichées avec la flechev.png (admettons de 0 à 3 pour les éléments obligatoires) et pour les autres (de 4 à 9), il faudrait que ce soit flecheg.png (grise) qui soit utilisée pour désigner les éléments optionnels. Mais au moment où l'on passe du vert au gris, la balise UL est déjà définie et est en cours d'utilisation puisqu'on n'a pas encore, à ce niveau, rencontré de /UL.

C'est la raison pour laquelle j'avais pensé qu'à tel moment (le moment du changement de couleur) il fallait utiliser javascript pour modifier le style en cours d'utilisation afin que le reste de la liste utilise la même définition et les mêmes attributs (dont celui qui vient d'être nouvellement modifié : en gris).

Alors quant à la syntaxe, ce n'est pas un scoop qu'elle soit fausse, sinon je n'aurais pas dit que j'étais "sûr et certain de faire une erreur" et que mes essais étaient vains. Et je ne vois toujours pas, même en définissant plusieurs styles, comment déclencher le changement de couleur au sein d'une même balise UL ... /UL.

<style type="text/css">
#recap ul {list-style-image: url(/img/flechev.png);}
</style>
</head>

<body>
...
<div id="recap">
<ul>
<li> 0. texte...
<li> 1. texte...
<li> 2. texte...
<li> 3. texte...
<li> 4. texte...
<li> 5. texte...
<li> 6. texte...
<li> 7. texte...
<li> 8. texte...
<li> 9. texte...
</ul>
</div>