Problema con vinculos en imagenes

nusee · #1 (**permalink**) 02/12/2008, 22:46

Hola! Disculpen las molestias, quisiera realizar lo siguiente, yo tengo 3 imagenes ubicadas y quisiera que funcionen de la siguiente manera:

Comienzo:

Hover (suponiendo obviamente que el mouse esta posicionado sobre el tercero en este caso):

Funcionamiento (la idea es que al seleccionar otro vinculo quede seleccionado este, haciendo que el que estaba anteriormente seleccionado deje de estarlo):

XHTML

Cita:

CSS

Cita:

#slide_buttons{
width: 100px; height: 20px; margin: auto; position: relative; right: -31px;
}

#slide_buttons a.slide1{
background: url(images/slide_selected/selected.png) no-repeat; width: 7px; height: 7px; text-indent: -1000em; position: absolute; margin-top: 6px; outline: 0;
}

#slide_buttons a.slide2{
background: url(images/slide_unselected/unselected.png) no-repeat; width: 7px; height: 7px; text-indent: -1000em; position: absolute; margin-top: 6px; margin-left: 16px; outline: 0;
}

#slide_buttons a.slide3{
background: url(images/slide_unselected/unselected.png) no-repeat; width: 7px; height: 7px; text-indent: -1000em; position: absolute; margin-top: 6px; margin-left: 32px; outline: 0;
}

Muchisimas gracias por su ayuda y disculpen nuevamente.

Saludos! =)

rb3m · #2 (**permalink**) 02/12/2008, 23:03

Una manera de hacerlo es poniéndole id al body. Por ejemplo:

<body id="pag1">

<body id="pag2">

etc.

Y teniendo tu menú así:
<div id="navegacion">
<a id="slide1">bla </a>
<a id="slide2">ble</a>
<a id="slide3">bli</a>

Ahora, aquí viene la parte chingüengüenchona, en el css pones:

#navegacion a {
background: url(not-selected.jpg) etc etc.
}

#pag1 #navegacion a#slide1,
#pag2 #navegacion a#slide2,
#pag3 #navegacion a#slide3 {
background: url(selected.jpg) etc etc.
}

¡tarán!

nusee · #3 (**permalink**) 03/12/2008, 08:32

Hola rb3m, muchisimas gracias por tu respuesta. Nose si es posible aplicar esto a mi ejemplo, me falto decir algo muy importante, lo cual te pido disculpas por no haberlo dicho antes ya que se me paso de largo =P

El problema es que estos vinculos son para un efecto horizontal con slide (Mootools), es decir que al hacer click no deberia de pasar a otra pagina, sino que realiza todo sobre la misma, es por esto que se me complica.

Muchas gracias nuevamente y disculpa el no haber puesto ese dato.

Saludos! =)

rb3m · #4 (**permalink**) 03/12/2008, 10:08

¡Uuuh! Tan bonito que me había quedado el ejemplo :(

Bueno, ni modo, hay que aplicar otra solución, afortunadamente tampoco es tan difícil. En palabras del maestro Yoda: "Javascript, buscas a javascript".

Puedes crear una función que sea más o menos así:

function cambiarEstilo (slider) {
elegido = document.getElementById(slider);
document.getElementById("Slider1").className = "notSelected";
document.getElementById("Slider2").className = "notSelected";
document.getElementById("Slider3").className = "notSelected";
elegido.className = "Selected";
}

o algo así. Y luego asignarla al onClick de cada vínculo.

Probablemente MooTools tenga una manera mucho más fácil de hacer esto, pero no lo conozco muy bien. Si fuera jQuery...

nusee · #5 (**permalink**) 03/12/2008, 10:23

Muchas gracias de nuevo rb3m, voy a intentar hacerlo de esa forma.

Igualmente no tenes idea si es posible realizarlo usando CSS no?

Saludos! =)

nusee · #6 (**permalink**) 03/12/2008, 13:11

Bueno, ya lo pude solucionar =)

Agregue lo siguiente en el codigo JS

Cita:

onWalk: function(currentItem,currentHandle){
$$(this.handles,selection).removeClass('active');
$$(currentHandle,selection[this.currentIndex]).addClass('active');

Despues agregue lo siguiente al codigo CSS

Cita:

#slide_buttons #selection a:hover{
background: url(images/slide_selected/selected.png) no-repeat;
}

#slide_buttons #selection a.active{
background: url(images/slide_selected/selected.png) -no-repeat; cursor: default;
}

Muchas gracias a todos igualmente!

Saludos! =)