Estás en

Inicio

Temas código

Imagen de sustitución con Script…

jul
4
2010

Temas código

Imagen de sustitución con Script…

Un artículo de ... manu Comments

2 Comentarios

Crea una imagen de sustitución con Dreamweaver…

Ejemplo y comentarios para la herramienta de Dreamweaver; "Imagen de sustitución" (Rollover).
Imagen que se cambia al pasar el mouse por encima.

- Manos a la Obra…

Quiero poneros dos ejemplos diferentes para la sustitución de una imagen al pasar el mouse por encima…
Lo vamos a hacer de dos formas diferentes;

1 – Con las herramientas de Dreamweaver…
mediante un Script que genera automáticamente Dreamweaver

Quiero ver donde se encuentra esta opción…

2 – Mediante código Css manualmente… dentro o fuera del archivo.
Esta opción está muy bien, pero tiene algunas limitaciones.

Arriba Volver

Bueno, si quereis probar como funciona en Dreamweaver,
sigue estos pasos y podrás comprobar personalmente esta herramienta…

Consigue dos imágenes de similares medidas para el ejemplo, luego puedes hacer tus propias comprobaciones sobre los tamaños y otros en este tipo de acabados.
El formato de las imágenes da igual, lo único que debes escribir la extensión (formato de la Imagen) en el…

<img src"Url-relativa-absoluta/imagen-y-formato" />

Bueno dicho esto empezamos con las comprobaciones, y a ver como nos sale este asunto…;
Crea un nuevo archivo Html vacio, si no lo tienes abierto ya.

Para esta prueba haz como te apetezca, crea un parrafo <p>Para alojar la imagen de prueba</p>,
o bien haz clic en cualquier parte del documento, para luego elejgir "Insertar" de la barra de harramientas como en el ejemplo de la imagen anterior, y en el menú contextual que te aparece elige la opción; "Objetos de Imagen" y luego "Imagen de sustitución".

- Hacto seguido te parecerá la ventana de debajo para poder crearla…

Ventana de imagen de sustitución

Arriba Volver

Esto es muy sencillo de crear, con la ayuda del asistente está "Chupao…"
Antes de seguir quiero decirte que en cuanto rellenes los campos y aceptes, tu aplicación creará un Script automáticamente, y lo alojará entre el
<head></head> de tu documento, entre las etiquetas obligatorias como son…

<script type= "text/javascript" > </script>

Bien vamos a rellenar los campos, teniendo en cuenta que has preparado las imágenes para las pruebas, y puedes ver esta ventana como la imagen que he puesto arriba.

Quiero ver más o menos como rellenar los campos…

- Rellenando los campos obligatorios…

- Nombre de la imagen…
Sencillo, elige un nombre cualquiera.

- Imagen original…
Esta el la imagen que ves primero.Puedes poner una Url relativa al documento utilizando el asistente con el botón "Examinar", o puedes escribir una Url absoluta a tu imagen, tipo "http://www.internavegacion.com"

- Imagen de sustitución…
Esta el la imagen que se verá al pasar el mouse por encima, es la que sustituye a la primera. Puedes seguir los pasos para localizar la imagen de la misma forma que en el caso anterior.

- Texto alternativo…
Esta parte es para la descripción de la imagen, o la información que quieres mostrar sobre la imagen.

- Al hacerse clic, ir a la Url…
Esta parte es la que enlazará la imagen con la Web u otro sitio que quieres abrir al hacer clic.
Todos estos son pasos sencillos para crear un rollover con dos imágenes.

Una vez rellenado los campos correctamente, en cuanto aceptes se creará el Script para tal ejemplo.Se situará entre las etiquetas <head></head>.

Recuerda que puedes crear un documento en donde alojar este Script y enlazarlo en tu documento mediante;

<script type= "text/javascript" src="http://www.tu-web/tu-archivo.js"> </script>

Arriba Volver

Bueno, yo he colocado una imagen para el ejemplo y puedes comprobarlo aquí pasando el mouse por encima…

El código que se ha creado en el documento áctual es este para esta imagen cambiante…

<a href="http://www.internavegacion.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(‘Imagen2′,”,’http://www.internavegacion.com/imagenes-blog//imagen-2.jpg’,1)"><img src="http://www.internavegacion.com/imagenes-blog/imagen-1.jpg" alt="rollover" name="Imagen2" width="97" height="97" border="0" id="Imagen2" /></a>

Bueno estos son los pasos para crear en Dreamweaver una imagen de sustitución, más bien es la propia aplicación la que hace todo el trabajo.No se exactamente en la medida que se útiliza este tipo de script para sustituir una imagen, pero si creo que con CSS se pueden hacer grandes acabados.
Lo vemos en el archivo siguiente, o desde la portada de Inter Navegación.

Quiero recordar que este Script es creado integramente por el programa Dreamweaver CS, a sea que los creditos son para la Gente de Adobe, que la verdad hacen grandes aplicaciones para el diseño.

Arriba Volver

Etiquetas: Imagen de sustitución, Script, Sustitución

Temas Relacionados;

Imagen de Sustitución con estilos CSS…

Sobre el autor: manu

2 Comentarios Añadir un comentario

manu 16 septiembre, 2011 a las 19:20

Posiblemente, pero esto no es más que un ejemplo.
Supongo que se pueden hacer de varias maneras.

saludos
Que es SSL 14 septiembre, 2011 a las 0:37

Es preferible realizar esta tarea con CSS, dreamweaver tiende a generar mucho cpodigo basura.