Unidad de Investigación ACCESO
Accesibilidad a la Red
Información y herramientas sobre el diseño accesible de sitios web. Diseño para Todos
|
|
Unidad de Investigación ACCESO Accesibilidad a la Red |
|
Información y herramientas sobre el diseño accesible de sitios web. Diseño para Todos |
|
Accesibilidad a la Red |
Imágenes con efecto sustitución (roll over)
ResumenEste vistoso efecto consiste en cambiar mediante Javascript la imagen cuando el ratón pasa por encima. Puede hacerse sobre la misma imagen o sobre otras imágenes de la página y debe reforzar la comprensión de los elementos de la página pero sin reducir la accesibilidad de la misma. ArtículoUna imagen con efecto sustitución cambia cuando el puntero del ratón del usuario pasa por encima de ella en la página web. Por eso este tipo de objetos en inglés se llaman 'rollover', que significa pasar por encima. El efecto sustitución puede usarse para añadir vistosidad a los elementos gráficos del sitio web. Dos imágenes Al retirar el ratón la imagen original vuelve a aparecer. Ambas imágenes deben tener las mismas dimensiones. Normalmente la imagen es además un hipervínculo a otra página o activa alguna acción al hacer clic sobre ella. Este efecto permite mostrar mucha información en la misma página de manera secuencial. De otra forma habría que hacer una página más larga con todos los elementos visibles simultáneamente. Javascript <a href="javascript:;" onMouseOver="swapImage('imagen_sustituta.gif')"
onMouseOut="swapImage('imagen_original.gif')">
<img src="imagen_original.gif"> </a>
La función 'swapImage' debe estar definida mediante Javascript en la sección cabecera (<head>) de la página. Es importante realizar la carga previa de todas las imágenes al cargar la página para que la sustitución se produzca de forma instantánea. Esto se logra mediante otra función de Javascript. Sustitución directa e indirecta Un uso habitual de los dos efectos se produce al iluminar las distintas opciones de un menú de navegación. En el botón del menú se produce una sustitución directa, mientras que se emplea el cambio de otra imagen de la página para ofrecer información sobre la opción mediante un texto escaneado u otra imagen informativa. Dreamweaver El editor web Dreamweaver 4 permite lograr éste y otros efectos de Javascript mediante la ventana Comportamientos. Esta ventana permite asignar a objetos de la página, como una imagen o un texto, comportamientos preprogramados Javascript que se activen mediante eventos como pasar el ratón por encima, hacer clic o cargar la página por primera vez. Reforzar, no ocultar El efecto bien empleado debe reforzar la comprensión de la función y el comportamiento de los elementos de la página. De esta manera, un botón que se ilumina al pasar el ratón por encima confirma que se trata de un elemento activo que al hacer clic sobre él activará alguna función importante. Además, la imagen en donde se produzca la sustitución indirecta debe estar físicamente cerca de la imagen activa o ser lo suficientemente grande para que su cambio sea percibido por el usuario. Accesibilidad Para estos casos, y también en previsión de que haya usuarios que no dispongan de Javascript en su navegador, hay que ofrecer métodos alternativos de acceder a la misma información si ésta resulta ser importante para la comprensión del sitio web o dentro de su contenido. Igualmente si se emplea texto escaneado en la imagen, éste no será accesible para usuarios ciegos, ya que el texto alternativo de la imagen no se puede cambiar de forma permanente mediante este sistema. Ejemplo |
|
(c) Unidad ACCESO.
Dep. Psicología Evolutiva i de l'Educació.
Universitat de Valencia Estudi General. |
