Cómo incluir imágenes con efecto Rollover en tus artículos de Joomla con el editor JCE 2.0.7

Tags: CMS | gestor de contenidos | Joomla

El editor JCE 2.0.7 te permite realizar de una manera muy sencilla este vistoso efecto que consiste en que al pasar el cursor del ratón sobre una imagen de nuestra página, ésta cambia dinámicamente apareciendo una nueva imagen. Posteriormente, cuando el cursor se aleja de la imagen, el sistema vuelve a su estado inicial, mostrando de nuevo la imagen original. Este efecto se llama, en inglés, Rollover, ya que significa rodar o pasar por encima.

La imagen que se presenta en la página Web es, en realidad, una imagen con efecto sustitución (una imagen se sustituye por otra). Suele usarse para añadir vistosidad a los elementos gráficos del sitio Web. Y para conseguirlo en las páginas Web se suele utilizar un tipo especial de código denominado Javascript. Pero con JCE no necesitarás conocer absolutamente nada de este código. JCE será capaz de crear el efecto de una manera muy sencillo, sólo indicándole cuáles son las imágenes que tendrá que utilizar.

Antes de empezar debes tener dos imágenes. La primera imagen se muestra inicialmente al cargarse la página. La segunda imagen reemplazará a la primera cuando el curso del ratón apunte sobre el área de la imagen. Ambas imágenes deben tener las mismas dimensiones.

Para seguir nuestro tutorial descarga y guarda en tu equipo las dos imágenes que te ofrecemos a continuación (utiliza la opción del menú contextual del botón derecho del ratón – guardar imagen como):

     

Inicia la administración de tu sitio Joomla. En el Panel de control haz clic sobre el botón Añadir un nuevo artículo.

Configura sus opciones de la siguiente forma:

Título: Imagen rollover

Alias: deja el campo vacío, Joomla lo establecerá por si mismo

Publicado: Sí, o en caso contrario, el artículo no estará accesible en tu sitio

Página principal: Sí, nuestra intención es sólo practicar y visualizar el efecto que vamos a crear, no tiene ninguna otra finalidad, por tanto puedes colocarlo en cualquier página del sitio: la página inicial es tan válida como cualquier otra.

Sección – Categoría: Sin clasificar. Sólo queremos ver el efecto. Si tienes cualquier otra intencionalidad localiza la sección y categoría de tu sitio en las que quieras mostrar el artículo.

A continuación, escribe el artículo utilizando las opciones del editor de textos JCE. En nuestro caso hemos escrito un sencillo: “Escribimos el texto. Nuestra imagen rollover irá a continuacion:”

Haz clic sobre el botón Insertar / Editar imagen del editor JCE:

 

En pantalla se muestra la ventana Administrador de imágenes:

En primer lugar, “sube” las dos imágenes que vas a utilizar en el artículo. Es recomendable que crees carpetas para organizar las imágenes del sitio. Joomla recomienda que las imágenes personales las guardes en la carpeta stories.

Organízate: crea carpetas personales en la carpeta stories del sistema

Haz clic en el nombre de la carpeta stories en el Explorador de archivos para acceder a su contenido

Crear una nueva carpeta llamada botones_web (o la que tu quieras). Para ello haz clic en el icono Nueva carpeta de la barra de herramientas y en la pequeña ventana que aparece en pantalla escribe el nombre de la carpeta, pulsa la tecla Intro de tu teclado:

 

Haz clic de nuevo en el nombre de la carpeta botones_web para acceder a su interior. Aquí guardarás las imágenes que has descargado al comienzo de este artículo.

Para copiar – subir las imágenes a la carpeta, pulsa el icono Subir de la barra de herramientas.

 

La nueva ventana en pantalla te permite localizar las imágenes desde tu equipo –  o simplemente hacer clic y arrastrar hasta la ventana las dos imágenes a subir a la carpeta. (Para subir varias imágenes a la vez sólo tienes que realizar una selección múltiple de las imágenes tal y como lo harías en tu sistema: por ejemplo, mantén pulsada la tecla mayús mientras seleccionas los archivos que precises).

Cuando ambas imágenes se localicen en el interior de la ventana pulsa finalmente el botón Upload. Esto copiará las imágenes seleccionadas a la carpeta destino.

Construye el rollover

En primer lugar haz clic en el campo URL. Ten en cuenta que tienes que tener la imagen original que será la cambiada cuando acerques el ratón a ella. Pulsa en el nombre imagen1 del explorador de archivos. Automáticamente la dirección relativa URL de la imagen se escribe en el cuadro de texto. Si lo deseas cambia el texto que aparece en el campo Texto alternativo por Descargar. Observa que automáticamente JCE detecta las dimensiones de la imagen. No necesitas modificar ningún otro parámetro.

 

Haz clic en la pestaña Rollover de la ventana Administrador de imágenes. Observa los dos campos existentes:

 

Las dos entradas hacen referencia al código Javascript que se activará en la imagen (y que, por supuesto, no debes conocer, JCE lo escribirá él solito):

• MouseOver: activa el comportamiento cuando el puntero se encuentra sobre la imagen

• MouseOut: activa el comportamiento cuando el puntero sale de la imagen

Sólo falta incluir la imagen que sustituirá a la imagen original, es decir, aquella que se mostrará cuando el puntero del ratón se sitúa sobre la imagen. En este caso, la imagen2.gif

Haz clic, por tanto, en el campo de texto MouseOver para colocar el cursor del ratón en su interior. Seguidamente pulsa sobre el nombre imagen2.gif en el Explorador de archivos para que JCE escriba su dirección relativa URL en él.

El rollover ya está configurado. Pulsa sobre el botón Insertar, en la parte inferior de la ventana, para incluir el rollover en el artículo. Recuerda que se colocará en el lugar exacto donde tenías el cursor del ratón. Nosotros lo hemos colocado justo al final del mismo.

 

Sólo nos queda guardar el artículo, acudir al Frontend de nuestro sitio (enlace Previsualizar en la parte superior derecha de la página del Gestor de artículos), visualizar el artículo recién creado y comprobar el comportamiento de la imagen cuando el ratón se acerca o se aleja de ella.

¡Bonito y simple!

Descarga nuestro tutorial en formato PDF - 300 kb - Descargar

 

Mostrar este artículo en su sitio web

< Prev		Próximo >

Joomla - Componentes