En un lugar de internet...

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 <Div></Div> para esta comprobación con Imágenes cambiantes, y también colocaremos las imágenes entre <table><tr><td> </td></tr></table> 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 <div> 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 -> <a href=""></a>) 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 <a href=""></a> para enlazarla por ejemplo con mi Web.

Hice un comentario antes, sobre que en Css está un poco mas limitado el tema de la sustitución de la imagen con enlace <a href="">, para ello debemos apoyarnos en html, pues dentro de las hojas CSS el <a href=""> 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…

<style type="text/css">
.caja{
background:#FFC url(http://www.internavegacion.com/imagenes-blog/lleno.png) no-repeat;
border:#CCC dotted 1px;
height:130px;
width:130px;
}
.caja:hover{
background:#E8F4C1 url(http://www.internavegacion.com/imagenes-blog/vacio.png) no-repeat;
}
img{
border:none;
}
</style>

Vemos en las imagenes de debajo como nos queda dentro de la capa <div> y <table>, 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 <td> 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 <td> nos centra la imagen desde arriba, y la capa <div> hace su función normal, empezar de arriba y a la izquierda..

Este es el ejemplo de como se queda en la capa <div>…
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 <div>…

<div class="caja"><a href="http://www.internavegacion.com/"><img src="http://www.internavegacion.com/imagenes-blog/caja.png" width="50" height="35" title="Prueba de imagen cambiante" alt="Prueba de imagen cambiante" /></a></div><p>&nbsp;</p>

Para esta tabla… <table><tr><td></td></tr></table>

<table class="caja"><tr><td><a href="http://www.internavegacion.com/"><img src="http://www.internavegacion.com/imagenes-blog/caja.png" width="50" height="35" title="Prueba de imagen cambiante" alt="Prueba de imagen cambiante" /></a></td></tr></table>

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 <td>, 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 <a href=""> 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 <td> un align:center, o bien en;

Html ->> <td align="center"></td>
Html ->> <td style="text-align:center"> mediente estilos…

Html ->> <table style="text-align:center"></table> 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 <td></td>

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 <td></td> 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 <td>, con estilos css dentro de la etiqueta <td>, y en el documento Html.

Puedes ver aquí debajo las propieddes y valores que le he asignado a <td>, 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; <img style="padding:32%;display:block;" />

Podriamos haber asignado margenes a la imagen, poner en <td> por ejemplo un align:center, y a la imagen <img src="" /> 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.