Foros del Web » Creando para Internet » HTML »

Links en imágenes

Estas en el tema de Links en imágenes en el foro de HTML en Foros del Web. Hola!!!... La verdad es que me estoy volviendo loco y no suelo preguntar ya que me leo todos los posts y demás sitios de ayuda ...
  #1 (permalink)  
Antiguo 23/09/2008, 04:52
 
Fecha de Ingreso: septiembre-2008
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Links en imágenes

Hola!!!...

La verdad es que me estoy volviendo loco y no suelo preguntar ya que me leo todos los posts y demás sitios de ayuda cuando tengo algún problema, pero no consigo saber como se hace y lo he probado todo, ya meto cosas hasta por meter :P

El tema es el siguiente tengo unas imágenes linkadas ( botones ) en la web y mi sorpresa es que en ie7 no se me ven las rayas de los links al pasar por encima del botón pero en mozilla firefox 3.0.1 sí.

Os dejo el ejemplo... son los botones de arriba del todo

www.zonalox.com/prueba

Lo he probado en otros ordenadores por si acaso es por diferencia de versiones pero no :P y la verdad estoy un poco desquiciado



Os dejo también el css que tengo más o menos limpito porque no sabias lo que he podido meter ahí con locura ^^

Código:
.loxc3r {
        font-family:tahoma,sans-serif,arial;
        font-size:11px;
        color: #CCCCCC
}

.text1 {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 9px;
	color: #CCCCCC;
}

.text {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
}

.texttit {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #E59F26;
      border-bottom-style: dashed;
      border-bottom-width: 1px;

}

a:link {
	color: #E59F26;
	text-decoration: none;
      

}
a:visited {
	color: #E59f26;
	text-decoration: none;
}
a:hover {
	color: #E59F26;
	border-bottom-style: dashed;
      border-bottom-width: 1px;


}
a:active {
	text-decoration: none;
      outline: none;
}

BODY {
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-arrow-color: #2D617D;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-face-color: #E8F4FD;
	scrollbar-highlight-color: #CCE9EC;
	scrollbar-shadow-color: #8CCCCD;
	scrollbar-track-color: #FFFFFF;
}
De verdad muchas gracias por adelantado y a ver si alguien por lo menos me puede dejar alguna idea, ya que el diseño va por tablas y aún no tengo ganas de meterme en el maravillos mundo de las .css

Un saludo
  #2 (permalink)  
Antiguo 23/09/2008, 05:14
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 9 meses
Puntos: 4
Respuesta: Links en imágenes

Hola:

he visto que a tus imágenes no les has agregado una clase de estilos, yo te recomiendo que a los links de imágenes les aplicaras una nueva clase o estilo.


ejemplo:

<a href="index.php" class="nuevo_estilo">
<img src="tu_imagen.png" alt=""/>
</a>


y en el css
/*este estilo es para los links de imágenes*/
.nuevo_estilo a:link, a:visited, a:active, a:hover
{
text-decoration:none;
}
/*fin del estilo para imagenes*/


también sería preferible que uses estilo para tus otros links que contengan el efecto que deseas.
  #3 (permalink)  
Antiguo 23/09/2008, 05:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links en imágenes

Cita:
Iniciado por cehojac Ver Mensaje
<a href="index.php" class="nuevo_estilo">
<img src="tu_imagen.png" alt=""/>
</a>

.nuevo_estilo a:link, a:visited, a:active, a:hover
{
text-decoration:none;
}
Ese selector no funcionaría, porque .nuevo_estilo no contiene un enlace como estás poniendo, sino que es la clase del propio enlace.

En todo aso sería:

a.nuevo_estilo:link, a.nuevo_estilo:visited { etc.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 23/09/2008, 05:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links en imágenes

¿Lo de que se mueva toda la web hacia abajo a pasar por lo botones es intencionado?
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 23/09/2008, 08:07
 
Fecha de Ingreso: septiembre-2008
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Links en imágenes

No, es justamente lo que no quiero que ocurra ^^

Que no salga el link en los botones...

Voy a probar eso que me habeis dicho a ver si funciona

Y gracias por cierto

Edited:

Jo, pues no funciona... seguiré mirando gracias ;)

De todas maneras claramente necesitaré crear algún estilo para eso porque cuando elimino del
code:

a:hover {
color: #E59F26;
border-bottom-style: dashed;
border-bottom-width: 1px;


lo que esta en rojo, ya no tengo problema ni en mozilla ni en ie, el tema es que no se que codigo meterle a esa imágen para que no lo coja de esa manera en el mozilla porque el de arriba no funciona.

Última edición por loxc3r; 23/09/2008 a las 08:18 Razón: Me he dado cuenta...
  #6 (permalink)  
Antiguo 23/09/2008, 10:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links en imágenes

Cita:
Iniciado por loxc3r Ver Mensaje
Que no salga el link en los botones...
Disculpa pero me he perdido. ¿Qué quiere decir "que no salga el link"?

Cita:
no se me ven las rayas de los links
¿qué son las rayas de los links? ¿te refieres al subrayado?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 23/09/2008, 10:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links en imágenes

A ver: tú le estás asignando un borde inferior cuando pasa el ratón:

a:hover {
border-bottom-style:dashed;
border-bottom-width:1px;
}

y eso es lo que se ve. ¿qué es exactamente lo que quieres hacer?
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 23/09/2008, 11:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Links en imágenes

Pues justamente si te fijas, perdona que a lo mejor me he explicado mal...

Que ese borde inferior en las imágenes no salga ( si te das cuenta en ie no sale pero en mozilla si ) pues no quiero que en mozilla me salga ese borde pero solo en las imágenes, para los link de texto normales si quiero.

Con IE7 si te fijas no sale nada al pasar el ratón por esos botones pero en cambio en mozilla firefox 3.0.1 al pasar el ratón por los botones sale el link ( linea de debajo ) en las imágenes.

Esa es mi duda, si existe algún code o algo que se pueda modificar para que en mozilla no salga esa linea ( dashed de 1px ) en las imágenes pero siga saliendo en el texto.

Y muchas gracias otra vez :)
  #9 (permalink)  
Antiguo 23/09/2008, 11:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links en imágenes

Ah, bueno. La solución pasaría porque asignaras una clase a los enlaces que contienen las imágenes, y en la css dieras a esa clase como sin borde al pasar el ratón:

<a href="#" class="noborde"><img sc="... " /></a>

y en la css

a.noborde:hover {border: none;}
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 23/09/2008, 11:19
 
Fecha de Ingreso: septiembre-2008
Mensajes: 4
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Links en imágenes

Dios mío, yo es que flipo O_O

Muchísimas gracias, si te digo que eso ya lo había probado pero con dos fallos...

Primero

a.noborde:hover {border: none;} - Lo ponía separado con espacios en cada parte :P

Segundo ( esto ya no se si es correcto o no son imaginaciones mias

<a href="#" class="noborde"><img sc="... " /></a> - el class lo ponía delante del href

Pues oye mikmoro, muchísimas gracias eres un crack ;)
  #11 (permalink)  
Antiguo 23/09/2008, 11:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links en imágenes

Cita:
Iniciado por loxc3r Ver Mensaje
Segundo ( esto ya no se si es correcto o no son imaginaciones mias
<a href="#" class="noborde"><img sc="... " /></a> - el class lo ponía delante del href
No, el orden ahí no tiene importancia. Sería alguna otra cosilla.

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
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 06:47.