Páginas

sábado, 18 de junio de 2011

El panel de Acceso Rapido: como lo hice

Habreis visto que he añadido en la columna izquierda del blog  este panel de Acceso Rápido. Si pulsais sobre los iconos os llevara a las distintas paginas web.

¿como lo hice?

Se trata de un mapa en html, donde definimos una imagen de fondo, y zonas donde al pulsar ejecutara el link.

Con gimp hice la composición de logos y con la explicación que encontré en el blog http://www.portalnet.cl/comunidad/software-y-windows.499/309322-tutorial-hacer-un-mapa-de-imagen-con-gimp.html, cree el código en html del mapa. (opciones Filtros/Web/Mapa de imagen  de gimp)

Es muy sencillo de hacer y muy práctico.

También he incluido un pequeño codigo para el cursor que hace que aparezca un icono de pingüino, pero solo sale en MS-Explorer...

Os dejo el codigo en html con generado:
<style type="text/css">
body, a, a:hover {cursor: url(http://cursores.org/cursores/animal01.ani),progress;}
</style>
<img src="http://manualjsb.googlecode.com/files/accesos%20r%C3%A1pidos%20jsbsan%20google%20gmail%20hotmail%20facebook%20hosting.jpg" width="200" height="600" border="0" usemap="#map" target="_blank"/>

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:uno -->
<area shape="rect" coords="1,29,200,116" alt="Buscador Google + Refranes" href="http://jsbsan.tk/refranero/refranero2/refranero.php" target="_blank"/>
<area shape="rect" coords="0,118,195,205" alt="Correo Electronico Gmail" href="https://www.google.com/accounts/ServiceLogin?service=mail&amp;passive=true&amp;rm=false&amp;continue=https%3A%2F%2Fmail.google.com%2Fmail%2F%3Fui%3Dhtml%26zy%3Dl&amp;bsv=llya694le36z&amp;ss=1&amp;scc=1&amp;ltmpl=default&amp;ltmplcache=2&amp;hl=es&amp;from=logout"target="_blank" />
<area shape="rect" coords="0,209,194,283" alt="Beruby" href="http://es.beruby.com/promocode/uVQwjO" target="_blank" />
<area shape="rect" coords="1,286,198,382" alt="Facebook" href="http://www.facebook.com/" target="_blank"/>
<area shape="rect" coords="0,386,200,502" alt="Correo Electronico Hotmail.com" href="https://login.live.com/" target="_blank"/>
<area shape="rect" coords="1,506,198,597" alt="Hosting 000webhost" href="http://www.000webhost.com/461547.html" target="_blank"/>
<area shape="rect" coords="192,204,194,206"  nohref="nohref" target="_blank" />
</map>