Foros del Web » Creando para Internet » CSS »

Problema con vinculos en imagenes

Estas en el tema de Problema con vinculos en imagenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/12/2008, 22:46
 
Fecha de Ingreso: diciembre-2008
Mensajes: 38
Antigüedad: 9 años
Puntos: 0
Problema con vinculos en imagenes

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:
<div id="slide_buttons">

<a class="slide1" href="#">Link1</a>

<a class="slide2" href="#">Link2</a>

<a class="slide3" href="#">Link3</a>
</div>
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! =)

Última edición por nusee; 03/12/2008 a las 13:26
  #2 (permalink)  
Antiguo 02/12/2008, 23:03
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Problema con vinculos en imagenes

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!
  #3 (permalink)  
Antiguo 03/12/2008, 08:32
 
Fecha de Ingreso: diciembre-2008
Mensajes: 38
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con vinculos en imagenes

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! =)

Última edición por nusee; 03/12/2008 a las 13:28
  #4 (permalink)  
Antiguo 03/12/2008, 10:08
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Problema con vinculos en imagenes

¡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...
  #5 (permalink)  
Antiguo 03/12/2008, 10:23
 
Fecha de Ingreso: diciembre-2008
Mensajes: 38
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con vinculos en imagenes

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

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

Saludos! =)
  #6 (permalink)  
Antiguo 03/12/2008, 13:11
 
Fecha de Ingreso: diciembre-2008
Mensajes: 38
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con vinculos en imagenes

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! =)

Última edición por nusee; 03/12/2008 a las 13:48
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 04:46.