Comunidad de diseño web y desarrollo en internet online

controlar posicion de background de ul al estar en li hover?

Citar            
MensajeEscrito el 18 Mar 2008 10:28 pm
Buena tarde a todos!

Tengo un menu con listas, mi ul (#tipos) tiene de fondo una imagen que con cuatro formas (una diferente para cada link).

Código :

<ul id="tipos">
   <li><a href="link1.html">Tipo 1</a></li>
   <li><a href="link2.html">Tipo 2</a></li>
   <li><a href="link3.html">Tipo 3</a></li>
   <li><a href="link4.html">Tipo 4</a></li>
</ul>

#tipos{
   padding:140px 0 0 0;
   background-image:url(../images/tipos.gif);
   background-repeat:no-repeat;
   background-position:0 0;
}


Se puede cambiar la posicion de la imagen del fondo de mi menu (ul, #tipos) desde el link de mis li? cuando esté sobre cada elemento li?

Cuando este sobre el link "Tipo 1" cambie a "background-position:120px 0;", luego link "Tipo 2" cambie a "background-position:240px 0;" y asi con los cuatro links?

Se puede controlar posicion de background de ul al estar en hover de ul li?

Saludos!

Por elfopower

26 de clabLevel



 

Guatemala

msie7
Citar            
MensajeEscrito el 22 Mar 2008 01:33 pm
Desde JavaScript, sería muy fácil...
Desde CSS... creo que no hay un selector "parent", así que en ese caso, habría que hacerlo con los hijos del que reciba el estado "hover".
En esta página, encontrarás muchos efectos de CSS. Quizá alguno te sirva.

Si te decides por el javascript, quizá pueda echarte una mano.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 23 Mar 2008 03:42 am
Muchas gracias, voy a revisar, si no encuentro solucion te aviso!
Mil gracias
Saludos

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 24 Mar 2008 02:04 am
Hola,
he estado buscando en cssplay pero no encuentro nada que me sirva, lo que quiero es manejarlo como background de mi ul.

Podrias echarme la mano para poder resolverlo?

Gracias anticipadas
Saludos.

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 24 Mar 2008 12:38 pm
Como yo sabría, sería mediante JavaScript.
Y sería muy fácil:

Código :

<script>
var imagenes=new Array('url_de_imagen_1','url_de_imagen_2','url_de_imagen_3');

function listen(event,elem,func)
{elem = document.getElementById(elem);
    if(elem.addEventListener)
   {elem.addEventListener(event,func,false);}
      else
   {if(elem.attachEvent)
      {var r=elem.attachEvent("on"+event, func);
       return r;
      }
      else
      {throw 'No es posible añadir evento';}
   }
}

window.onload=function()
   {for(i=0;i<imagenes.length;i++)
      {
       listen('mouseover',(i+1)+'_LI',function(){this.parentNode.style.backgroundImage='url(\''+imagenes[parseFloat(this.id)-1]+'\')';});
      }
   }
</script>
<body>
<ul>
<li id="1_LI">imagen1</li>
<li id="2_LI">imagen2</li>
<li id="3_LI">imagen3</li>
</ul>
</body>

¿el problema?
El de siempre.
El maldito IE.
Al parecer... no soporta (correctamente) el "this" ("this.id", o "this.parentNode") cuando se le llama desde una función anónima:

Código :

listen('mouseover','id_de_elemento',function(){alert(this.id);});
Esto... que funciona a la perfección en FireFox y Ópera... no arranca en El Maligno (IExplorer).

Sólo se me ha ocurrido algo para que funcione en todos: "hacerlo a la antigua usanza"

Código :

<script>
function cambia_fondo(url_de_imagen)
{document.getElementById('UL').style.backgroundImage='url(\''+url_de_imagen+'\')';}
</script>
<body>
<ul id="UL">
<li id="1_LI" onmouseover="javascript:cambia_fondo('url_de_imagen_1');">imagen1</li>
<li id="2_LI" onmouseover="javascript:cambia_fondo('url_de_imagen_2');">imagen2</li>
<li id="3_LI" onmouseover="javascript:cambia_fondo('url_de_imagen_3');">imagen3</li>
</ul>
</body>


Si se quiere, se podrían usar "comentarios condicionales" (<!-- if[IE] //-->) para hacerlo completamente correctamente en ambos navegadores (aunque este último camino valdría a la perfección para ambos navegadores)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 25 Mar 2008 01:42 pm

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

firefox
Citar            
MensajeEscrito el 25 Mar 2008 02:57 pm
Excelente, muchas gracias por tan excelentes ayudas!

rizome
Ya he probado tus soluciones, ambas resuelven exactamente lo que busco, desafortunadamente con la primera como comentabas con IE no funciona.
Con la segunda todo va bien, inclusive le he agregado el evento onmouseout para restaurar la imagen, "pero" siempre que le doy el mouseover me carga de nuevo la imagen y funciona perfectamente en IE, FF, Opera y Safari

Se podria evitar eso?

La100rra
Habia ojeado alguna vez ese menu, pero no le habia puesto mucha atencion al css!, estoy haciendo algunas pruebas para solucionar mi caso, pero en si el manejo del css es muy bueno.

Los datos que me han proporcionado han sido muy utiles y me han re-orientado y ayudado muchisimo.

Les agradezco mucho y queda mucho por aprender y practicar todavia! ^^

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 25 Mar 2008 04:25 pm
Con la segunda todo va bien, inclusive le he agregado el evento onmouseout para restaurar la imagen, "pero" siempre que le doy el mouseover me carga de nuevo la imagen y funciona perfectamente en IE, FF, Opera y Safari

Se podria evitar eso?


Haciendo pruebas "ya mas calmado", las imagenes me las carga cada vez con el mouseover sólo en Firefox.

Saben porque pasa eso?

Saludos

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 25 Mar 2008 05:10 pm
quizá sea cosa de la configuración de tu firefox.
quizá tenga alguna configuración activada como "revisar siempre la última versión", o así
¿has probado en otros PC distintos?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 25 Mar 2008 11:29 pm
Excelente!
He revisado en otras PC's y funciona de maravilla!

Como puedo hacer para que no se repita el background cuando no tiene ningun estilo?
A esto podria aplicarse alguna libreria de ajax? como un fade o algo similar?

Saludos y de nuevo Muchas gracias!

:lol:

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 26 Mar 2008 01:08 am
claro q puedes ponerle fades... o lo que quieras...
xD

Pero... no: eso no es (en principio), AJAX.
sería Mootools, o jQuery.

Aunque yo te aconsejo que lo hagas, "a pelo", pues si sólo vas a hacer esa "pijada", mejor te ahorras cargar toooooda la librería entera.
(es algo casi similar a lo que ya puse en este otro hilo, así q creo que podrás "copy-paste")

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 01 Abr 2008 11:40 pm
Retomando el tema....

Usando la primera opcion, la no intrusiva... si funciona en todos menos en IE, ahora el problema que tengo es con la validacion, el error es el siguiente:
value of attribute "id" invalid: "2" cannot start a name.

Estube probando modificar el codigo, pero no me funciona, cual es el error?

Código :

listen('mouseover','LI_'+(i+1),function(){this.parentNode.style.backgroundImage='url(\''+imagenes[parseFloat(this.id)-1]+'\')';});

Saludos

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 02 Abr 2008 12:58 am
cagüenlaputa.
¿no pueden empezar los ID por números?
gRRR

Sólo habría que añadir un ".split('LI_')[1]", así:
<script>
var imagenes=new Array('url_de_imagen_1','url_de_imagen_2','url_de_imagen_3');

function listen(event,elem,func)
{elem = document.getElementById(elem);
if(elem.addEventListener)
{elem.addEventListener(event,func,false);}
else
{if(elem.attachEvent)
{var r=elem.attachEvent("on"+event, func);
return r;
}
else
{throw 'No es posible añadir evento';}
}
}

window.onload=function()
{for(i=0;i<imagenes.length;i++)
{
listen('mouseover','LI_'+(i+1),function(){this.parentNode.style.backgroundImage='url(\''+imagenes[parseFloat(this.id.split('LI_')[1])-1]+'\')';});
}
}
</script>
<body>
<ul>
<li id="LI_1">imagen1</li>
<li id="LI_2">imagen2</li>
<li id="LI_3">imagen3</li>
</ul>
</body>
*marco en rojo, lo que cambio respecto a mi propuesta inicial.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 02 Abr 2008 02:13 pm
Funciona muy bien.
Para crear el mouseout, se crea otra funcion? trato de hacerlo pero no funciona nada.
Gracias!

Por elfopower

26 de clabLevel



 

Guatemala

firefox
Citar            
MensajeEscrito el 02 Abr 2008 02:56 pm
La función del "onmouseout", yo la llamaría desde el <ul>, pues si la pusieras en los <li>, entraría en conflicto la salida de uno, con la entrada en el siguiente.
La ejecutaría en el window.onload=function(){/* aquí */}, pero fuera del bucle "for".

Así, haría:
window.onload=function()
{for(i=0;i<imagenes.length;i++)
.....{listen('mouseover','LI_'+(i+1),function(){this.parentNode.style.backgroundImage='url(\''+imagenes[parseFloat(this.id.split('LI_')[1])-1]+'\')';});}
.listen('mouseout','id_del_UL'),function(){this.style.backgroundImage='url(\'URL_de_imagen_para_el_onmouseout\')';});
}


Ya dirás si funciona, pues ahora no puedo hacer pruebas.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.