Mapas de imagen

¿Qué es un mapa de imagen? Se trata de una imagen que contiene zonas sensibles donde, al pasar el mouse, se activa un link. Aquí muestro dos variantes: una sola imagen con zonas sensibles, y una segunda opción donde se dividió la gran imagen en tres imágenes, y se aplicó el intercambio de imágenes explicado en el post anterior.

Mapa de imagen con zonas sensibles y enlaces externos

Para realizarlo, se utiliza una imagen de base con la propiedad usemap, que vincula la imagen con el mapa que describimos previamente, siempre utilizando el atributo ALT, de acuerdo a las recomendaciones de accesibilidad.

Mapamundo Kepler

America septentrionalis Septentrio Terra Australis Incognita Mar di India

Detenga el mouse en los continentes para leer su nombre

El problema que encontré en este caso, es que en el celular con Android no se muestran los Titles ni los ALT. Este es el código del mapa de imagen anterior:

<img alt=”Mapamundo Kepler” src=”800px-Kepler-world.jpg” usemap=”#mapa1″ width=”600″ border=”0″ />

<map id=”mapa1″ name=”mapa1″>

<area title=”America septentrionalis” alt=”America septentrionalis” coords=”10,10,120,234″ shape=”rect” href=”http://……” />

<area title=”Septentrio” alt=”Septentrio” coords=”150,10,350,225″ shape=”rect” href=”http://……” />

<area title=”Terra Australis Incognita” alt=”Terra Australis Incognita” coords=”150,225,350,450″ shape=”rect” href=”http://……” />

<area title=”Mar di India” alt=”Mar di India” coords=”350,10,550,450″ shape=”rect” href=”http://……” /> </map>

<p style=”text-align: center;”>Detenga el mouse en los continentes para leer su nombre</p>

Ejemplo sin mapa de imagen

Utilizando lo explicado en el post anterior, dividimos la imagen grande en varias imágenes pequeñas, a las cuales les cambiamos el aspecto al pasar sobre ellas:

America septentrionalis
Septentrio y Terra Australis Incognita
Mar di India

Cambiar de imagen al pasar el mouse sin Javascript

Este es uno más de esos posts que escribo casi exclusivamente para mí misma, ya que cada vez que lo necesito me pongo a buscar en Internet…

Esta vez apliqué lo que encontré en este artículo: HTML Cambio de imagen sin javascript

El resultado puede verse en estos dos botones:

Letra pe::Letra eme

Este es el ejemplo de código para los botones anteriores:

<a

onmouseover=”document.letrape.src=’http://…./pe_verde.png'”

onmouseout=”document.letrape.src=’http://…./pe_bn.png'”

href=”https://www.irisfernandez.com.ar/betaweblog”>

<img alt=”Letra pe” src=”http://…./pe_bn.png” name=”letrape” />

</a>

<a

onmouseover=”document.letraeme.src=’http://…./eme_azul.png'”

onmouseout=”document.letraeme.src=’http://…/eme_bn.png'”

href=”https://www.irisfernandez.com.ar/betaweblog”>

<img alt=”Letra eme” src=”http://…/eme_bn.png” name=”letraeme” />

</a>

La traducción sería algo así como:

<enlace

onmouseover….cuando el mouse esté sobre esta imagen, cambiar a esta otra imagen: pe_verde.png

onmouseout……cuando el mouse salga de esta imagen, cambiar a esta imagen: pe_bn.png

href……….destino de la imagen >

<img….. imagen que se verá antes de que el mouse pase por encima>

BETA Weblog cumplió 9 años

¡Nueve años! ¡Cuántos!

En el último cumpleaños les hablé de mi objetivo cumplido, de continuar difundiendo la accesibilidad web, y seguir con guías sobre Gimp, Etoys, Moodle…

Este año puedo decir que mi especialidad cada vez más me fue llevando a hablar de Moodle, Moodle y más Moodle. Es que Moodle se puso complicado últimamente. Muchas cosas que antes hacíamos muy de memoria cambiaron, y nos vimos obligados a reaprender cosas como la automatriculación, las cohortes, los repositorios de archivos…

También escribí sobre Gimp, sobre mujeres en la sociedad, sobre informática educativa, sobre Android y algunas otras cosas de tecnología en general. Este año yo diría que abandoné categorías como Arduino, eToys, y Ubuntu.

Puedo decir que este no fue un gran año para mi blog, pero sí lo fue para mi profesión y mi vida personal.

Como balance de este año número 9, va parte de mi PLE (Personal Learning Environment), es decir, un esquema de las herramientas que utilizo cotidianamente (que no se agotan en esta lista, pero estas son las que hoy pude recordar):

 

Mi PLE