TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN

Gif o imagenes con enlaces, y su posicionamiento

Para explicar ésto creo que lo mejor es haciéndolo con unos ejemplos:

<div style='position:absolute;top:100px;right: 30px;'>
<script language='JavaScript' src='http://www.gifss.com/creaciones/calendarios/121/calendario.js'/></div>

El código anterior, es del calendario establecido en el blog en la parte superior derecha, donde:
la posición, que puede ser absolute o relative,   el calendario, está fijado en base al tamaño de la plantilla de nuestro blog, top:100px es respecto al margen superior, en el caso que fuese en el margen inferior en vez de top:100px pondriamos bottom:100px dónde 100px es la distancia en pixels de la zona donde se establezca.
right: 30px indica que está a 30 px del margen derecho.
http://www.gifss.com/creaciones/calendarios/121/calendario.js es la url donde está alojado el gif del calendario. Podríamos poner cualquier otra url de imagen, o gif o lo que nos interese.



Para el caso de la peonza se ha realizado un gif con fondo transparente el código que se ha insertado en el blog es el siguiente:

<a href='http://www.espiraledublogs.org/2011/archives/536' title='Comentar blog en V Premio Espiral'>

<img src="https://lh4.googleusercontent.com/_vzR5XFm52h8/TWd7uYLH-MI/AAAAAAAADMA/58v99MAaSe8/peonza.gif'' style='position: fixed; top:75px; left: 30px;width:80px; height:118px ; '/> </a>

href indica que va a redireccionar a otro sitio donde http://www.espiraledublogs.org/2011/archives/536 es el lugar donde se va cuando pinchamos en el gif de la peonza, title='Comentar blog en V Premio Espiral', es el mensaje que sale cuando, con el ratón nos posicionamos sin pinchar encima del gif y que nos dá una información. https://lh4.googleusercontent.com/_vzR5XFm52h8/TWd7uYLH-MI/AAAAAAAADMA/58v99MAaSe8/peonza.gif es la url donde se encuentra mi gif, sirve tambien para imagenes.
position: fixed; nos indica que la posicion está fija con respecto a la ventana del navegador y no de la plantilla, ver diferencia mientras el calentario al ir hacia abajo en el blog, se queda fijado en la parte superior del mismo, la peonza siempre esta en la misma altura de la pantalla.  
left: 30px nos indica que está a la izquierda y width:80px; height:118px , indican el ancho y el alto del gif en mi caso, o de la imagen que quisieramos poner.

Éstos códigos se pueden poner en una entrada, como Gadget html,  o bien en el cuerpo de la plantilla como es mi caso, y si fuese así, se deberá poner en configuración, Editar  HTML, el código se introduce antes de </body>
Si no nos queremos quedar ciegos Ctrl+ F y nos lo buscará automáticamente en la plantilla.

0 comentarios:

Entradas populares

Colaboro En:

textoalternativo textoalternativo textoalternativo

Atención

Los comentarios serán publicados una vez hayan sido moderados, disculpen las molestias.

Este blog es informativo y de caracter educativo, el administrador del mismo no se responsabiliza del uso fraudulento o ilegal que otras personas hagan del contenido publicado en él.

Así mismo si alguien cree que se vulnera algún derecho se ruega ponerlo en conocimiento para que se subsane de forma inmediata.