Inicio  Contacto  Privacidad   Enlaces  Mapa del sitio  Videos

Imágenes Interactivas. Mapeando imágenes

 imágen interactiva
Mapeando Imágenes. 
Traductores Blog personificados. Hace pocos días mostré como tener un traductor en el blog de forma muy simple. Hoy os traigo uno mas personificado, con un poco de ingenio y algún programa de dibujo puedes hacer cosas como estas. Luego con un editor HTML pasamos a editar nuestra imagen y obtener el código. Mapeando imágenes, o lo que seria lo mismo dicho de otra forma, añadiendo coordenadas en posiciones especificas de la imagen.





Este Traductor Movil en tu blog. Traductor personificado aquí tenéis el código listo para poner en el blog. ( Diseño, añadir un gadget, HTML/Javascript )
<div><center><map name="FPMap0"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cfr&hl=es&fr=utf8'); return false;" title="Google-Translate-Spanish to French " shape="rect" coords="18, 49, 37, 63"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cit&hl=es&it=utf8'); return false;" title="Google-Translate-Spanish to Italian" shape="rect" coords="55, 48, 78, 65"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cen&hl=es&en=utf8'); return false;" title="Google-Translate-Spanish to English" shape="rect" coords="92, 48, 115, 64"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cpt&hl=es&pt=utf8'); return false;" title="Google-Translate-Spanish to Portuguese" shape="rect" coords="91, 110, 117, 128"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cja&hl=es&ja=utf8'); return false;" title="Google-Translate-Spanish to Japanese" shape="rect" coords="55, 110, 78, 127"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cde&hl=es&de=utf8'); return false;" title="Google-Translate-Spanish to German" shape="rect" coords="56, 75, 81, 96"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cru&hl=es&ru=utf8'); return false;" title="Google-Translate-Spanish to Russian" shape="rect" coords="93, 79, 118, 97"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cnl&hl=es&nl=utf8'); return false;" title="Google-Translate-Spanish to Nederlands" shape="rect" coords="17, 81, 41, 98"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cca&hl=es&ca=utf8'); return false;" title="Google-Translate-Spanish to Catalan" shape="rect" coords="18, 109, 42, 126"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7czh-TW&hl=es&zh-TW=utf8'); return false;" title="Google-Translate-Spanish to Chinese" shape="rect" coords="54, 138, 80, 156"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cda&hl=es&da=utf8'); return false;" title="Google-Translate-Spanish to Danish" shape="rect" coords="93, 137, 117, 156"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cen&hl=es&en=utf8'); return false;" title="Google-Translate-Spanish to English" shape="rect" coords="17, 138, 44, 156"> <img border="0" src="https://lh6.googleusercontent.com/-Vs79nmRVmO4/T9pEd42QU2I/AAAAAAAABUo/sYlqMW8728c/s220/MOVIL_flags.png" width="138" height="220" usemap="#FPMap0" /></map><br /> <a href="http://opticalphoto.blogspot.com" target="_blank"><small><small>OpticalPhoto</small></small></a></center></div>

Mapeo imágenes
Para los que quieran saber un poco más.
¿Como esta hecho? Muy fácil, para los que tengan Office de Microsoft ( XP y Anteriores lo traían instalado por defecto ) si no dentro del paquete de Office tenéis el conocido FrontPage, actualmente Microsoft Expression Web, que no son mas que editores Web llamados Wysiwyg ( Lo que ves es lo que obtienes ). Son de fácil manejo a primera vista y complejos sobre todo las ultimas versiones adaptadas a los tiempos, estilos, CSS, si te introduces de lleno en la codificación ( verlo desde dentro ). Trabajaremos de las dos formas a primera vista Edición y código HTML. Abrimos una página nueva. Insertamos la imagen a tratar, la seleccionas, ( picas encima ) seleccionamos ahora zona activa, en este caso rectangular y ahora solo tienes que hacer como si quisieras recortar la zona del dibujo que quieres. Se abrirá una ventana para indicarle un enlace dentro de esa zona seleccionada, pones A por ejemplo y aceptar, ahora vamos a ver el código fuente que nos ha dejado, ( Código ) veremos algo así.
<p><map name="FPMap0"> <area href="A" shape="rect" coords="93, 47, 114, 65"> </map> <img border="0" src="file:/Donde tengas tu imagen en tu PC/Movil_flags.png" width="138" height="220" usemap="#FPMap0"></p>

Zonas activas
Todo esto es lo que nos interesa, ya tenemos la imagen con las coordenadas en una zona especifica de la misma, pero vamos a verlo y modificarlo un poco
Donde tenemos después de area href=”A” en A lo sustituimos y sera donde pondremos la dirección URL del enlace, sitio donde queremos que al poner el ratón sobre esa zona de la imagen y picar iremos. 
Las medidas de ancho y alto de la imagen tambien tendras que modificarlas a tu dibujo, imágen.( width, height )
Y así con cada parte del dibujo que queramos que apunte enlace a alguna parte.
En este caso como hemos empleado códigos de Google ( Google Translate ) para implementar su función hemos hecho lo siguiente.
Eliminamos el href=”A” por completo y en su lugar insertamos el código directamente, ya que el mismo ya lleva las funciones descritas.
Ejemplo de Español a Ingles. Código de Google
target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cen&hl=es&en=utf8'); return false;" title="Google-Translate-Spanish to English "

Quedaria algo así
<map name="FPMap0"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cen&hl=es&en=utf8'); return false;" title="Google-Translate-Spanish to English " shape="rect" coords="93, 47, 114, 65"> </map> <img border="0" src="Donde tengas tu imagen en tu PC.. PICASA...../Nombre imagen gif, png, jpg" width="138" height="220" usemap="#FPMap0">

( El codigo de Google. Fijate en esta parte langpair=es%7cen&hl=es&en=utf8') Que quiere decir, es de Español en a ingles, solo es cuestion de ir poniendo las siglas del resto de idiomas que queramos repitiendo el mismo codigo, Español Italiano, pues en vez de en seria it 
Vamos a pulirlo y dejarlo en condiciones para poder añadirlo a nuestro Blog, haciendo la división oportuna del código. ( Listo para copiar y pegar ) Insertar como Elemento HTML/JavaScript. Añadimos nuevas funciones y elementos y sus correspondientes etiquetas de contenedor.
<div><center> <map name="FPMap0"> <area target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href) +'&langpair=es%7cen&hl=es&en=utf8'); return false;" title="Google-Translate-Spanish to English " shape="rect" coords="93, 47, 114, 65"> <img border="0" src="Donde tengas tu imagen en tu PC.. PICASA...../NOMBRE IMAGEN.gif, png, jpg" width="138" height="220" usemap="#FPMap0"> </map></img></center> </div>

Todo esto ha avanzado mucho hoy en día y tenemos otras formas de hacerlo, con CSS, incluso on-line. Las posibilidades como siempre son infinitas y la creatividad esta en tu mente. 
Links online:   Image-Maps   Image Map Creator  
Que lo disfrutéis
Josep  :)

0 comentarios:

Comentarios

Entradas recientes Entradas antiguas Inicio
Licencia Creative Commons
Optical Photo por Josep Carmona se encuentra bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 3.0 Unported.
Permisos que vayan más allá de lo cubierto por esta licencia pueden solicitarlos en nuestro apartado de Contacto