¿Cómo logro que se pueda dar clic en la imagen?

Jett · #1 (**permalink**) 26/02/2013, 15:07

Buen día. Estoy comenzando a editar el sitio www.c-octaviopaz.edu.mx en base a una plantilla. El problema es que en el slider que aparece en la página principal, aparecen 3 imágenes que van cambiando. Quiero lograr que se pueda dar clic a cada una de esas imágenes y que cada una de las 3 tenga su propio enlace a donde dirigir.

Intenté añadiendo los enlaces mediante HTML en la parte donde están las imágenes en el código pero no funcionó, y no sé casi nada sobre CSS, en caso de que sea ahí donde se deban añadir los enlaces. ¿Podrían ayudarme, por favor? Mil gracias de antemano.

pitufoweb · #2 (**permalink**) 26/02/2013, 16:44

Hola,

Esto no tiene nada que ver con CSS. Tu problema es de HTML.

Si no te funciona cuando agregas los enlaces en el HTML, es por que seguramente no lo estas haciendo bien. Muestra el código para ver como lo haces,

Saludos

Jett · #3 (**permalink**) 26/02/2013, 18:10

Hola. Este es el código HTML que aparece del slider:

Código:

<div class="row-3">
					<div class="slider-wrapper">
						<div class="slider">
						  <ul class="items">
							<li><img src="images/slider-img1.jpg" alt="">
								<strong class="banner">
									<strong class="b1">mini</strong>
									<strong class="b2">olimpiadas</strong>
									<strong class="b3">Ya estan disponibles las fotografias de nuestro ultimo evento.</strong>
								</strong>
							</li>
							<li><img src="images/slider-img2.jpg" alt="">
								<strong class="banner">
									<strong class="b1">conozca nuestras</strong>
									<strong class="b2">promociones</strong>
									<strong class="b3">Tenemos promociones exclusivas para usted.</strong>
								</strong>
							</li>
							<li><a href="/conocenos"><img src="images/slider-img3.jpg" alt="">
								<strong class="banner">
									<strong class="b1">plan</strong>
									<strong class="b2">anual</strong>
									<strong class="b3">Vea todos los acontecimientos que se llevaran a cabo a lo largo del ciclo escolar.</strong>
								</strong>
							</a></li>
						  </ul>
						  <a class="prev" href="#">prev</a>
						  <a class="next" href="#">prev</a>
						</div>
					</div>
				</div>
			</header>

Mil gracias de antemano por la ayuda.

juangemelo01 · #4 (**permalink**) 27/02/2013, 01:36

Primero pondré tu código mas legible

Código HTML:

Ver original<div class="row-3">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li><img src="images/slider-img1.jpg" alt="">
<strong class="banner">
<strong class="b1">mini</strong>
<strong class="b2">olimpiadas</strong>
<strong class="b3">Ya estan disponibles las fotografias de nuestro ultimo evento.</strong>
</strong>
</li>
<li><img src="images/slider-img2.jpg" alt="">
<strong class="banner">
<strong class="b1">conozca nuestras</strong>
<strong class="b2">promociones</strong>
<strong class="b3">Tenemos promociones exclusivas para usted.</strong>
</strong>
</li>
<li><a href="/conocenos"><img src="images/slider-img3.jpg" alt="">
<strong class="banner">
<strong class="b1">plan</strong>
<strong class="b2">anual</strong>
<strong class="b3">Vea todos los acontecimientos que se llevaran a cabo a lo largo del ciclo escolar.</strong>
</strong>
</a></li>
</ul>
<a class="prev" href="#">prev</a>
<a class="next" href="#">prev</a>
</div>
</div>
</div>
</header>

nunca eh trabajado con un "slider", pero por lo que veo, lo que tienes que incorporar lo siguiente en donde se encuentre tu imagen para mostrar

Código HTML:

Ver original<a href="url de la web" ><img src="url de la imagen"></a>

en tu caso seria los siguiente

Código HTML:

Ver original<a href="url de la web" ><img src="images/slider-img1.jpg" alt=""></a> 
<a href="url de la web" ><img src="images/slider-img2.jpg" alt=""></a> 
<a href="url de la web" ><img src="images/slider-img3.jpg" alt=""></a>

Repito, no eh manejado nunca SLIDER, pero en teoría, esto debería funcionar.

Código HTML:

Ver original<a class="prev" href="#">prev</a>
<a class="next" href="#">prev</a>

por lo que entiendo, aquí te dice en automático que cuando le des clic al previo o siguiente, no te vinculara a ningún lado.

espero que te sirva amigo.

Triby · #5 (**permalink**) 27/02/2013, 01:39

Más legible?... sin indentar?

Jett · #6 (**permalink**) 27/02/2013, 12:28

Hola. Hice eso pero no pasó nada. No es posible darle clic a las imágenes y no llevan a ningún lado. ¿Cuál será el problema? Saludos.

pzin · #7 (**permalink**) 27/02/2013, 12:34

A ver si va a ser que las imágenes tiene un z-index negativo o alguna historia así. Los plug-ins a veces son así de guays.

¿Tienes algo online para verlo?

Jett · #8 (**permalink**) 27/02/2013, 12:58

Disculpa mi ignorancia, pero a qué te refieres con algo online?

pzin · #9 (**permalink**) 27/02/2013, 13:20

Pues a que si tienes colgado lo que estás haciendo en algún sitio, alguna URL para verlo in situ y ver qué es lo pasa.

Jett · #10 (**permalink**) 27/02/2013, 13:24

Sí. Aún lo estoy editando, pero como dije en el primer mensaje, el sitio es www.c-octaviopaz.edu.mx
Saludos y gracias de antemano.

mdk · #11 (**permalink**) 27/02/2013, 13:31

Porque no pruebas con javascript o con una librería del mismo como jquery, añades un identificador a cada imagen, y luego capturas cada uno de los elementos, y les asignas la url?

Jett · #12 (**permalink**) 27/02/2013, 13:39

Porque no sé hacer nada de eso, francamente :/
¿Es demasiado como para explicarlo?

mdk · #13 (**permalink**) 27/02/2013, 14:26

Si este es el código de la imagen, añadirías el ID:

<img id="elIDquequieras" src="images/slider-img1.jpg" alt="">

A continuación cargarías la librería de jquery, y en el código de javascript tendrías que poner algo como:

Código:

<script language="JavaScript" type="text/javascript">
$(document).ready(function() { 
	$("#elIDquequieras").click(function(evento) {
		evento.preventDefault();
		$("#CapaDestino").load("direccíon de link");
	});
});
</script>

Algo así te serviría. Así harías que al hacer click en la imagen con el ID que hayas puesto, te cargaría la dirección que le digas en CapaDestino. (o sea.. en un div).

juangemelo01 · #14 (**permalink**) 27/02/2013, 15:34

Cita:

Iniciado por Jett

Hola. Hice eso pero no pasó nada. No es posible darle clic a las imágenes y no llevan a ningún lado. ¿Cuál será el problema? Saludos.

Ya probaste eliminando esto de tu codigo?

Código HTML:

<a class="prev" href="#">prev</a>
<a class="next" href="#">prev</a>

pitufoweb · #15 (**permalink**) 27/02/2013, 15:49

Cita:

Iniciado por juangemelo01

Ya probaste eliminando esto de tu codigo?

Código HTML:

<a class="prev" href="#">prev</a>
<a class="next" href="#">prev</a>

juangemelo01

Esos enlaces son para la navegación del slider.

----------------------

El problema con ese script que estas usando, es que manda todo el código inicial al carajo.

No lo he revisado a fondo, pero seria mas fácil si leyeras la documentación de ese script.

Saludos

pzin · #16 (**permalink**) 27/02/2013, 15:52

Cita:

Iniciado por Bonez

A ver si va a ser que las imágenes tiene un z-index negativo o alguna historia así. Los plug-ins a veces son así de guays.

¿Tienes algo online para verlo?

Pues como iba diciendo...

Las imágenes que están en el slider son en realidad imágenes de fondo. Así que las imágenes directamente no puedes enlazarlas. Si acaso el elemento que lo contiene, pero, supongo que ese elemento es creado mediante un plug-in —el del slider.

pzin · #17 (**permalink**) 27/02/2013, 15:52

Cita:

Iniciado por pitufoweb

juangemelo01
El problema con ese script que estas usando, es que manda todo el código inicial al carajo.

Indeed!

Jett · #18 (**permalink**) 27/02/2013, 16:12

Cita:

Iniciado por mdk

Si este es el código de la imagen, añadirías el ID:

<img id="elIDquequieras" src="images/slider-img1.jpg" alt="">

A continuación cargarías la librería de jquery, y en el código de javascript tendrías que poner algo como:

Código:

<script language="JavaScript" type="text/javascript">
$(document).ready(function() { 
	$("#elIDquequieras").click(function(evento) {
		evento.preventDefault();
		$("#CapaDestino").load("direccíon de link");
	});
});
</script>

Algo así te serviría. Así harías que al hacer click en la imagen con el ID que hayas puesto, te cargaría la dirección que le digas en CapaDestino. (o sea.. en un div).

Y, disculpa mi ignorancia pero, ¿cómo puedo hacer eso? Realmente hay cosas de las que sé muy poco.

************************************************

Gracias a todos por sus comentarios e intentar solucionar esto.

Sobre lo que comentaron de la documentación, ¿dónde podría verla? Saludos.

Jett · #19 (**permalink**) 27/02/2013, 16:34

Por cierto, en caso de que se requiera, la plantilla que estoy usando se puede descargar dando clic [URL="http://download.html5xcss3.com/down.php?cat=html5themes&host=templatesmonster&tem p=point"]aquí[/URL]. De nuevo, mil gracias de antemano a todos por su ayuda.

Jett · #20 (**permalink**) 28/02/2013, 13:30

Intenté hacer lo que me dijiste, pero francamente no supe cómo.

pzin · #21 (**permalink**) 28/02/2013, 15:07

Lo mejor que puedes hacer, es usar otro slider que no te haga la guarrada de cambiarte todo el markup. Creo que quedó claro que no se puede hacer lo que pretendes ya que el plug-in te cambia la estrutura del HTML de tal forma que la imagen ya no es un elemento como tal, sino una imagen de fondo de otro elemento.

Te va a ser más fácil usar otro diferente, que se ajuste más a lo que buscas. O hacerte algo propio, que en el fondo son bastante simple de hacer.

Jett · #22 (**permalink**) 28/02/2013, 15:37

¿Al hacer otro se puede modificar su tamaño para que tenga el mismo que el que uso actualmente, verdad?
¿Conoces algún slider o algún tutorial para hacer uno?
De paso, ¿me podrías aclarar qué es jquery? Lo he leído demasiado últimamente y no lo logro comprender.
Saludos.

pitufoweb · #23 (**permalink**) 28/02/2013, 17:09

puedes probar con este slider

http://jquery.malsup.com/cycle/

Saludos

Jett · #24 (**permalink**) 28/02/2013, 17:32

¿Y cómo logro instalar ese slider? Como dije antes, no entiendo ni qué es jquery, si es que es lo que se ocupa.

pitufoweb · #25 (**permalink**) 28/02/2013, 17:43

Ahí en la misma pagina te dice como usarlo.

Si no sabes al menos lo básico, te va hacer un poco complicado.

Edito.

Te dejo el código para que te sea mas fácil.

Código HTML:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>
</head>
<body>
	<div class="slideshow">
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	</div>
</body>
</html>

Nota: he eliminado en link de JQuery, pues tu plantilla ya lo tiene integrado.

Saludos