Reglas del Foro

Please read our Guide to Making Ozzu Tutorials if you would like to submit your own tutorials.
Volver al Tutoriales de HTML

TUTORIAL: 5-Star Ratings Con 1 Imagen y CSS

  • joebert
  • Orange Lover
  • Genius
  • Avatar de Usuario
  • Registrado: Feb 10, 2004
  • Mensajes: 12467
  • Loc: FL
  • Status: Offline

Nota Agosto 27th, 2009, 8:49 pm

Introducción


Usted no necesita más de una imagen para tener 0-5 grados de la estrella.
Todo lo que necesitas es una imagen única, con dos estados diferentes, algunos [sigla = hojas de estilo en cascada: 26stbdfv] CSS [/acronym] , Y la misma lógica que debería usar para la configuración de multi-imagen basado en calificaciones en el backend.

Clasificación de la imagen


Ive adjunto una imagen con algunas estrellas simple en dos estados, que albergará 0-5 estrellas. Las dimensiones del bloque de clasificación se 100x20 que las obras a 20px por 20px estrellas y hace que la imagen de 200x20.

Attachments:
stars.png

There is no copyright on this image, I made it specially for this tutorial and you are free to use it for any purpose other than assigning ranks to an army of mutant beavers.



Clases CSS


Ahora bien, como puntuaciones son en general algo que será utilizada numerosas veces en la misma página, queremos utilizar las clases de nuestra [= sigla hojas de estilo en cascada: 26stbdfv] CSS [/acronym] selectores. A continuación tengo una base de "estrellas" de clase con los atributos comunes de cada categoría, y 5 sub-clases que me dan un total de 6 valoraciones diferentes. (0-5)

Simplemente cambia el fondo la posición de la imagen a la izquierda, que pone una de las estrellas fuera del estado fuera de la vista de la izquierda y trae en una de las estrellas de estado en vista de la derecha.

CSS Código: [ Download ] [ Select ]
.stars, .stars0
{
   background: transparent url("stars.png") no-repeat top left;
   width:100px;
   height:20px;
   float:left;
   display:block;
   margin: 5px;
}
.stars1 {background-position:-20px;}
.stars2 {background-position:-40px;}
.stars3 {background-position:-60px;}
.stars4 {background-position:-80px;}
.stars5 {background-position:-100px;}
  1. .stars, .stars0
  2. {
  3.    background: transparent url("stars.png") no-repeat top left;
  4.    width:100px;
  5.    height:20px;
  6.    float:left;
  7.    display:block;
  8.    margin: 5px;
  9. }
  10. .stars1 {background-position:-20px;}
  11. .stars2 {background-position:-40px;}
  12. .stars3 {background-position:-60px;}
  13. .stars4 {background-position:-80px;}
  14. .stars5 {background-position:-100px;}


Con su configuración como que todo lo que necesita tener el backend hacer es salir un número en el = [sigla Hyper Text Markup Language: 26stbdfv] HTML [/acronym] utilizando [sigla = Hypertext PreProcessor: 26stbdfv] PHP [/acronym] / [sigla = Active Server Pages: 26stbdfv] ASP [/acronym] / [sigla = ColdFusion Markup Language: 26stbdfv] CFML [/acronym] / etc es necesario sin embargo para muchas estrellas.

Elemento HTML


Éstos son ejemplos de lo que cada uno estrellas [sigla = Hyper Text Markup Language: 26stbdfv] HTML [/acronym] Parece que cuando se utilicen en su.

HTML Código: [ Download ] [ Select ]
<div class="stars stars0"></div>
<div class="stars stars1"></div>
<div class="stars stars2"></div>
<div class="stars stars3"></div>
<div class="stars stars4"></div>
<div class="stars stars5"></div>
  1. <div class="stars stars0"></div>
  2. <div class="stars stars1"></div>
  3. <div class="stars stars2"></div>
  4. <div class="stars stars3"></div>
  5. <div class="stars stars4"></div>
  6. <div class="stars stars5"></div>


Podría salirse con la suya no usar un stars0 clase y sólo con la clase base de estrellas cuando no hay estrellas para la calificación, pero después de que el cero de clase simplifica la operación de back-end de modo que sólo tiene salida a un número.

PHP Código: [ Download ] [ Select ]
<div class="stars stars<?php echo round($rating); ?>"></div>


Conclusión


Ahí lo tienes. 5 estrellas, una imagen. Un poco más [sigla = hojas de estilo en cascada: 26stbdfv] CSS [/acronym] necesaria de lo normal <img> solución basada, pero una quinta parte de las imágenes y las posibles conexiones con el servidor y [= sigla Hyper Text Markup Language: 26stbdfv] HTML [/acronym] que realmente no es más complicado.
Patience.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 27th, 2009, 8:49 pm

  • Bogey
  • PHP Ninja
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 7335
  • Loc: Imagination
  • Status: Offline

Nota Agosto 27th, 2009, 8:55 pm

Este es un tutorial muy útil...gracias joebert :)
Learn PHP

Apocalyptica - I Don't Care (Listen to this most awesome song ever!)

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 2 mensajes
  • Moderador: Tutorial Writers
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 3 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2010 Unmelted, LLC. Impulsado por phpBB © 2010 phpBB Group.