Consulta sobre activar y desactivar solapas

marx-pola · #1 (**permalink**) 22/01/2009, 09:53

Hola a todos! Tengo este código armado en css:

Código:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(indentbg2.gif) center center repeat-x;
}

</style>

Y el html es este:

Código:

<link type="text/css" rel="stylesheet" href="1.css">

<body id="top">
<div class="indentmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="current">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</body>

Y las solapas aparecen de esta forma:

Pregunta:
¿Me podrían decir por favor qué líneas debo agregar al CSS para que al presionar sobre una solapa, quede activa (como está ahora la solapa CSS) y la que ahora esta activa pase al micmo estado de las demás?

Muchas gracias a todos.

Saludos. Marx.

kseso? · #2 (**permalink**) 22/01/2009, 10:16

Tendrás que asignar el estilo "current" a la pestaña en cuestión en cada html:

Así, en la página gallery.html, por ejemplo, :

Cita:

<div class="indentmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#" class="current" >Gallery</a></li>
</ul>
</div>

marx-pola · #3 (**permalink**) 22/01/2009, 10:56

kseso?: gracias por responder. Perdón si no entendí bien... pero si se los agrego así me quedan activadas.

El estilo current hace que la solapa quede presionada, verdad? El tema es que no se resetea la página al llamar a la solapa que selecciono porque estoy usando div que trabajan en la misma página y no html externo.
Es como este ejemplo, mira:

Solapas Dakar

Aqui está trabajando con divs, pero fíjate que las imágenes se activan al seleccionar la solapa y se desactivan las otras.

No sé si se puede hacer esto por medio de css o por javascript... realmente no lo sé

.

Gracias amigo por tu ayuda.

MArx.

buzu · #4 (**permalink**) 22/01/2009, 11:36

Aquí un ejemplo un tanto sucio, pero que te puede dar una idea de como hacerlo, lo he hecho de rápido, pero espero que te pueda servir:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li, .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: #06F url(indentbg2.gif) center center repeat-x;
}

</style>
<script type="text/javascript">
	function aggEvento(){
		var links = document.getElementById('indentmenu').getElementsByTagName('a');
		for(i=0; links[i]; i++){
			links[i].onclick = function(){
				var links = document.getElementById('indentmenu').getElementsByTagName('a');
				for(j=0; links[j]; j++){
					links[j].className = "";
				}
				this.className = 'current';
			}
		}
	}
</script>
</head>
<body>
<link type="text/css" rel="stylesheet" href="1.css">

<body id="top" onload="aggEvento()">
<div class="indentmenu" id="indentmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="current">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</body>
</body>
</html>

kseso? · #5 (**permalink**) 22/01/2009, 11:38

Vale, Marx-Pola.
No entendí bien y además en mi código anterior se me pasó quitar las clase a la pestaña CSS.
Lo corrijo.

OK, abriendo los enlaces en la misma página. Mírate cómo lo hace Mikmoro en este ejemplo que tiene en su cofre de los tesoros

http://www.araudi.net/efecto_mootool..._mootools.html

Espero te sea de ayuda

Edito:

En lo que localicé el enlace exacto Buzu me ganó por la mano.
Mejor, dos por el precio de una

marx-pola · #6 (**permalink**) 22/01/2009, 13:16

Cita:

Iniciado por kseso?

Vale, Marx-Pola.
No entendí bien y además en mi código anterior se me pasó quitar las clase a la pestaña CSS.
Lo corrijo.

OK, abriendo los enlaces en la misma página. Mírate cómo lo hace Mikmoro en este ejemplo que tiene en su cofre de los tesoros

http://www.araudi.net/efecto_mootool..._mootools.html

Espero te sea de ayuda

Edito:

En lo que localicé el enlace exacto Buzu me ganó por la mano.
Mejor, dos por el precio de una

kseso?: que bueno que está lo que me enviaste. Está de lujo y lo voy a aplicar en una de las webs que tengo para hacer. Muchísimas gracias por tu ayuda.

Buzu :

Eres un master. Quedó impecable lo que me enviaste y me surgió una última duda porque no lo he podido aplicar a un juego de solapas que ya tengo armado y mi pregunta es la siguiente:

Tengo 2 solapas ya creadas pero con 2 jpg cada una y las mismas ya tienen impreso el texto:
video_on.jpg (solapa que se está viendo o activa)
video_off.jpg (solapa que no se está viendo o inactiva)

fotos_on.jpg (solapa que se está viendo o activa)
fotos_off.jpg (solapa que no se está viendo o inactiva)

Y aquí va la pregunta... con css o javascript, ¿se puede hacer algo parecido a lo anterior y que al presionar sobre una solapa esta se quede como activada, como la que se está viendo en ese momento?

Mil gracias por todo otra vez....... de corazon.

Saludos. Marx.

marx-pola · #7 (**permalink**) 22/01/2009, 17:52

Con imágenes no se puede, ¿no?

Mikmoro · #8 (**permalink**) 22/01/2009, 18:33

Cita:

Iniciado por marx-pola

Y aquí va la pregunta... con css o javascript, ¿se puede hacer algo parecido a lo anterior y que al presionar sobre una solapa esta se quede como activada, como la que se está viendo en ese momento?

De hecho me ha parecido entender que era tu consulta inicial.
Para que en una solapa quede el enlace como activo sólo tienes que darle ese estado en la CSS mediante active (para IE) y focus (para el resto), con lo que se coseguirá ese aspecto mientras está activo.

Por ejemplo, quieres que tenga el mismo aspecto al estar activo que al pasar el ratón:

a:hover, a:active, a:focus {...propiedades... }

Al estar pulsada se verá igual que al pasar el ratón por encima.

No sé si era eso lo que buscabas.

marx-pola · #9 (**permalink**) 22/01/2009, 20:02

Lo modifiqué y logré avanzar un paso. El código es este:

Código HTML:

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("1.jpg") 0 0 no-repeat;
text-decoration: none;
}

.rollover a:hover { 
background-position: 0 -35px;
color: #049;
background: url("1b.jpg") 0 0 no-repeat;
}

.rollover a:active {
background-position: 0 -70px;
background: url("1b.jpg") 0 0 no-repeat;
}


<script type="text/javascript">
	function aggEvento(){
		var links = document.getElementById('rollover').getElementsByTagName('a');
		for(i=0; links[i]; i++){
			links[i].onclick = function(){
				var links = document.getElementById('rollover').getElementsByTagName('a');
				for(j=0; links[j]; j++){
					links[j].className = "";
				}
				this.className = 'current';
			}
		}
	}
</script>

</head>

<body id="top" onload="aggEvento()">

<div class="rollover" id="rollover">
<a href="#" class="current">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>

</body>

Y ahora me aparece así:

Pero acá viene el tema:
- Si hago click en cualquier parte de la página, la solapa activa (la de color bordo) pasa al estado de las demás. ¿Se puede modificar eso?
- cuando cargo la página, la primer solapa no aparece como activada. ¿Se puede hacer q se active al cargarse la página?

Desde ya, muchas gracias por todo.

Saludos. Picasso

marx-pola · #10 (**permalink**) 26/01/2009, 11:26

Hola a todos! Logré hacer con este sencillo código CSS que las imágenes se carguen y al pasar el mouse por arriba que hagan el rollover correspondiente:

Código:

a.videos {
	background: url('1.jpg') left no-repeat;
	background-position: 0px ;
	text-decoration: none;
	pointer:cursor;
	padding-left: 124px;
	height:33px;

}

a.videos:hover {
	background: url('1b.jpg') left no-repeat;
	background-position: 0px;
	text-decoration: none;	
	padding-left: 124px;
	pointer:cursor;
} 
a.fotos {
	background: url('2.jpg') left no-repeat;
	background-position: 0px ;
	text-decoration: none;
	pointer:cursor;
	padding-left: 124px;
	height:33px;

}

a.fotos:hover {
	background: url('2b.jpg') left no-repeat;
	background-position: 0px ;
	text-decoration: none;	
	padding-left: 124px;
	pointer:cursor;
}

Lo único que no supe hacer es aplicar el script aportado por BUZU que hace que la primer solapa quede activa al cargar la página y que al presionar sobre otra... se desactive la primera y se active la que se presiona.

¿Me podrían decir cómo aplicarlo para hacer esto?

Muchas gracias y saludos.

MArx.

marx-pola · #11 (**permalink**) 27/01/2009, 06:27

¿Una ayudita porfa?

buzu · #12 (**permalink**) 28/01/2009, 12:53

pues te puse el código completo, ahi puedes ver exactamente como hacerlo. Que es exactamente lo que no puedes hacer? o que es lo que no entiendes?

marx-pola · #13 (**permalink**) 31/01/2009, 12:44

Cita:

Iniciado por buzu

pues te puse el código completo, ahi puedes ver exactamente como hacerlo. Que es exactamente lo que no puedes hacer? o que es lo que no entiendes?

Buzu: tu código funciona de maravillas amigo

. Lo apliqué en una parte de la web que le estoy armando a un cliente pero me surgió un problema con otras solapas que ya tenía armada y lo que no sé es como aplicar el código que activa y desactiva las solapas, lo que me has pasado en javascript.

Te explico... es un mismo menú de solapas como el anterior PERO cada solapa contiene 2 archivos jpgs individuales que muestran el estado de cada una de ellas... uno ACTIVO y el otro INACTIVO como figura en la imagen.

Actualmente con el siguiente código CSS, las solapas me aparecen TODAS como INACTIVAS.

Código:

a.sol1 {
   background: url('1.jpg') left no-repeat;
   background-position: 0px ;
   text-decoration: none;
   pointer:cursor;
   padding-left: 124px;
   height:33px;

}

a.sol1:hover {
   background: url('1b.jpg') left no-repeat;
   background-position: 0px;
   text-decoration: none;   
   padding-left: 124px;
   pointer:cursor;
} 
a.sol2 {
   background: url('2.jpg') left no-repeat;
   background-position: 0px ;
   text-decoration: none;
   pointer:cursor;
   padding-left: 124px;
   height:33px;

}

a.sol2:hover {
   background: url('2b.jpg') left no-repeat;
   background-position: 0px ;
   text-decoration: none;   
   padding-left: 124px;
   pointer:cursor;
}
.........
// hasta la solapa 4

Y lo que me esta volviendo loco

es saber como aplicar lo que me has enviado para que tenga la misma funcionalidad:

- cuando entro a la web, que aparezca la primer solapa como ACTIVADA (como muesta el primer menú armado en la imagen de arriba).
- cuando selecciono otra solapa, que se active y se desactiven las demás (como muesta el segundo menú armado en la imagen de arriba).

Ojalá no sea muy complicado y de corazón espero puedas ver esto en algún momentito que tengas.

Desde ya millones de gracias por tu tiempo.

Saludos. MArx.

marx-pola · #14 (**permalink**) 01/02/2009, 16:33

Buzu... estuve tratando de utilizar el código que me enviaste. Te dejo un link para que veas como funciona. Las solapas trabajan dentro de la misma página y ésta no se resetea. Cada solapa después llama a un <div> que trae la información de cada una de ellas. No lo puse porque eso ya lo tengo resuelto.

El primer menú es el que me pasaste tú y funciona PERFECTAMENTE

, pero trabaja solo con 2 imágenes, la misma para todos los menúes, la del fondo y la del rollover que es la misma que queda ACTIVA cuando presionamos sobre ella.

El otro es el que me esta volviendo loco y aquí es donde estoy tratando de utilizar diferentes imágenes para cada menú. Solo me funciona el rollover de la solapa FOTOS pero al presionarla no se activa... y no se desactiva la otra.

MENU CON SOLAPAS QUE SE ACTIVAN Y DESACTIVAN

Otro problema que me surgió es que en el IE se ve perfectamente pero con Firefox se me desarmó todo.

No sé si estaré buscando mal o qué pero es increible que no haya podido encontrar absolutamente nada en la net sobre lo que estoy tratando de hacer... aunque en realidad si hay y de a montones, pero NINGUNA trabaja con diferentes imágenes para los menúes.

Todos los ejemplos trabajan con TEXTO en el menú, un UNICO fondo hecho en CSS y un UNICO archivo que hace el efecto del rollover.

No me queda más que agradecerte por todo.

Un cordial saludo. Marx.

locoxchacho · #15 (**permalink**) 02/02/2009, 06:17

bueno, ESTO ES EXACTAMENTE LO QUE IBA A PREGUNTAR EN EL FORO!!!

me viene de pelos, asique... muchisimas gracias!!! espero llegar a casa para aplicarlo, pero creo que es todo lo que buscaba... se agradece!!

pablo

marx-pola · #16 (**permalink**) 02/02/2009, 09:04

Seguro que si amigo. Sería un golazo poder armar algo que no esta en la net. Llevo 3 días buscando y solo aquí dentro del foro me han ayudado a acercarme más a lo que necesito.

Si se resuelve, este post merecería estar en las faqs.

Saludos. Marx.

locoxchacho · #17 (**permalink**) 02/02/2009, 20:59

tengo una consulta sobre la parte donde se agrega la clase "current", en el JS.

Yo tengo otro javascript, que es para que el menu se despliegue para abajo y se repliegue luego. Ahora, si pongo cada JS sin poner el otro, funcionan, pero cuando pongo los dos juntos, no...

probe de las dos formas, separados, y juntos:

Código:

<script type="text/javascript">
var visto = null;
function mostrar(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==visto) ? 'none' : 'block';
  if (visto != null)
    visto.style.display = 'none';
  visto = (obj==visto) ? null : obj;
};
	function aggEvento(){
		var links = document.getElementById('menu').getElementsByTagName('a');
		for(i=0; links[i]; i++){
			links[i].onclick = function(){
				var links = document.getElementById('menu').getElementsByTagName('a');
				for(j=0; links[j]; j++){
					links[j].className = "";
				}
				this.className = 'current';
			}
		}
	}
</script>

y asi:

Código:

<script type="text/javascript">
var visto = null;
function mostrar(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==visto) ? 'none' : 'block';
  if (visto != null)
    visto.style.display = 'none';
  visto = (obj==visto) ? null : obj;
}
</script>
<script type="text/javascript">
	function aggEvento(){
		var links = document.getElementById('menu').getElementsByTagName('a');
		for(i=0; links[i]; i++){
			links[i].onclick = function(){
				var links = document.getElementById('menu').getElementsByTagName('a');
				for(j=0; links[j]; j++){
					links[j].className = "";
				}
				this.className = 'current';
			}
		}
	}
</script>

Pero nada. Hago esta pregunta aca pq es el JV del CSS. Y aparte, en el foro de JS no son de responder mucho :S

espero que me puedan ayudar, muchas gracias!!

pablo

marx: con respecto a tu ejemplo que subiste, como hiciste para las distintas imagenes?? pq siempres pones de fondo img1.jpg y hover, img1b.jpg.. pero te aparecen tambien im2, img3, etc.. eso no lo logro hacer, le di la vuelta creando tantas clases como items del menu tengo, pero es un poco mas liado que tu codigo... podrias explicarlo un poco mejor como lo hiciste? o mikmoro, o alguien que lo sepa bien?? gracias!!

locoxchacho · #18 (**permalink**) 03/02/2009, 07:18

nadie me puede ayudar?? :S marx?? mikmoro??

gracias!!

Mikmoro · #19 (**permalink**) 03/02/2009, 07:43

Pues yo no soy un maestro en javascript, pero de todas maneras, hay un hilo tuyo en el que preguntabas estos mismo, yo te respondí con cómo hacerlo con mootools, luego pediste cómo hacer el cambio de solapa activa, te lo puse y nucna has respondido a ese tema.
Aclárame esto, por favor.

locoxchacho · #20 (**permalink**) 03/02/2009, 08:21

Si, tienes razon. pero no es que me haya olvidado de responderte, sino que sigo tratando. Este tema mas o menos lo queria: o sea, puedo hacer que la clase activo quede marcada cuando esta en focus, etc... pero la cosa es que para el menu uso imagenes, y no texto (todo porque uso una tipografia no soportada).. entonces, lo que se me habia ocurrido era crear una clase para cada item del menu, donde defina el hover, active, focus en cada una de ella. Pero tengo como 20 items en el menu, y serian muchas clases. Sin embargo, no se me ocurre otra solucion. Ese es el problema que tengo. Aparte, de que en internet explorer, no se por que, se me desarma todo (de paso, si me pueden ayudar ahi para arreglar con IE, seria genial!). Esto es lo que logre con UNA clase.

http://www.proyectoshuerto.com.ar/nu...dad/final.html

Tendria que hacer lo mismo, crear una clase con cada item del menu??

Gracias, y perdon!

Pablo

Mikmoro · #21 (**permalink**) 03/02/2009, 09:44

Pues no sé si recuerdas el hilo del que te hablo, pero no tenía mucho que ver con active ni focus:

http://www.forosdelweb.com/f53/exist...1/#post2770530

locoxchacho · #22 (**permalink**) 03/02/2009, 11:14

si, estamos hablando del mismo hilo. Pero entonces, una de dos: o yo no entiendo el ejemplo (es este, no?? http://www.araudi.net/efecto_mootool..._mootools.html), o estoy mirando otro ejemplo, o tu no entiendes que es lo que pretendo.

Repito por las dudas: no quiero que mis menues sean texto, sino que sean imagenes. Y la imagen cuando es link es una, y es otra cuando el raton esta sobre el vinculo o esta activo. ESO es lo que quiero, sin crear tantas clases.

Ahora, espero que hayas entendido mi pregunta, o que puedas explicarme bien el ejemplo porque no lo entendi.

De nuevo, muchisimas gracias, y perdon por la insistencia!

Un saludo.

Pablo.

Mikmoro · #23 (**permalink**) 03/02/2009, 11:32

No me molesta la insistencia en absoluto, me molesta (y mucho) que dejaras sin contestar esa cuestión y te sumaras a otro hilo para preguntar lo mismo.

Te entiendo perfectamente desde el principio, pero no sé por qué aprecias diferencia entre hacerlo con texto o con imágenes. ¿Quieres usar imágenes de reemplazo? ¿con imágenes insertadas en el HTML vía <img src="... ? Entonces efectivamente, el cambio de clase puede que no te sirva (o sí), pero no te lo recomiendo en absoluto.
Deberías hacerlo con una lista (UL), con elementos de lista (LI), enlaces (A), vamos, un menú en toda regla, y colocando las imágenes como fondos, no insertadas.

Si no quieres y prefieres hacerlo tal y como se estaba planteando en este hilo, yo me quito de enmedio. Olvídalo. Imagina que no he dicho nada.

Saludos.

locoxchacho · #24 (**permalink**) 03/02/2009, 12:10

si, eso es lo que tenia planeado hacer.... pero entonces, el problema que se me planteaba era que tenia que crear tantas clases para los <li> como items del menu tenga?? Porque si cada <li> tiene un imagen de fondo distinta, entonces esto lo debo hacer con clases... estoy en lo cierto, o hay una parte mágica de CSS que todavia no entendi???

muchas gracias mikmoro, y perdon nuevamente por no contestar el otro, pero me parecio que era el mismo tema, se ve que no.

Un saludo y muchas gracias!

Un saludo

marx-pola · #25 (**permalink**) 03/02/2009, 14:35

Lo que necesitas es exactamente lo que estuve preguntando y es lo que figura en el link que pudese más arriba... MENU CON SOLAPAS QUE SE ACTIVAN...

El menu de arriba trabaja SOLO con 2 imágenes... ese funciona perfecto... pero en la parte de abajo hice un menú de 2 imágenes por celda y ESE es el que no funciona.

Creo que estamos hablando de lo mismo... la tipografía que me pidieron NO puede usarse si no es en la imagen... por eso DEBE estar incrustada en la imagen.

Todos los menues que vi trabajan con un fondo y con texto por encima pero NADIE hizo todavía lo que estamos preguntando... increíble en la net. :)

Saludos amigos. MArx.

PD: Si se soluciona, este post va para las faqs... jajaja !!!

Mikmoro · #26 (**permalink**) 03/02/2009, 17:32

En fin, bueno, aunque para mi que en el hilo hay un lío tremendo, aquí te pongo una forma bastante sencilla de resolverlo.

A ver si las ves clara.

locoxchacho · #27 (**permalink**) 03/02/2009, 21:39

Mikmoro, gracias por tu ayuda!! De todas formas, como yo ya tenia 2 imagenes por item, y no una sola, entonces he hecho como te habia mencionado, con una clase distinta por item de menu.

Aca te dejo el link de lo que hice, y fijate que piensas. Te agradeceria mucho tu opinon acerca de mi solucion.

Desde ya, muchas gracias, mikmoro, por colaborar siempre, y perdon nuevamente por enliar un poco las cosas y mezclar. :S

http://www.proyectoshuerto.com.ar/nu...dad/index.html

Un saludo!!

Pablo.

Dalvenjha · #28 (**permalink**) 04/02/2009, 00:01

Muy buena propuesta la de Mikel en el uso de sprites para solucionar el problema "que no tenía solución en internet". Te has anotado un punto más hombre.

Con javascript y DOM podríamos hacer más corto y sin uso de clases lo que estamos haciendo ahora mismo, claro usando sprites. Por lo menos es lo que pienso, dejame pensar un poco más para pulir mi idea. Pero te voy poniendo la idea básica.

Digamos que tu lista tenga por ID "listaimágenes" lo que haríamos sería lo siguiente:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var imagen = 0;
var suma = 1;
function backchange(){
this.style.backgroundPosition = "left bottom";
}
function backchanger(){
this.style.backgroundPosition = "left top";
}
function sprites(){
var listaimas = document.getElementById('listaimagenes').getElementsByTagName('a');
imagen+=suma;
for(var i=0; i<listaimas.length; i++) {
  var listele = listaimas[i];
  listele.style.background = "url("+imagen+".jpg)";
  listele.onblur = backchanger;
  listele.onfocus = backchange;
  listele.onmouseover = backchange;
    }
}


</script>
<style type="text/css">
#listaimagenes{
margin:0;
padding:0;
width:300px;
height:33px;
background:black;
}
#listaimagenes li{
display:block;
float:left;
width:124px;
height:33px;
overflow:hidden;
}
#listaimagenes li a{
display:block;
width:100%;
height:100%;
}

#listaimagenes li a#cambio{
background-position: bottom left;
}


</style>
</head>
<body onload="sprites();">
<ul id="listaimagenes">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</body>
</html>

Esto funcionaría para el cambio entre enfocado y desenfocado. aún estoy viendo el caso del hover. Es una alternativa pero sin definir clases o ids a cada uno de los elementos.

=D.

Saludos!!

PD.- porsupesto tus imágenes tendrían que ser tantas como elementos de lista tengas, y tendrías que ponerles de nombres, números, del 1 hasta donde llegues xD.

Mikmoro · #29 (**permalink**) 04/02/2009, 02:48

Cita:

Iniciado por locoxchacho

Aca te dejo el link de lo que hice, y fijate que piensas. Te agradeceria mucho tu opinon acerca de mi solucion.

Pero tú estás usando jquery, y eso cambia el panorama por completo, como en el otro caso en el que te proponía la solución con mootools.

Si te funciona ya está bien, desde luego.

Cita:

Iniciado por Dalvenjha

Con javascript y DOM podríamos hacer más corto y sin uso de clases lo que estamos haciendo ahora mismo, claro usando sprites.

También es una buena posibilidad. Es la ventaja de conocer bien javascript (como tú), que puedes buscar la manera más eficiente. Yo realmente me he basado en el javascript que aportó buzu.

Lo cierto es que creo que yo lo resolvería con una sola imagen para todas las solapas tanto activas como inactivas, usando los ID para colocar el desplazamiento del fondo. Si en el ejemplo no lo he hecho con dos clases en lugar de ID, es porque el maldito IE6 no funciona con dos clases.

Cita:

Iniciado por marx-pola

la tipografía que me pidieron NO puede usarse si no es en la imagen... por eso DEBE estar incrustada en la imagen.

No, como ves NO DEBE usarse incrustada la imagen en el HTML, sino como basckground.

Cita:

Iniciado por marx-pola

Todos los menues que vi trabajan con un fondo y con texto por encima pero NADIE hizo todavía lo que estamos preguntando... increíble en la net. :)

SI, lo que estás preguntando SE HACE muchas veces, y es bastante habitual.

Cita:

Iniciado por marx-pola

PD: Si se soluciona, este post va para las faqs... jajaja !!!

No, realmente no es necesario que vaya a la FAQ (de hecho puede que ya esté), porque es algo bastante habitual, sólo que has generado una gran confusión entre las imágenes incrustadas en el HTML, pero con un "sencillísimo" CSS que te daba la solución (como basckground), hablando de active y focus, etcétera.

En realidad era todo bastante más sencillo, pero la ambigüedad de términos y conceptos es lo que suele traer.

locoxchacho · #30 (**permalink**) 04/02/2009, 06:59

Gracias, Mikmoro, por tu respuesta.
Ahora, tengo una duda, que cree que vale tanto para mi metodo como para el que ofreciste vos.

Yo tengo un ifram donde se abre el link que apretamos en el menu. Cuando hago clic, queda como activo el link, pero una vez que hago clic en el iframe, se desactiva. Hay alguna forma de solucionar eso? O una alternativa al iframe, que no sea la de motools, pq debo cargar muchas secciones con flash, y la pagina se tornaria muy pesada de cargar??

Muchas gracias, y mikmoro, nuevamente, perdon por liar el hilo. Del error aprende el hombre, no??

Un saludo!

Pablo

Pablo.