Kwout - Generar mapas de imágenes (con hipervínculos) sobre una captura web

kwo.jpg

Kwout es una herramienta online que nos facilitara un poco el trabajo a la hora de crear mapas de imágenes (con hipervínculos) sobre una captura web. Kwout en simples pasos, nos permitirá realizar la captura web de una Url especifica, a su vez sobre esa captura nos permitirá recortar una área especifica (ej Sección blogroll), y lo genial aquí es que Kwout automáticamente generara nuestro mapa de imágenes, lo que significa que cada uno de los enlaces en la captura nos redireccionara al link especifico.
Para utilizarlo simplemente basta con ingresar a Kwout, introducir la url que deseamos capturar. Recortar el área que nos interesa, inclusive si deseamos podremos decorar un poco esta área que acabamos de recortar con sombras, un redondeo suave, etc. También dentro de estas opciones veremos tres item que nos preguntara que deseamos hacer con esta captura, si compartirla desde nuestro blog, Flickr o Tumblr. Luego simplemente deberemos copiar el código generado y copiarlo en nuestro blog, automáticamente estaremos viendo nuestro mapa de imagen (con hipervínculos) en nuestro post o sección.

EJ: Pasa el Mouse sobre los enlaces de la foto.

http://www.xyberneticos.com

Xyberneticos via kwout

Nuestro código generado ha sido algo así.

HTML:
  1. <p class="kwout" style="text-align: center"><img src="http://kwout.com/cutout/f/r3/x5/az8.jpg" alt="http://www.xyberneticos.com" title="Xyberneticos" usemap="#kwout_fr3x5az8" height="245" width="201" />
  2. <map name="kwout_fr3x5az8" id="kwout_fr3x5az8"> <area href="http://www.puntogeek.com/" coords="100,71,158,86" shape="rect" /> <area href="http://www.codigogeek.com/" coords="0,134,63,149" shape="rect" /> <area href="http://www.anieto2k.com/" coords="0,113,46,128" shape="rect" /> <area href="http://vikiworks.com/" coords="100,218,156,233" shape="rect" /> <area href="http://www.colourlovers.com/" coords="0,197,72,212" shape="rect" /> <area href="http://elgeek.com/" coords="0,155,43,170" shape="rect" /> <area href="http://www.cubik.es/wordpress/index.php" coords="100,197,138,212" shape="rect" /> <area href="http://www.rubendomfer.com/blog/" coords="100,155,170,170" shape="rect" /> <area href="http://www.htmllife.com/" coords="100,113,151,128" shape="rect" /> <area href="http://cssmania.com/" coords="0,50,49,65" shape="rect" /> <area href="http://www.infectedfx.net/" coords="0,176,57,191" shape="rect" /> <area href="http://www.bitslab.net/" coords="0,92,42,107" shape="rect" /> <area href="http://wwwhatsnew.com/" coords="100,50,169,65" shape="rect" /> <area href="http://www.smashingmagazine.com/" coords="100,176,187,191" shape="rect" /> <area href="http://www.digilicious.cl/" coords="100,92,159,107" shape="rect" /> <area href="http://www.forwebdesigners.com/" coords="0,218,85,233" shape="rect" /> <area href="http://www.webmasterlibre.com/" coords="100,134,182,149" shape="rect" /> <area href="http://www.storelicious.com/" coords="0,71,95,86" shape="rect" /></map>
  3. <p style="text-align: center; margin-top: 10px"><a href="http://www.xyberneticos.com">Xyberneticos</a> via <a href="http://kwout.com/quote/fr3x5az8">kwout</a></p>

Enlace Kwout

Via bitelia

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: