Imagen de sustitución con Script…

manu — Sun, 04 Jul 2010 20:26:27 +0000

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…

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
Para alojar la imagen de prueba
,
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…

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
de tu documento, entre las etiquetas obligatorias como son…

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 .

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

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…

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

Imagen de Sustitución con estilos CSS…

manu — Sun, 04 Jul 2010 20:18:55 +0000

En el ejemplo anterior vimos como sustituir una imagen con la herramienta de Dreamweaver, "Imagen de sustitución".
Ahora intentaré explicar como hacer algo parecido mediante CSS, creo que está bien conocer los pasos sencillos, pero como comente antes si que existen algunas limitaciones, que para corregirlas hacen falta hacer algunos cambios en los documentos, y útilizar conjuntamente Html, y CSS.Siempre y cuando vallamos a colocar una imagen cambiante y con un enlace a un sitio Web cualquiera, o internamente.
Lo vemos…

- Ejemplos de sustitución de una imagen con estilos CSS…

Para preparar este ejemplo sencillo, no creo que nos haga falta muchas cosas, pero si te aconsejo que elijas dos imágenes del mismo tamaño, para poder dejar bien colocado nuestro ejemplo, luego puedes hacer tus propias comprobaciones con imágenes diferentes en tamaño y medidas, incluso prácticar colocar dos imagenes en Urls totalmente distintas, cosas así, como a mí me gusta, crear, quitar, poner y volver a empezar…

Crearemos una capa

para esta comprobación con Imágenes cambiantes, y también colocaremos las imágenes entre
y así podremos ver la diferencia entre una y otra etiqueta. Para los dos ejmplos tendrán los mismos estilos.

Recuerda que para colocar una imagen cambiante lo podrías hacer de maneras diferentes, este ejmplo lo creo en una capa

como comente y a modo de curiosidad, que funciona perfectamente el div:hover, lo único debemos emplear algún truquillo para posicionar la imagen que vamos a útilizar como enlace (ancla -> ) donde queremos ponerla.

Aviso; Este ejemplo puede que no funcione bien en IE6, debido a alguna incompatibilidad…

- Empezamos…
Crea un archivo html nuevo desde el editor que te encuentres, o bien puedes escribir, o copiar el código que vamos a crear para este ejemplo.
Recuerda, esto no es más que un ejemplo entre capas Div, para ver que pasa y de paso aprendemos cosas nuevas.

Yo para mi ejemplo he elegido estas imágenes, total tres…
La imagen del texto es mucho más pesada que las otras dos que se cambiarán, pesa alrededor de 60KB, y las de las cajas son mayores en tamaño, pero no en peso pues no pasan de los 10KB, pero para el ejemplo nos vale, pero si quisieseis hacer un menú de navegación por ejemplo con este tipo de imagen con sombras, retardarian un poco la carga del menú, casi seguro.No sería aconsejable.
También en vez de usar la imagen puedes usar texto escrito, por que mi intención es poner la imagen como enlace para enlazarla por ejemplo con mi Web.

Arriba Volver

Hice un comentario antes, sobre que en Css está un poco mas limitado el tema de la sustitución de la imagen con enlace , para ello debemos apoyarnos en html, pues dentro de las hojas CSS el no funciona y a diferencia del Script de sustitución y enlace unido que creo Dreamweaver en el ejemplo anterior, en css solo podremos colocar las imagenes cambiantes.Explico como hacerlo…

Bueno ya he creado la capa y la tabla, pongo los dos ejemplos con los mismos estilos y vemos que podemos hacer para que nos quede en el centro el enlace con la imagen.
Lo pongo tal cual queda al escribir el código…

- Los estilos que he útilizado para los dos ejemplos…

Vemos en las imagenes de debajo como nos queda dentro de la capa

y , lo cual nos indica una diferencia entre ellos sobre la imagen "caja", los dos tienen los mismos estilos Css, pero la capa Div nos coloca la imagen arriba a la izquierda, y el
Html ->>
Espero se me entienda esta parte, también se puede escribir en la hoja css, con clases, con identificadores, pero es más sencillo a mi modo de ver como lo hago arriba, pero si son varias, o muchas imágenes que se tratan de esta manera, entonces debes organizarte, y crear clases o propiedades para ese evento.
Css ->> td {text-align:center;} esto centraría la imagen o el contenido de la tabla de datos.
Css ->> table {text-align:center;} esto centraría la imagen y todo el contenido de la tabla, lo cual puede que no te interese, pero hay va el ejemplo…
- Seguimos por centrar la imagen en la capa Div…
Para centrar la imagen en la capa Div, he decidido hacerlo sin margenes.
Para el ejemplo he conseguido centrarla diciendole a la imagen que tenga un salto de linea, y he conseguido un buen resultado.
Luego le asignado un relleno (padding) que rodeará la imágen dentro de
en una medida equivalente a dividir la capa en tres partes más o menos, y he conseguido el resultado de la imagen de arriba, en donde pone "Imágen dentro de la capa Div", y podemos ver el la imagen siguiente como me ha quedado más, o menos centrada.
La parte que se visualiza en el centro es la imagen de texto que lleva el enlace como comente antes. Si te fijas el relleno se a creado al rededor de la imagen con los valores porcentuales que le indico a la tabla de datos
de la tabla nos coloca la imagen en el centro del alto (height), no del ancho (wldth).
Esto no son más que observaciones que se deben tener en cuenta, son interesantes, pues por defecto nos centra la imagen desde arriba, y la capa
hace su función normal, empezar de arriba y a la izquierda..

Arriba Volver

Este es el ejemplo de como se queda en la capa
…
La imagen claro… como está colocado el texto y el código, es cosa mía…

El código que he escrito en Html para esta capa
…

Para esta tabla…

Bueno como hemos podido comprobar, la tabla nos centra la imagen del texto pero la deja en la parte izquierda, (left), y la capa (div), nos coloca la imagen arriba y a la izquierda… lo que son procesos normales para este tipo de etiquetas html.

En realidad para el caso de la tabla, nos ha centrado la imagen la tabla de datos
, que por defecto este será el resultado en un principio, centrará todo lo que se encuentre en el interior, salvo que se le diga lo contrario mediante propiedades, y valores CSS.

Como comente antes, al colocar las imágenes de esta manera limitaba un poco el manejo total para las imágenes dentro de la capa y la tabla, pues seguro deberiamos útilzar estilos css para poder centrarlas.

Imagen dentro de la capa DIV…
Tenemos que tener en cuenta que estamos útilizando tres imágenes, una, en la clase .caja{ }, otra en la clase .caja:hover{ } para que se cambie al pasar el mouse, y por últino la imagen del enlace ancla que va a ser la que nos llevará a otras páginas, u otros sitios.

Imagen dentro de la Tabla…
Bien como sabemos que las imágenes pueden llegar a ser elementos vacios, que muchas propiedades y valores no le afectan, deberemos tratarla como lo que es, un elemento vacio…
Creo que no es mala idea llevar las imágenes en ocasiones a las tablas, muchas veces solucionan teodiosos problemas para centrar las imágenes, pero este es un tema que queremos centrar como lo tenemos y lo vamos a conseguir, desde luego…

- Vamos por partes…

- Empezamos por centrar la imagen en la tabla…

Empezaré por solucionar la parte de las tablas, lo que me resulta más sencillo para centrar la imagen, bastandome para ello, colocar a
un align:center, o bien en;

Html ->>
mediente estilos…

Html ->>
Esto también es válido, pero no me interesa pues centraría toda lo que está dentro de la tabla, y lo que quiero es especifico, solo lo que contiene la imagen del enlace, o sea lo que se encuentra en , con estilos css dentro de la etiqueta , y en el documento Html.

Puedes ver aquí debajo las propieddes y valores que le he asignado a
, un relleno alto y bajo de 32%, y un relleno de izquierda – derecha de 32%, cual me siuia la imagen de texto que lleva el enlace,como se muestra arriba.

Las propiedades y valores que he útilizado;

Podriamos haber asignado margenes a la imagen, poner en
por ejemplo un align:center, y a la imagen un margin-top:32% por ejemplo, pero he útilizado otra manera diferente también válida. El display:block lo que hace es corregir unos pixeles que de estiran hacia los lados, lo cual lo mejora a mi modo de ver.

Bueno amigos, espero que haya servido para algo este post, si hace que puedas tener algo más claro algunos puntos sobre este tema, mejor que mejor…
Si me he liado con algo, y lo ves teodioso, recuerda que para ir al super a comprar alimentos puedes ir, en auto, en camión, en bicicleta o andando, tu decides…

Te aconsejo que práctiques con las imágenes, te darás cuenta de cosas en te llamarán la atención, práctica con lo s valores y las propiedades CSS, luego tenido en cuenta algunos puntos, harán que puedas ver diferentes formas y métodos de coocar una imagen, que en realidad se pueden hacer de otras maneras, no son muchas pero haberlas… las hay.

Arriba Volver

Inter Navegación » Sustitución