Habíamos visto hace unas semanas como instalar Snap en nuestra página. Pues bien, partir de ahora ya cuenta con soporte para varios idiomas con lo que si queremos actualizarlo deberemos volver a su página y repetir los pasos de instalación nuevamente.
Mostrando entradas con la etiqueta imagenes. Mostrar todas las entradas
Mostrando entradas con la etiqueta imagenes. Mostrar todas las entradas
viernes, 6 de abril de 2007
sábado, 3 de marzo de 2007
| [+/-] |
Hacer un Mapa de Imagen |
Lo que vamos a intentar hacer es crear una imagen en la que dependiendo en que zona pinchemos con el ratón nos lleve a diferentes sitios. Vamos, que lo que vamos a hacer es una imágen con varias zonas con diferentes vínculos. Una vez que tenemos una imagen y la hemos subido a alguna página tenemos que definir las áreas en las que la vamos a dividir. Los parámetros que definen un mapa de imagen son los siguientes:
<MAP>....</MAP> Entre estos tags meteremos todo el código del Mapa de Imagen y deberemos definir el area que vamos a definir como activable. Se pueden usar diferentes áreas, pero aquí vamos a ir a lo sencillo, que es el rectángulo. Para ello debemos poner <AREA shape=rect coords="x,y,x2,y2" donde X,Y son las coordenadas de la esquina superior izquierda y X2,Y2 las coordenadas de la esquina inferior derecha del rectángulo que definimos.
<MAP>....</MAP> Entre estos tags meteremos todo el código del Mapa de Imagen y deberemos definir el area que vamos a definir como activable. Se pueden usar diferentes áreas, pero aquí vamos a ir a lo sencillo, que es el rectángulo. Para ello debemos poner <AREA shape=rect coords="x,y,x2,y2" donde X,Y son las coordenadas de la esquina superior izquierda y X2,Y2 las coordenadas de la esquina inferior derecha del rectángulo que definimos.
Tal vez se vea mejor con un ejemplo:
El código usado para este ejemplo ha sido este:
<img src="http://img119.imageshack.us/img119/4982/sinttulo1gw5.jpg" usemap="#ejemplo" height="50" width="300" border=0/>
<map name="ejemplo">
<area shape="rect" coords="0,0,94,50" href="http://www.google.es">
<area shape="rect" coords="96,0,200,50" href="http://www.yahoo.es">
<area shape="rect" coords="202,0,298,49" href="http://www.altavista.com"></map>
Si quereis saber más sobre Mapa de Imágenes o ver como hacer diferentes áreas (círculos, polígonos) pasaros por esta página: Webestilo
domingo, 25 de febrero de 2007
| [+/-] |
Emoticonos en el Blog |
Una manera sencilla de darle un poco de vida a tus posts es la inclusión de emoticos, o smilies... Existen diferentes maneras de hacerlo, todas ellas más o menos complicadas, pero sin duda, esta que os voy a comentar es a prueba de tontos... sin ofender... que yo también busco siempre cosas sencillas. Este truco nos lo ofrece The Last Word, uno de los mejores Blogs de Hacks que podeis encontrar.
Lo único que debéis hacer es copiar el código que os ofrecen en la página y pegarlo justo encima del cierre de la etiqueta HEAD del blog como ya hemos hecho más veces.
A partir de este momento, el script se encargará de buscar en vuestros posts los caracteres que sustituirá por los emoticonos.
Estos son las combinaciones que reconoce el script:
) o :-)
:( o :-(
:P o :-P
:D o :-D
:$ o :-$
;) o ;-)
sábado, 24 de febrero de 2007
| [+/-] |
Ponle imágenes a tus vínculos |
Un servicio con el que podremos hacer que los vínculos y enlaces de nuestro blog se vean en una pequeña ventana al pasar el ratón sobre ellos. No es un truco o widget propiamente dicho, sino un servicio externo que podemos poner en nuestro blog de manera muy sencilla. El servicio se llama Snap y es algo bastante popular en la blogosfera. Cuenta con bastantes detractores, pero al igual que es fácil ponerlo, es fácil quitarlo con lo que no cuesta nada probarlo. Lo único que tendremos que hacer es pasarnos por la página de Snap en la que mediante unos pasos nos proporcionarán un código que deberemos poner en nuestra plantilla. Desde la propia página nos ofrecen un sencillo manual de instalación, pero resumiendolo todo a un sólo paso, se trata de pegar el código justo encima del cierre de la etiqueta HEAD de nuestra plantilla.
<head>
.
.
.
.
.
Insertar Código
</head>
sábado, 3 de febrero de 2007
| [+/-] |
Cambiar la imagen de fondo |
Esto no es que pueda considerarse un truco muy complejo, pero a más de uno le puede venir bien para personalizar el blog.
Vamos a la plantilla y buscamos el siguiente código:
Vamos a la plantilla y buscamos el siguiente código:
body {
background:$bgcolor;
Y lo sustituimos por este otro
body {
background:$bgcolor url("URL DE LA IMAGEN QUE QUIERAS DE FONDO");
sencillo, eh?
;)
jueves, 1 de febrero de 2007
| [+/-] |
Imágenes aleatorias en la cabecera |
En relidad este pequeño truco vale tanto para imágenes como texto, pero normalmente es el tema de poder situar una cabecera aleatoria para el blog para lo que más se suele usar este tipo de scripts. Este truco consta de dos partes. Un primer script que colocaremos por ejemplo en la cabecera y justo debajo la segunda parte del código.
Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:
Evidentemente tendremos que tener al menos un par de imágenes preparadas que tendremos que subir a la red. La primera vez que usé este truco usé a blogger como host de las imágenes subiéndolas en un post y luego copiando el código, pero no se por qué, ahora con la nueva versión de bloger eso no funciona así que las podremos subir a imageshack o cualquier otro servicio de hospedaje de imágenes.
Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:
<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>Eliminamos esa línea con lo que ya no se mostrará el título del blog en la cabecera. Ahora es el momento de ir a la página de diseño e introducir en la cabecera este elemento como HTML/JavaScript:
<!-- CODIGO DEL SCRIPT DE IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<!-- FIN DEL SCRIPT DE IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<!-- FIN DEL SCRIPT DE IMAGEN ALEATORIA -->
Guardamos los cambios y añadimos la segunda parte del código de la misma manera, pero asegurándonos de que quede justo debajo del anterior.
<!-- PARTE II: SCRIPT IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,3);
if (randHdr == 1) {
document.write('<img src="URL IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL IMAGEN 3">')
}
</script>
<!-- PARTE II: FIN DE SCRIPT PARA IMAGEN ALEATORIA -->
Sustituímos las zonas coloreadas de rojo por la direccón de la imagen que hemos subido y voilá. Ya tenemos una cabecera con imagen aleatoria en el blog.
Si queremos añadir más imágenes tenemos que ir añadiendo líneas de código para cada una de ellas y poner el número total de ellas en el valor randRange(1,nºtotal de imágenes)
Suscribirse a:
Entradas (Atom)
Cargando...
