Búsqueda en el Foro:
Buscar



Os han gustado
Me encantaron los dos y los utilizare en mi web
  28%
[ 2 ]
Ya me sabia los dos o uno de ellos pero bien igualmente
  14%
[ 1 ]
No encuentro lo interasante
  14%
[ 1 ]
Me gusto uno
  14%
[ 1 ]
No me funcionan. Voy a preguntarte ahora.
  28%
[ 2 ]
Total de votos : 7

Autor Mensaje
Mensaje12-09-2008, 22:33 (UTC)    
Título del mensaje: [Codigo HTML] MUY MUY INTERESANTES

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]


Ultima edición por humorjona el Lun Oct 13, 2008 2:52 pm; editado 4 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group