Foros del Web » Creando para Internet » HTML »

Links en imagenes

Estas en el tema de Links en imagenes en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/06/2009, 19:35
 
Fecha de Ingreso: marzo-2009
Mensajes: 395
Antigüedad: 8 años, 9 meses
Puntos: 11
Links en imagenes

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
  #2 (permalink)  
Antiguo 08/06/2009, 00:09
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Links en imagenes

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 08/06/2009, 01:25
Avatar de Corneja  
Fecha de Ingreso: febrero-2008
Ubicación: Senolaf
Mensajes: 268
Antigüedad: 9 años, 9 meses
Puntos: 8
Respuesta: Links en imagenes

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> 
  #4 (permalink)  
Antiguo 08/06/2009, 04:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

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

Código css:
Ver original
  1. #banderas a img {opacity: 0.5; filter:alpha(opacity=50);}
  2. #banderas a:hover img {opacity: 1; filter:alpha(opacity=100);}

Código html:
Ver original
  1. <div id="banderas">
  2.     <a href="..... ><img scr="..... /></a>
  3. </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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 08/06/2009, 04:57
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Links en imagenes

Y de esas dos formas kseso? cual es la que es mas óptima?
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 08/06/2009, 05:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

Cita:
Iniciado por hades87 Ver Mensaje
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?)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 08/06/2009, 05:32
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Links en imagenes

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 :)
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 08/06/2009, 05:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 08/06/2009, 06:44
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Links en imagenes

Si, loa cabo de ver ahora, tras unos problemillas con mi firefox, gracias por todo :)
__________________
No diseñes usando tablas.
  #10 (permalink)  
Antiguo 08/06/2009, 11:33
Avatar de Corneja  
Fecha de Ingreso: febrero-2008
Ubicación: Senolaf
Mensajes: 268
Antigüedad: 9 años, 9 meses
Puntos: 8
Respuesta: Links en imagenes

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"

Última edición por Corneja; 08/06/2009 a las 11:41
  #11 (permalink)  
Antiguo 08/06/2009, 11:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 08/06/2009, 12:35
Avatar de Corneja  
Fecha de Ingreso: febrero-2008
Ubicación: Senolaf
Mensajes: 268
Antigüedad: 9 años, 9 meses
Puntos: 8
Respuesta: Links en imagenes

gracias por las aclaraciones
  #13 (permalink)  
Antiguo 08/06/2009, 17:50
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Links en imagenes

Cita:
(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?
__________________
twitter: @imbuzu
  #14 (permalink)  
Antiguo 08/06/2009, 18:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

Creo que las citas deben ser completas, nunca parciales:
Cita:
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).
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 08/06/2009, 22:10
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Links en imagenes

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
__________________
twitter: @imbuzu
  #16 (permalink)  
Antiguo 09/06/2009, 05:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

Que sí, Buzu, que tienes razón.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 10/06/2009, 11:20
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Links en imagenes

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!? )
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #18 (permalink)  
Antiguo 10/06/2009, 12:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Links en imagenes

Cita:
Iniciado por daPhyre Ver Mensaje
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #19 (permalink)  
Antiguo 10/06/2009, 16:48
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Links en imagenes

Pero en serio que usan toda esa frase kilometrica para poner Opacity? O.o
__________________
No diseñes usando tablas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:25.