Links en imagenes

[Gothgauss]

Hola amigos

Estoy haciendo el tipico selector de idiomas mediante usod e banderitas que cambian a un contraste mas alto cuando pasas el rato n por encima

Quizas el sueño acumulado, son ya las 2.35 de la madrugada, me impiden pensar con claridad y ver como podria resolverlo de manera facil

Como puedo hacer dicho menu de manera rapida sin escribir una propiedad css para cada bandera?

Grax

[daPhyre]

Dejame preguntarte antes como cambias cada imagen de contraste. No se como lo hagas pero podrías poner todos en un div o similar y hacer algo como

#banderas img{}

Y tus instrucciones. Suerte

[Corneja]

Estas funciones son del dreamweaver no mías, pero es lo que buscas

Código:

<script language="JavaScript" type="text/javascript">
	function MM_preloadImages() { //v3.0
	  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
	}
	
	function MM_swapImgRestore() { //v3.0
	  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
	}
	
	function MM_findObj(n, d) { //v3.0
	  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
	  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
	  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
	}
	
	function MM_swapImage() { //v3.0
	  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
	   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
	}
</script>

en el html debes poner

Código:

	
Código HTML:
	
<a href="url_de_destino" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('name_de_tu_img','','url_de_la_img_destino',1)">
<img src="url_de_la_img_origen" name="name_de_tu_img" align="middle" />
</a> 

[kseso?]

Más sencillo y en la línea de daPhyre

Código css:

#banderas a img {opacity: 0.5; filter:alpha(opacity=50);}
#banderas a:hover img {opacity: 1; filter:alpha(opacity=100);}
 

Código html:

<div id="banderas">
    <a href="..... ><img scr="..... /></a>
</div>
 

problema, no valida css2.1

Otras formas:
http://araudi.net/ejemplos/rollover_..._posicion.html colocando la imagen como fondo.
http://araudi.net/ejemplos/BN-Color.html con dos imágenes en el html

Espero que algo de esto te sirva

Un saludo

[hades87]

Y de esas dos formas kseso? cual es la que es mas óptima?

[kseso?]

Iniciado por hades87

Y de esas dos formas kseso? cual es la que es mas óptima?

La que adaptándose mejor a sus necesidades sepa implementar.


Personalmente no confiaría "sólamente" a una imagen información sensible, y menos colocándola de fondo. La apoyaría mediante un texto (y puede ocultarlo con un z-index menor a al de la propia imagen). Así en caso de no cargar las imágenes o fallar el css tendrá visible y accesible el enlace de texto.)

Usando opacidad (propiedad "opacity") es sencillo pero tiene los inconvenientes de navegadores que no la entiendan y validación de código. Pero en ese caso símplemente pierde un efecto visual.

(¿No me estarás poniendo a prueba?)

[hades87]

Jaja, para nada kseso? llevo un tiempo con CSS, pero me falta mucho por mejorar, como a todos. Y este de las imágenes que cambian siempre es algo que me a intrigado, por que no sabía cual era la forma óptima, yo lo hacía con una imagen como fondo, pero lo que has comentado del z-index no lo había pensado. Gracias por tus sabios consejor :)

[kseso?]

Eso nos pasa a todos. Nos queda muuuucho camino por recorrer.

Para que veas lo que ya he comentado varias veces sobre el tema de encomendar a una imagen (o a un efecto de css, o también podría ser javascript, flash...) el acceso a información, te propongo que hagas una pequeña prueba:
Como supongo por tu avatar qué navegador usas, si tienes instalado Web Developer, ve a la página de presentación de los trabajos de la actividad de mayo de css y deshabilita tanto las imágenes (images/hide images) como el css (CSS/Disable Styles/All Styles).

En ambos casos, la página pierde su vistosidad (los divertimentos) pero sigue cumpliendo su función: que puedas acceder a los trabajos.
Esa página no es ejemplo de nada, pues falla garrafalmente en otros aspectos.

Un saludo

[hades87]

Si, loa cabo de ver ahora, tras unos problemillas con mi firefox, gracias por todo :)

[Corneja]

kseso me descubro ante ese método. No dicen que no te acostarás sin saber una cosa más, pues hoy ya puedo irme a dormir.

PD: Me surge una pregunta, cuando lo pruebo en FF no me valida el CSS, me dice "error al leer el valor para la propiedad filter"

[kseso?]

Hola Corneja:
Opacity es una propiedad CSS3, así que su validación la deberías hacer bajo esa propuesta. En css2.1 te marcará error.

filter:alpha es una "cantada" de m$, así que deberías colocarla en un comentario condicional, o en otra hoja de estilo diferente y la llamada incluirla en el respectivo cc para no tener problemas de validación.

Un saludo

[Corneja]

gracias por las aclaraciones

[buzu]

(y puede ocultarlo con un z-index menor a al de la propia imagen). Así en caso de no cargar las imágenes o fallar el css tendrá visible y accesible el enlace de texto

Por alguna razón se me hace conocida esa técnica (para quienes sepan de que hablo). Aun que en este caso no la aplicaría. Yo usaría una imagen normal con un alt y pues el efecto se logra de la misma manera con el opacity que ha sugerido Kseso? La técnica del "reemplazo" de texto por imágenes mediante z-index la recomiendo para reemplazar textos de encabezados en donde el texto a reemplazar es un <Hn> ya que ese texto tiene importancia mayor a un alt. Pero en este caso creo que no vale la pena el esfuerzo. De cualquier modo, buena sugerencia Kseso?

[kseso?]

Creo que las citas deben ser completas, nunca parciales:

Personalmente no confiaría "sólamente" a una imagen información sensible, y menos colocándola de fondo. La apoyaría mediante un texto (y puede ocultarlo con un z-index menor a al de la propia imagen). Así en caso de no cargar las imágenes o fallar el css tendrá visible y accesible el enlace de texto.)

Y de todas formas, de ser una imagen en el html debería tener el "alt", con lo que lo que propones no sería excluyente sino complementario (y mejor ser reiterativo que no sustractivo).

[buzu]

Hola Kseso?, creo que no has entendido el mensaje. Yo solo estoy dando las razones por las que no creo que aplicar la técnica de esconder un texto tras una imagen valga la pena en este caso. Para empezar, esos enlaces no son enlaces que necesariamente quieras que sean indexados por los buscadores, por lo que un alt es más que suficiente ya que nos permite lograr accesibilidad incluso si las imágenes no están disponibles por algún motivo. La ventaja que yo le veo al esconder el texto con una imagen mediante el uso de z-index es el poder controlar la relevancia del texto mediante la etiqueta que usamos, a diferencia de un alt del cual no se puede controlar su relevancia. A menos claro que haya una ventaja escondida que no haya visto.

Saludos

[kseso?]

Que sí, Buzu, que tienes razón.

[daPhyre]

Gracias por la extensión de la información Kseso?. Si bien no lo dije más extendido, es por que no sabía si Gothgauss se refería con "contraste" a la opacidad, o quizá el clásico truco de cambiar una imagen por una igual en una tonalidad más oscura. Esperaba que se apareciera para que nos dijera que era lo que deseaba con mayor especificación, pero por lo que veo no ha regresado.

Ahora, según he leido, gracias a IE8, el código de opacidad ahora debe ser así:

#banderas a:hover img{opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=80)";filter:alpha(opacity=80)}

(Yo me pregunto ¿No pudieron aceptar "opacity" ya como todo buen navegador? ... ¿¡A quien se le ocurre hacer más dificil su código de opacidad!? )

[kseso?]

Iniciado por daPhyre

Ahora, según he leido, gracias a IE8, el código de opacidad ahora debe ser así:
#banderas a:hover img{opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=80)";filter:alpha(opacity=80)}

(Yo me pregunto ¿No pudieron aceptar "opacity" ya como todo buen navegador? ... ¿¡A quien se le ocurre hacer más dificil su código de opacidad!? )

Hola DaPhyre: suele pasar en estas consultas con tan pocos datos, cada uno la interpretamos a nuestra manera y en base a ello respondemos supliendo con lo que creemos más oportuno la falta de información, y sí, hasta que no se presente el usuario de la duda no lo sabremos.
joder con los artistas será para que quede claro para quién es: -ms....microsoft
De ser cierto, manda güevos, vaya tropa.

Un saludo.

[hades87]

Pero en serio que usan toda esa frase kilometrica para poner Opacity? O.o