Ayuda para agregar un enlace a imágenes en un código HTML

  • Autor Autor Russho
  • Fecha de inicio Fecha de inicio
R

Russho

Gamma
Social Media
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas compañeros, lo que preguntare es una novatada 😕 pero no logro que funcione.


Tengo un codigo que me va cambiando las imagenes del foro pero solo es eso las imagenes, como podria agregarle que cuando pulcen la imagen valla a una direccion web en otra pestaña?

Este es el codigo

<table borde="0" cellspacing="{$theme['borderwidth']}"
cellpadding="{$theme['tablespace']}" class="tborder">

<tr>

<td class="thead"><strong> Patrocinadores de CoralsBlue</td>

</tr>

<td class="trow1 smalltext" align="center">
<script language="javascript">

//Aquí cambia los nombres de las imágenes .
var imagenes=new Array()

imagenes[0]=new Image (380,288);
imagenes[0].src="http://forobeta.com/images/image-slider-1.jpg"
imagenes[1]=new Image (399,291);
imagenes[1].src="http://forobeta.com/images/image-slider-2.jpg"
imagenes[2]=new Image (248,289);
imagenes[2].src="http://forobeta.com/images/image-slider-3.jpg"
imagenes[3]=new Image (215,366);
imagenes[3].src="http://forobeta.com/images/image-slider-4.jpg"
imagenes[4]=new Image (215,366);
imagenes[4].src="http://forobeta.com/images/image-slider-5.jpg"

cont=0
function presImagen()
{
if (document.all){
document.getElementById('foto').filters.blendTrans.apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans.play()
}
else
{
document.images.foto.src = imagenes[cont].src
}
if (cont < imagenes.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',8000)
//cada 5000 milisegundos (5 seg.) cambia la imagen.
//cambia la cantidad por el tiempo que quieras que transcurra entre imagen e imagen
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="presImagen()">
<img id="foto" src="tibidabo.jpg" style="filter:blendTrans(duration=3)">
<!-- la duración de la transición es de 3 segundos.
Cambia este valor según tus preferencias -->
</body>


</strong>

</tr>
</table>

Lo que esta en rojo son las imagenes.

:encouragement: Saludos
 
Remplaza cada uno de los rojos por esto:
Insertar CODE, HTML o PHP: 
enlace[0] = '<a href="URLdelenlace"><img src="URLdelaimagen"/></a>';
Me avisas si funciono :encouragement:
 
Tu me dices dejarlo asi ?

imagenes[0]=new Image (380,288);
enlace[0] = '<a href="URLdelenlace"><img src="URLdelaimagen"/></a>';
imagenes[1]=new Image (399,291);
enlace[0] = '<a href="URLdelenlace"><img src="URLdelaimagen"/></a>';
imagenes[2]=new Image (248,289);
enlace[0] = '<a href="URLdelenlace"><img src="URLdelaimagen"/></a>';
imagenes[3]=new Image (215,366);
enlace[0] = '<a href="URLdelenlace"><img src="URLdelaimagen"/></a>';
imagenes[4]=new Image (215,366);
enlace[0] = '<a href="URLdelenlace"><img src="URLdelaimagen"/></a>';
 
Facil, solo en tienes que poner
HTML: 
<a href="dirección del sitio web para el enlace">
    <img src="dirección del sitio web para la imagen" />
</a>
en lugar de la imagen y listo.
Gracias
 
😡 no funciona ni de una ni de otra forma 😕

No arranca la imagen, aparece la imagen rota :devilish:

o si alguien me puede facilitar un codigo donde las imagenes vallan cambiando pero que no sea tipo slider mas bien tipo banners.
 
HTML:
PHP: 
<div id="img">
	<a href="http://www.wikipwedia.com" target="_blank">
		<img src="http://img3.wikia.nocookie.net/__cb20111223194956/beybladevocaloidswarriorsrp/images/5/5b/Vocaloid_rin_len_anime_display-300x300.gif" alt="">
	</a>
</div>

JS:
PHP: 
var images = new Array();
var cont = 0;
images[0] = {
	img: 'http://img2.wikia.nocookie.net/__cb20131207090002/ttff/images/0/01/Anime-girl-gun-300x300.png',
	url: 'http://www.google.com'
}
images[1] = {
	img: 'http://oi47.tinypic.com/2196ff7.jpg',
	url: 'http://www.forobeta.com'
}
images[2] = {
	img: 'http://wanabrar.com/blog/wp-content/uploads/2012/08/29028310-300x300.jpg',
	url: 'http://www.facebook.com'
}
images[3] = {
	img: 'http://huashequ.com.cn/wp-content/uploads/2013/06/6f061d950a7b0208959b39f063d9f2d3572cc855-300x300.gif',
	url: 'http://www.twitter.com'
}
images[4] = {
	img: 'http://i.imgur.com/ClujG.gif',
	url: 'http://www.youtube.com'
}


function presImagen() {
	var imgd = document.getElementById('img');
	while (imgd.firstChild) {
	  imgd.removeChild(imgd.firstChild);
	}
	imgd.appendChild(createCode());
	if (cont < images.length-1)	cont ++;
	else	cont = 0;
	tiempo = window.setTimeout('presImagen()',1000)
}
function createCode() {
	var a = document.createElement('a');
	a.href = images[cont].url;
	a.target = '_blank';
	var img = document.createElement('img');
	img.src = images[cont].img;
	a.appendChild(img);
	return a;
}

window.onload = function() {
	presImagen();
}

http://jsfiddle.net/lombervid/owr9rLcd/1/embedded/result/
 
lombervid dijo:
HTML:
PHP: 
<div id="img">
	<a rel="nofollow" href="http://www.wikipwedia.com" target="_blank">
		<img src="http://img3.wikia.nocookie.net/__cb20111223194956/beybladevocaloidswarriorsrp/images/5/5b/Vocaloid_rin_len_anime_display-300x300.gif" alt="">
	</a>
</div>

JS:
PHP: 
var images = new Array();
var cont = 0;
images[0] = {
	img: 'http://img2.wikia.nocookie.net/__cb20131207090002/ttff/images/0/01/Anime-girl-gun-300x300.png',
	url: 'http://www.google.com'
}
images[1] = {
	img: 'http://oi47.tinypic.com/2196ff7.jpg',
	url: 'http://www.forobeta.com'
}
images[2] = {
	img: 'http://wanabrar.com/blog/wp-content/uploads/2012/08/29028310-300x300.jpg',
	url: 'http://www.facebook.com'
}
images[3] = {
	img: 'http://huashequ.com.cn/wp-content/uploads/2013/06/6f061d950a7b0208959b39f063d9f2d3572cc855-300x300.gif',
	url: 'http://www.twitter.com'
}
images[4] = {
	img: 'http://i.imgur.com/ClujG.gif',
	url: 'http://www.youtube.com'
}


function presImagen() {
	var imgd = document.getElementById('img');
	while (imgd.firstChild) {
	  imgd.removeChild(imgd.firstChild);
	}
	imgd.appendChild(createCode());
	if (cont < images.length-1)	cont ++;
	else	cont = 0;
	tiempo = window.setTimeout('presImagen()',1000)
}
function createCode() {
	var a = document.createElement('a');
	a.href = images[cont].url;
	a.target = '_blank';
	var img = document.createElement('img');
	img.src = images[cont].img;
	a.appendChild(img);
	return a;
}

window.onload = function() {
	presImagen();
}

http://jsfiddle.net/lombervid/owr9rLcd/1/embedded/result/
Hacer clic para expandir...

Gracias por compartir el codigo, como soy nuevo realmente no se como acomodarlo en mi web, pero esto es lo que busco, si me podrias brindar mas informacion te lo agradeceria, lo pegue en mi foro, le agregue la etiqueta <script> </script> pero solo se ve la primera imagen y no avanza a las siguientes, me podrias explicar un porme mejor, gracias.


lo e puesto asi. ( las url las dejo para no poner las mias.



<div id="img">
<a href="http://www.wikipwedia.com" target="_blank">
<img src="images/image-slider-1.jpg" alt="">
</a>

</div>

<script>
var images = new Array();
var cont = 0;
images[0] = {
img: 'images/image-slider-1.jpg',
url: 'http://www.google.com'
}
images[1] = {
img: 'images/image-slider-1.jpg',
url: 'http://www.forobeta.com'
}
images[2] = {
img: 'images/image-slider-1.jpg',
url: 'http://www.facebook.com'
}
images[3] = {
img: 'images/image-slider-1.jpg',
url: 'http://www.twitter.com'
}
images[4] = {
img: 'images/image-slider-1.jpg',
url: 'http://www.youtube.com'
}


function presImagen() {
var imgd = document.getElementById('img');
while (imgd.firstChild) {
imgd.removeChild(imgd.firstChild);
}
imgd.appendChild(createCode());
if (cont < images.length-1) cont ++;
else cont = 0;
tiempo = window.setTimeout('presImagen()',1000)
}
function createCode() {
var a = document.createElement('a');
a.href = images[cont].url;
a.target = '_blank';
var img = document.createElement('img');
img.src = images[cont].img;
a.appendChild(img);
return a;
}

window.onload = function() {
presImagen(0);
}
</script>
</br>
 
Pues tienes la misma imagen en todas. 😕
 
lombervid dijo:
Pues tienes la misma imagen en todas. 😕
Hacer clic para expandir...

Si claro, la puse como ejemplo, pero en la web cada una es distinta, y no arranca 😛8: se queda la misma 😡 .


como encerrarias tu todo el codigo para que te arrancara, eso es en lo que me pierdo no se que etiquetas ponerle para que funcione.
 
Russho dijo:
Si claro, la puse como ejemplo, pero en la web cada una es distinta, y no arranca 😛8: se queda la misma 😡 .


como encerrarias tu todo el codigo para que te arrancara, eso es en lo que me pierdo no se que etiquetas ponerle para que funcione.
Hacer clic para expandir...

Pues puse el código tal y como lo pusiste y si me funcionó. Lo único que podría ver raro seria el "presImagen(0);" que le quitaras ese 0 (cero), pero así me funciono a mi.

Saludos.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba