Primero de todo os voy a explicar cuales son los dos codigos
El primero es poner una imagen no muy grande y que al pasar el raton por encima se agrande. Por ejemplo las imagenes de esta pagina
www.humorjona.es.tl (mi pagina
). Como vereis al pasar la imagen por encima de la imagen se agranda y encima de buena calidad.
El segundo truco es lo que veis debajo de la imagen. Como vereis es un sistema de votacion. Probadlo si quereis. Ademas de el sistema de votacion vereis que tambien pone coments. En coments podreis poner, como su nombre indica, comentarios sin estar registrados.
Empezemos explicando el primer truco. es bastante sencillo haci k empezemos.
1. Vamos a paginawebgratis.es. Luego vamos a editar diseno>Configuraciones avanzadas>Texto por debajo de la pagina.
2. Alli pegamos este codigo. Esto solo lo haremos una vez en tu pagina.
<style type='text/css'>
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail span{ /*CSS for enlarged image*/position: absolute;background-color: black;padding: 5px;left: -100px;border: 1px dashed gray;visibility: hidden;color: #FFFF00;text-decoration: none;}
.thumbnail span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/visibility: visible; top: 0; left: 10px; /*position where enlarged image should offset horizontally */}
</style>
3.Buscamos una imagen que no servira como la imagen grande que se abrira al pasar el raton por encima de la imagen.
4. Cuando la encontremos pegamos este codigo en Controlar paginas>La pagina que queramos> Tocamos Fuente HTML>Lo pegamos deonde queramos
<a class="thumbnail" href="#thumb"><img src="
URL IMAGEN" width="
100px" height="
150px" border="0" /><span><img src="
URL IMAGEN" /><br />
Nombre de tu Imagen</span></a>
5. Modificamos lo siguiente
En el codigo anterior cambiamos lo que esta en verde por el tama;o que queramos que tenga la imagen peque;a. todo esto en pixeles
El codigo que esta en rojo por la direccion en la que se encuentra la imagen. Para saber esto solo tienes que tocar con el boton derecho sobre la imagen y luego seleccionar Copiar la ruta de la imagen. Luego lo copiamos donde os dije. Si la imagen la haz subido tu a paginas como imageshark, solo copia donde pone Direct enlace o algo haci.
El codigo en azul por el titulo de la imagen. Como habras visto en mi pagina al pasar por encima de la imagen peque;a te sale la imagen grande y debajo de esta una frase. Pues esa frase es la que cambiaremos con esto.
Ya esta. Una cosa importante. Cuando acabemos todo esto y desactivemos el boton de fuente html nos apareceran dos imagenes, una peque;a al lado o debajo de la grande. No os precuupeis por eso.
El segundo codigo es el de comentarios y votaciones. Este codigo ya lo publique en otro post haci k en vez de copiarlo os doy la direccion pero todas las preguntas, comentarios o dudas hacedlas aqui k no quiero ir a dos sitios
La pagina es esta
http://www.paginawebgratis.es/forum/viewtopic.php?t=10056&highlight=
No olvides responder a la encuesta. Gracias.
Si quieres reirte un rato visita mi web
www.humorjona.es.tl
Escribid vuestras respuestas e intentare respondeosla
PD. No me funciona ni la letra que va despues de la n en espa;ol, esa que tiene esa coasa rara arriba ni tampoco la mayoria de los signos ya que se me han descolocado no se como.
[/img]http://img265.imageshack.us/img265/7842/sinttulo1tm6.jpg[img]
). Como vereis al pasar la imagen por encima de la imagen se agranda y encima de buena calidad.
