[HTML/CSS]Afficher un pourcentage d'image

Version imprimable

16/08/2006, 16h41
Xzander

[HTML/CSS]Afficher un pourcentage d'image

Bonjour!

Je travaille présentement sur une page web qui doit afficher des produits. Chaque produit a un taux de popularité (0%-100%). Je voudrais que l'utilisateur la voit au moyen d'étoiles (5 étoiles =100% 0 étoiles = 0%).

Peut-on afficher un pourcentage d'une image? Autrement dit, je voudrais avoir une seule image sur mon disque dur. Si un produit a une cote de popularité de 77%, alors 77% de l'image s'affiche.

Merci pour toute idée qui me permettrait d'y arriver! :)
16/08/2006, 18h00
Candygirl

Tu pourrais par exemple avoir ton image de 5 étoiles en image de fond et tu joues avec la taille du conteneur pour n'en afficher qu'une partie.
16/08/2006, 18h13
Crayon

Si tu veux vraiment faire de la manipulation d'image tu devras utiliser autre chose que HTML/CSS, le PHP par exemple t'offre plusieurs possibilités.

J'avais déjà fait un système similaire en PHP, sauf que j'avais trois images, une étoile pleine, une étoile vide et l'autre à moitié vide/pleine. Par exemple si le chiffre étais 3.2 je mettais 3 images d'étoiles pleines avec la propriété alt="3.2/5", avec 3.44 je mettais 3 étoiles pleines et une moitié.

Sinon essai la méthode de Candygirl
16/08/2006, 19h19
Xzander

Merci!

1 pièce(s) jointe(s)

En reprennant l'idée de Crayon qui est d'ailleurs bien expliquée ici komodomedia.com

Voici le code d'exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<style type="text/css" title="currentStyle" media="screen">
		  <!--
	.rating{
		list-style:none;
		margin: 0px;
		padding:0px;
		width: 150px;
		height: 30px;
		position: relative;
		background: url(rating.jpg) top left repeat-x;		
	}
	.rating li {
		display:block;
		width:30px;
		height: 30px;
		text-decoration: none;
		text-indent: -9000px;
		z-index: 20;
		position: absolute;
		padding: 0px;
		margin:0px;
		/*\*/
		float: left;
		/* */
	}
	.rating .one{
		left: 0px;
	}
	.rating .two{
		left:30px;
	}
	.rating .three{
		left: 60px;
	}
	.rating .four{
		left: 90px;
	}
	.rating .five{
		left: 120px;
	}
	.rating li.current-rating{
		background: url(rating.jpg) left bottom;
		position: absolute;
		height: 30px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
	}		
		  -->
	 	</style>
	</head>
	<body>
		<ul class='rating'>
    	<li class='current-rating' style='width:75px;'> Currently 2.5/5 Stars.</li>
    	<li class='one'>1</li>
    	<li class='two'>2</li>
    	<li class='three'>3</li>
    	<li class='four'>4</li>
    	<li class='five'>5</li>
		</ul>		
	</body>
</html>

L'image est en pièce jointe.

L'idée est de faire apparaitre l'image répété dans un <li> absolue dont la taille est fixée en fonction de la note. En sachant que 100% correspond à 150px.
Dans l'exemple de mon code j'ai mis 50% et la taille est fixée grace à :

Code:

<li class='current-rating' style='width:75px;'>

Il ne te reste donc qu'à générer dynamiquement la largeur du <li> en fonction de la note :)