Colocar varios enlaces en una sola imagen usando Mapas de Imagenes
Te explico como va esto, pero, antes, mira la proxima imagen de abajo. Podras ver la figura de un saltamontes con grandes ojos. Esa imagen tiene dos enlaces. Si le das clic en el ojo superior de la imagen, podras ver que te lleva a la pagina principal de este blog, mientras que si das clic en el ojo superior, veras que te llevara a la pagina de contacto. Con un enlace normal de imagen, solo podrias acceder a un enlace por cada imagen. Eso es lo maravilloso.
Ahora, veamos el codigo que usamos para hacer esto:<div id="imagen1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYZ_T_hyphenhyphenG_jMHgX-UXc7UEusf709stV3hqW5qMAni24m9Cl3k8irDiHYkDSBoQnqMDLhBOZRJxY8LvghZDLub8KDU905by8Gc0ouK5hhiTTMSfrCj11qw0AnubjCTj0TJKUDs1LndhBLG/s1600/20091206222801_ojos+arco+iris.jpg" usemap="#Map" />
<map id="Map" name="Map">
<area coords="111,73,140,96" href="http://www.frikibloggeo.com.ar/" shape="rect" target="_blank">
<area coords="61,104,93,128" href="http://www.frikibloggeo.com.ar/p/contacto.html" shape="rect" target="_blank">
</map></div>EXPLICACION DEL CODIGO
En rojo: Es la id del codigo en la etiqueta div
En azul: Es la URL de la imagen en proporciones reales (Debes usar la imagen con sus propias medidas)
En naranja: Las coordenadas de los ojos dentro de la imagen
En azul: Los enlace a los que nos dirije cada ojo.
Te doy el codigo limpio.
<div id="nombre">
<img border="0" src="URL de la imagen" usemap="#Map" />
<map id="Map" name="Map">
<area coords="Coordenadas1" href="link1" shape="rect" target="_blank">
<area coords="coordenadas2" href="link2" shape="rect" target="_blank">
</map></div>Sacar las coordenadas en la imagen es muy sencillo. Usando el Paint de Windows o cualquier otro programa de editado de fotos podras hacerlo. Aqui te dejo este manual que hice explicando paso a paso que hacer para sacar las coordenada usando Paint.
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
Men para que son las segundas coordenadas
ResponderEliminarHola Letonas :)
ResponderEliminarBueno amigo, la idea al extraer las primeras y segundas coordenadas es que mediante a estas medidas el codigo logre determinar un cuadro determinado que es el cual posee el enlace, si solo se determinaran las primeras coordenadas, aunque determinemos dicho cuadro con la seleccion, el funcionamiento sera erroneo, ya que el mismo codigo reconocera desde el inicio del la seleccion hasta el final en el borde la la imagen, la segunda coordenadas lo que hacen es advertir al codigo para que sepa hasta que punto debe mantener el enlace.
La idea me gusta. Me parece una forma fácil de solucionar el mapeo. Pero me queda una duda. Yo uso blogger como servidor. Y quiero hacer una imagen mapeada para la cabecera de mi blog. El problema es que no sé cómo subir el código HTML para que la imagen mapeada se vea como cabecera.
ResponderEliminarEl diseñador por defecto de Blogger me pide que suba una imágen en formato JEPG.
¿Sabes cómo lo puedo solucionar?
Muchas gracias
ResponderEliminarNO ESCUCHO
ResponderEliminarnecesito obtener en paint pa realizar un mapa en html
ResponderEliminarGracias, me sirvio de mucho, lo hice rapido y facil. Resolví un problema en una pagina hecha en Drupal.
ResponderEliminar