Comment fixer le nombre d'étoiles par défaut ?

O
ortolojf
WRInaute accro
Bonjour

Je suis en train d'adapter mon système de notation à étoiles, vers un système sans Javascript, dans le but de convertir mon site au format AMP.

J'ai trouvé le code ci-dessous ( que j'ai un peu arrangé ), dans le site : https://www.creativejuiz.fr/blog/tutoriels/systeme-notation-quelques-lignes-css

Mais, je ne sais pas comment afficher le nombre d'étoiles par défaut, avec le code html.

Comment faire ?

Je vais me pencher sur les différents sélecteurs :active , :visited, : hover , : focus , :link.

Merci beaucoup de votre aide.

Respectueusement.



Code: 
<html>
<head>
        <title>Notation étoile</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="/note.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="rating">
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=7"; ?>" title="7 étoiles sur 7"></a>
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=6"; ?>" title="6 étoiles sur 7"></a>
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=5"; ?>" title="5 étoiles sur 7"></a>
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=4"; ?>" title="4 étoiles sur 7"></a>
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=3"; ?>" title="3 étoiles sur 7"></a>
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=2"; ?>" title="2 étoiles sur 7"></a>
        <a href="<?php echo $_SERVER['PHP_SELF'] . "?star=1"; ?>" title="1 étoiles sur 7"></a>
</div>
</body>
</html>


Code: 
div.rating {
   text-align:center;
   width:140px;
   margin-left: auto;
   margin-right: auto;
   padding:0;
   border:0;
}

div.rating a {
   float:right;
   color: #aaa;
   text-decoration: none;
   font-size: 3em;
   width:20px;
   height:20px;
   transition: color .4s;
   background:url(http://localhost/images/star_white.gif);
   background-size:contain;
}

div.rating a:hover,
div.rating a:focus,
div.rating a:hover ~ a,
div.rating a:focus ~ a {
   background:url(http://localhost/images/star_yellow.gif);
   background-size:contain;
}
 
E
elji
WRInaute impliqué
Bravo pour ce titre poétique !

Je comprend mal la question pour le nombre d'étoiles par défaut. Elles sont au départ toutes blanches, et quand on clique, un certain nombre deviennent jaunes, mais le nombre d'étoiles ne varie pas.
 
O
ortolojf
WRInaute accro
elji a dit:
Bravo pour ce titre poétique !

Je comprend mal la question pour le nombre d'étoiles par défaut. Elles sont au départ toutes blanches, et quand on clique, un certain nombre deviennent jaunes, mais le nombre d'étoiles ne varie pas.
Cliquez pour agrandir...


Bonjour elji

Je vous demande pardon, je me suis mal exprimé.

Supposons que la page ait une moyenne de votes de 4 / 7 étoiles.

Je voudrais qu'au lieu d'afficher 7 étoiles blanches par défaut, il s'affiche 4 étoiles jaunes et 3 étoiles blanches au moment où la page s'affiche.

Est-ce que je peux faire celà en html ?

C'est possible avec une classe ad hoc et le fichier background star_yellow.gif , le problème est que cette/ces étoile(s) ne seraient plus sensible au :hover ou :focus.

Même chose avec une classe inline : style="background:url(http://localhost/images/yellow.gif);"

Y a-t-il un hack possible pour afficher par défaut 4 étoiles jaunes+ 3 blanches ( par exemple ) ?

Et puis aussi ( évidemment ), le script est en php, donc fixer ce nombre avec une variable ( 2 au lieu de 4 par exemple ).

Et... Que le comportement de l'interface des étoiles soit le même.

Le problème, semblerait de simuler le :hover ou le :focus , mais je ne veux pas de javascript.

Comment faire ?

Merci beaucoup.

Respectueusement.
 
O
ortolojf
WRInaute accro
Koxin-L.fr a dit:
ortolojf a dit:
Mais, je ne sais pas comment afficher le nombre d'étoiles par défaut, avec le code html.
Cliquez pour agrandir...
Ca correspond à quoi ces étoiles par défauts ?
Le résultats ?
Cliquez pour agrandir...


Il y a 7 étoiles, la note est fixée par l'utilisateur qui clique sur la ième étoile, i est la note attribuée.

Dans ce cas, il y a i étoiles jaunes et ( 7 - i ) étoiles blanches avant le clic.

Le i par défaut, serait la moyenne des notes données par les utilisateurs précédents.

Actuellement, le i par défaut est 0.

Le script est en php, toute l'interface bdd est déjà au point.

C'est seulement cette interface graphique qui gêne.

Et il ne faut pas de javascript.

Merci beaucoup

Respectueusement.
 
O
ortolojf
WRInaute accro
Problème résolu.

Voci le nouveau code :


Code: 
<html>
    <head>
        <title>Notation étoile</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="/star_rating.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <ul class='star-rating'>
            <li class="current-rating" style="width:110px;"> Currently 5.5/7 Stars.</li>
            <li><a href='#' title='1 star out of 5' class='one-star'>1</a></li>
            <li><a href='#' title='2 stars out of 5' class='two-stars'>2</a></li>
            <li><a href='#' title='3 stars out of 5' class='three-stars'>3</a></li>
            <li><a href='#' title='4 stars out of 5' class='four-stars'>4</a></li>
            <li><a href='#' title='5 stars out of 5' class='five-stars'>5</a></li>
            <li><a href='#' title='5 stars out of 5' class='six-stars'>5</a></li>
            <li><a href='#' title='5 stars out of 5' class='seven-stars'>5</a></li>
        </ul>
    </body>
</html>


Code: 
        /*             styles for the star rater                */
        .star-rating{
                list-style:none;
                margin-left:auto;
                margin-right:auto;
                padding:0px;
                width: 140px;
                height: 20px;
                position: relative;
                background: url(images/star_white.gif) top left repeat-x;
        }
        .star-rating li{
                padding:0px;
                margin:0px;
                height:20px;
                width: 20px;
                /*\*/
                float: left;
                /* */
        }
        .star-rating li a{
                display:block;
                width:20px;
                height: 20px;
                line-height:20px;
                text-decoration: none;
                text-indent: -9000px;
                z-index: 20;
                position: absolute;
                padding: 0px;
                overflow:hidden;
        }
        .star-rating li a:hover{
                background: url(images/star_yellow.gif) left center;
                z-index: 2;
                left: 0px;
                border:none;
        }
        .star-rating a.one-star{
                left: 0px;
        }
        .star-rating a.one-star:hover{
                width:20px;
        }
        .star-rating a.two-stars{
                left:20px;
        }
        .star-rating a.two-stars:hover{
                width: 40px;
        }
        .star-rating a.three-stars{
                left: 40px;
        }
        .star-rating a.three-stars:hover{
                width: 60px;
        }
        .star-rating a.four-stars{
                left: 60px;
        } 
        .star-rating a.four-stars:hover{
                width: 80px;
        }
        .star-rating a.five-stars{
                left: 80px;
        }
        .star-rating a.five-stars:hover{
                width: 100px;
        }
        .star-rating a.six-stars{
                width: 100px;
        }
        .star-rating a.six-stars:hover{
                width: 120px;
        }
        .star-rating a.seven-stars{
                width: 120px;
        }
        .star-rating a.seven-stars:hover{
                width: 140px;
        }
        .star-rating li.current-rating{
                background: url(images/star_green.gif) left bottom;
                position: absolute;
                height: 20px;
                display: block;
                text-indent: -9000px;
                z-index: 1;
        }
        /* remove halo effect in firefox   */
        a:active{
             outline: none;
        }


Le style de la classe current-rating, me permet sans difficulté de de spécifier ( même avec une valeur fractionnaire ;) ), la note moyenne.

Super de super.

Merci beaucoup de vos réponses.

Respectueusement.
 
spout
spout
WRInaute accro
ortolojf a dit:
Code: 
<ul class='star-rating'>
            <li class="current-rating" style="width:110px;"> Currently 5.5/7 Stars.</li>
            <li><a href='#' title='1 star out of 5' class='one-star'>1</a></li>
            <li><a href='#' title='2 stars out of 5' class='two-stars'>2</a></li>
            <li><a href='#' title='3 stars out of 5' class='three-stars'>3</a></li>
            <li><a href='#' title='4 stars out of 5' class='four-stars'>4</a></li>
            <li><a href='#' title='5 stars out of 5' class='five-stars'>5</a></li>
            <li><a href='#' title='5 stars out of 5' class='six-stars'>5</a></li>
            <li><a href='#' title='5 stars out of 5' class='seven-stars'>5</a></li>
        </ul>
Cliquez pour agrandir...
Il y a un truc en PHP qui s'appelle "for" tu devrais tester ça rox.
 
O
ortolojf
WRInaute accro
Bonjour spout ;)

C'est sûr.
Ce n'est qu'un squelette.

Cà s'annonce bien pour me passer de javascript à terme.

Après mon interface de notation, dont je vais récupérer le côté php/Mysql, je n'ai plus à traiter, que le script tarteaucitron ( déjà converti mais pas entièrement par mes soins de javascript à php ), et puis l'affichage de mes stats de courses et aussi des liens des menus en haut et bas des pages.

Après, théoriquement plus de javascript si j'adopte le format AMP pour les ads ( seulement les scripts autorisés par la norme AMP ).

Les ads, c'est-à-dire : Twitter, Facebook, Google+.

Tout ceci, seulement pour les mobiles.

Pour la mise au point sur mon desktop, savez-vous si Chrome version desktop, supporte le format AMP ?

Merci beaucoup.
 
O
ortolojf
WRInaute accro
Bonjour spout

Voilà, j'ai ce code à l'essai sur mon ordinateur local :

Le problème, est qu'il semble impossible de cliquer sur la dernière étoile.

Les titres s'affichent normalement, mais un clic sur la dernière étoile ( 7 ), ne charge rien.



Code HTML :

Code: 
<div class="centered">

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
<br />
<div class="sous_titre" itemprop="votes">454</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">4 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<ul class="star-rating">
    <li class="current-rating" style="width:81.6px;"></li>
    <li><a href="http://localhost/?star=1" title='1 star out of 7' class='one-star'>1</a></li>
    <li><a href="http://localhost/?star=2" title='2 stars out of 7' class='two-stars'>2</a></li>
    <li><a href="http://localhost/?star=3" title='3 stars out of 7' class='three-stars'>3</a></li>
    <li><a href="http://localhost/?star=4" title='4 stars out of 7' class='four-stars'>4</a></li>
    <li><a href="http://localhost/?star=5" title='5 stars out of 7' class='five-stars'>5</a></li>
    <li><a href="http://localhost/?star=6" title='6 stars out of 7' class='six-stars'>6</a></li>
    <li><a href="http://localhost/?star=7" title='7 stars out of 7' class='seven-stars'>7</a></li>
</ul>
<meta itemprop="average" content="4" /><meta itemprop="best" content="7" /><meta itemprop="worst" content="1" /></div>
&nbsp;&nbsp;<div id="message">
Votre vote : 2 &eacute;toiles<br />
D&eacute;lai : 120 jours</div>
</div>

</div>
<br />


Code css :

Code: 
        /*             styles for the star rater                */
        .star-rating{
                list-style:none;
                margin-left:auto;
                margin-right:auto;
                padding:0px;
                width: 140px;
                height: 20px;
                position: relative;
                background: url(images/star_white.gif) top left repeat-x;
        }
        .star-rating li{
                padding:0px;
                margin:0px;
                height:20px;
                width: 20px;
                /*\*/
                float: left;
                /* */
        }
        .star-rating li a{
                display:block;
                width:20px;
                height: 20px;
                line-height:20px;
                text-decoration: none;
                text-indent: -9000px;
                z-index: 20;
                position: absolute;
                padding: 0px;
                overflow:hidden;
        }
        .star-rating li a:hover{
                background: url(images/star_yellow.gif) left center;
                z-index: 2;
                left: 0px;
                border:none;
        }
        .star-rating a.one-star{
                left: 0px;
        }
        .star-rating a.one-star:hover{
                width:20px;
        }
        .star-rating a.two-stars{
                left:20px;
        }
        .star-rating a.two-stars:hover{
                width: 40px;
        }
        .star-rating a.three-stars{
                left: 40px;
        }
        .star-rating a.three-stars:hover{
                width: 60px;
        }
        .star-rating a.four-stars{
                left: 60px;
        } 
        .star-rating a.four-stars:hover{
                width: 80px;
        }
        .star-rating a.five-stars{
                left: 80px;
        }
        .star-rating a.five-stars:hover{
                width: 100px;
        }
        .star-rating a.six-stars{
                width: 100px;
        }
        .star-rating a.six-stars:hover{
                width: 120px;
        }
        .star-rating a.seven-stars{
                width: 120px;
        }
        .star-rating a.seven-stars:hover{
                width: 140px;
        }
        .star-rating li.current-rating{
                background: url(images/star_green.gif) left bottom;
                position: absolute;
                height: 20px;
                display: block;
                text-indent: -9000px;
                z-index: 1;
        }
        /* remove halo effect in firefox   */
        a:active{
             outline: none;
        }

Comment résoudre ce problème ?

Merci de me donner ton avis.

Respectueusement.
 
Vous devez vous connecter ou vous inscrire pour répondre ici.

➡️ Offre MyRankingMetrics ⬅️

pré-audit SEO gratuit avec RM Tech (+ avis d'expert)
coaching offert aux clients (avec Olivier Duffez ou Fabien Faceries)

Voir les détails ici

coaching SEO
Discussions similaires
C
Comment fixer le prix d'un article à publier sur mon site ?
Réponses
2
Affichages
3K
chris09
C
S
Fixer des vignettes
Réponses
4
Affichages
2K
Séverine.r
S
S
fixer des ads dans les articles de blogger
Réponses
4
Affichages
2K
spectre123
S
B
Comment fixer le CPC max
Réponses
5
Affichages
5K
jcaron
J
M
yoyo sur une requête important, comment fixer tout cela!!!
Réponses
2
Affichages
1K
mipc
M
C
[CSS] Fixer un div en float?
Réponses
7
Affichages
12K
Hearty
H
M
Fixer une hauteur minimale à une div
Réponses
5
Affichages
4K
Meeuuuhhh
M
F
Différence de nombre de visiteurs entre Analytics et Post Views Counter
Réponses
5
Affichages
1K
FleurDePrintemps
F
A
Nombre total de clics différent des clics générés sur les requêtes
Réponses
3
Affichages
937
cleatis
cleatis
G
Suivi du nombre de clics sur un CTA
Réponses
1
Affichages
4K
spout
spout
nicolo
Impact très grand nombre de nouvelles pages lancées
Réponses
2
Affichages
1K
Just Aware
J
Z
Nombre de mots clés
Réponses
2
Affichages
3K
Zulu176
Z
K
Nombre de mots pour blog littéraire ?
Réponses
2
Affichages
1K
kosh5
K
E
Rapport pages rédactionnelles et nombre total de pages
Réponses
2
Affichages
1K
elji
E
haionara
Comment connaitre le nombre total de visiteurs sur GA4?
Réponses
1
Affichages
2K
Madrileño
Madrileño
M
Nombre de backlinks par site
Réponses
3
Affichages
2K
romain11
romain11
A
SEO : nombre de caractères max sur une page ?
Réponses
7
Affichages
2K
Fourdraine
F
P
Connaitre le nombre de visiteurs uniques
Réponses
3
Affichages
3K
pktrix
P
V
Astuce Nombre de caractères optimale pour nom de de domaine
Réponses
7
Affichages
1K
Marie-Aude
Marie-Aude
K
Nombre de mots maximum ?
Réponses
4
Affichages
2K
kosh-a
K
Haut