Foros del Web » Creando para Internet » CSS »

Icono a la derecha al pasar el mouse sobre el enlace

Estas en el tema de Icono a la derecha al pasar el mouse sobre el enlace en el foro de CSS en Foros del Web. |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| |||||||||||||||||||||||||||| ------ | home | starcraft | estrategias | contacto | ----- |||||||||||||||||||||||||||| Hola por favor quisera que ...
  #1 (permalink)  
Antiguo 02/11/2009, 10:56
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años, 1 mes
Puntos: 0
Pregunta Icono a la izquierda al pasar el mouse sobre el enlace

||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
|||||||||||||||||||||||||||| ------ | home | starcraft | estrategias | contacto | -----
||||||||||||||||||||||||||||


Hola por favor quisera que me den un pequeña ayuda con esto quiero que al pasar el puntero por el menu al lado izquiero en una posicion definida cambie el icono correspondiente a cada menu. Un ejemplo parecido me bastaria para solucionarlo.
Gracias ...

Última edición por Russsell; 03/11/2009 a las 12:24
  #2 (permalink)  
Antiguo 02/11/2009, 11:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Hola Russsell:

Incluye dentro de <style>:
a {background-image:/*url de tu imagen*/;}
a:hover {background-image:/*url de tu otra imagen*/;}


si en body tienes:
<a href="/">item de menu</a>

Saludos!
  #3 (permalink)  
Antiguo 02/11/2009, 12:34
 
Fecha de Ingreso: noviembre-2009
Mensajes: 13
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Ps yo creo que con jquery podrías hacerlo, pero te recomiendo hacer ese menú en flash para que no te compliques tanto, la verdad no se si se pueda hacer eso que dices con puro (x)html y css.

Código:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function cambiarimg1() { 
$("div#imagendeladerecha").load("imghome.png");
}
</script>
Código:
<a href="#" onmouseover="javascript:cambiarimg1();">Home</a>
Ps esta es una forma mediante ajax, pero no es muy recomendable ya que sobrecargarías tu pagina, para estos casos te digo que es mejor flash.

Salu2.

Última edición por MS70; 02/11/2009 a las 12:54
  #4 (permalink)  
Antiguo 02/11/2009, 16:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Hola:

Cita:
Iniciado por cristian_cena Ver Mensaje
Incluye dentro de <style>:
a {background-image:/*url de tu imagen*/;}
a:hover {background-image:/*url de tu otra imagen*/;}
Ampliando lo que te dice cristian_cena, deberás indicar también, después de la url de la imagen, las coordenadas donde quieres colocar la imagen. Busca información en este foro o en google sobre sprite+css.

Saludos.

  #5 (permalink)  
Antiguo 02/11/2009, 16:32
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Hola MS70, hay un foro para flash y otro para javascript, si Russsell decidió postear su problema aquí será porque tiene intenciones de hacerlo con css. Si para usted es complicado es otro tema.
  #6 (permalink)  
Antiguo 02/11/2009, 16:49
 
Fecha de Ingreso: noviembre-2009
Mensajes: 13
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Cita:
Iniciado por cristian_cena Ver Mensaje
Hola MS70, hay un foro para flash y otro para javascript, si Russsell decidió postear su problema aquí será porque tiene intenciones de hacerlo con css. Si para usted es complicado es otro tema.
No sabia que se podían poner coordenadas, es que el código que tu pusiste lo que hace es poner una imagen de fondo y un remplazo a todas las etiquetas "a" y no lo que el creador del tema quiere, el quiere que al situar el ratón sobre sus enlaces aparezca una imagen a la izquierda así como el esquema que puso.

||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
|||||||||||||||||||||||||||| ------ | home | starcraft | estrategias | contacto | -----
||||||||||||||||||||||||||||

Bueno eso es lo que entendí del tema si estoy mal ps tu solución le vendrá de pelos xd.
Gracias a jomaruro ahora se que se pueden poner coordenadas.
Salu2.

Última edición por MS70; 02/11/2009 a las 16:56
  #7 (permalink)  
Antiguo 02/11/2009, 20:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Cita:
Iniciado por MS70 Ver Mensaje
... el quiere que al situar el ratón sobre sus enlaces aparezca una imagen a la izquierda así como el esquema que puso.
Interprete que solo quería un rollover simple . Disculpas MS70 .

Russsell, en estos ejemplos de "tooltip css" de mikmoro se puede ver algo cercano a lo que pides:
http://www.araudi.net/ejemplos/tooltip_activo.html#
http://www.araudi.net/ejemplos/tooltipCSS.html#

Pero me parece que lo indicado es usar javascript tal como indica MS70.

Saludos!
  #8 (permalink)  
Antiguo 03/11/2009, 13:07
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Cita:
Iniciado por MS70 Ver Mensaje
Ps yo creo que con jquery podrías hacerlo, pero te recomiendo hacer ese menú en flash para que no te compliques tanto, la verdad no se si se pueda hacer eso que dices con puro (x)html y css.

Código:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function cambiarimg1() { 
$("div#imagendeladerecha").load("imghome.png");
}
</script>
Código:
<a href="#" onmouseover="javascript:cambiarimg1();">Home</a>
Ps esta es una forma mediante ajax, pero no es muy recomendable ya que sobrecargarías tu pagina, para estos casos te digo que es mejor flash.

Salu2.

Gracias bueno como cristian_cena dijo necesito que sea en css y/o javascript, en flash es relativamente mas facil para mi pero en este caso no me sirve.
He probado el codigo que pusiste y no lo he conseguido ... serias tan amable de detallarlo un poco mas.
  #9 (permalink)  
Antiguo 03/11/2009, 21:19
 
Fecha de Ingreso: noviembre-2009
Mensajes: 13
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

No te preocupes cristian_cena

Russsell: Seguramente no te funciona porque no has bajado la librería jquery, el señor Google te puede ayudar a bajarla, ya que la tengas haces referencia hacia ella asi:

Código:
<script type="text/javascript" src="jquery.js"></script>
Si es que la librería la sitúas en otro lado por ejemplo en otra carpeta llamada js, entonces solo pon la dirección así:

Código:
<script type="text/javascript" src="js/jquery.js"></script>
Salu2.
  #10 (permalink)  
Antiguo 05/11/2009, 08:07
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Icono a la derecha al pasar el mouse sobre el enlace

Cita:
Iniciado por MS70 Ver Mensaje
No te preocupes cristian_cena

Russsell: Seguramente no te funciona porque no has bajado la librería jquery, el señor Google te puede ayudar a bajarla, ya que la tengas haces referencia hacia ella asi:

Código:
<script type="text/javascript" src="jquery.js"></script>
Si es que la librería la sitúas en otro lado por ejemplo en otra carpeta llamada js, entonces solo pon la dirección así:

Código:
<script type="text/javascript" src="js/jquery.js"></script>
Salu2.
claro que tengo la ultima version de jquery ... jeje no entiendo esta parte $("div#imagendeladerecha")

no sabran de aguna pagina con un efecto parecido...??
Seria mas facil ver y clonar el codigo

Gracias.
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:36.