Como coloco links nestas imagens automaticas?

gajo · Fevereiro 15, 2008

Oi.Tudo bem?

Eu tenho este script (não é meu) que roda imagens aleatorias e automaticamente sem precisar carregar. Ma não consigo colocar links nas imagens e eu queria ligar as imagens a outras paginas. Como devo fazer? To usando como script externo. Precisava de ajuda e não consigo entender javascript.

Script externo:

var interval = 1; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("1.gif");
image_list[image_index++] = new imageItem("2.gif");
image_list[image_index++] = new imageItem("3.gif");
image_list[image_index++] = new imageItem("4.gif");
image_list[image_index++] = new imageItem("5.gif");
image_list[image_index++] = new imageItem("6.gif");
image_list[image_index++] = new imageItem("7.gif");
image_list[image_index++] = new imageItem("8.gif");
var number_of_image = image_list.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
function Go()
{
rotateImage('rImage');
}
window.onload=Go;

ficheiro html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="pt">
<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
<title>titulo</title>
<style type="text/css" media="screen">


</style>
</head>
<body>

<body OnLoad="rotateImage('rimage')">


<script src="bbb.js" type="text/javascript">
<img name="rImage" src="" width=468 height=60>


</body>
</html>

quaquer dica e ajuda seria muito bom

Editado Fevereiro 15, 2008 por fercosmig
Utilize tags de código, facilitam a visualização.

KaKarotto · Fevereiro 16, 2008

O que você poderia fazer é modificar o html, linkando a sua imagem:

<a href="#"><img name="rImage" src="" width=468 height=60></a>

Através do "rotateImage" você poderia modificar o atributo href do link:

document[place].parentNode.href="meu novo link"

Esse trecho você poderia colocar nessa função:

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
// Bem aquiiiiiiiiiiiiiiiii
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}

Agora, precisa ser bem explicito, você quer linkar as imagens para onde? Dependendo do que quer, terá de mudar bastante coisa, já que o código não foi feito para isso a primore.

Abraço

gajo · Fevereiro 16, 2008

Eu queria um link para cada imagem. Por exemplo, a imagem 1.gif clicada ia dar a http://www.google.com, a imagem 2.gif ia dar a http://www.youtube.com, etc, assim para as restantes.

a imagem muda o link tambem, cada uma com seu link.

KaKarotto · Fevereiro 17, 2008

Entendi, mas vai ter que fazer um "bind" nessas imagens, ou seja, vai ter que atribuir mais de um atributo da imagem... Como eu pensei, vai ter que mudar algumas partes do código, ainda bem que ele foi bem escrito. Olha só:

Coloque mais um argumento para o protótipo imageItem, colocando além da localização do arquivo, o link de onde ele vai ser apontado.

imageItem("1.gif", "http://google.com.br")

Nesse trecho:

image_list = new Array();
image_list[image_index++] = new imageItem("1.gif");
image_list[image_index++] = new imageItem("2.gif");
image_list[image_index++] = new imageItem("3.gif");
image_list[image_index++] = new imageItem("4.gif");
image_list[image_index++] = new imageItem("5.gif");
image_list[image_index++] = new imageItem("6.gif");
image_list[image_index++] = new imageItem("7.gif");
image_list[image_index++] = new imageItem("8.gif");

Faça isso em todas as imagens. Próxima função:

function imageItem(image_location, image_href) {
this.image_item = new Image();
this.image_item.src = image_location;
this.href=image_href;
}

Adicione o atributo href, como eu fiz na última linha. Próxima:

function get_ImageItemLocation(imageObj) {
return(imageObj)
}

Coloca nessa função apenas o imageObj como retorno, como eu fiz acima. Agora:

function rotateImage(place) {
        var new_image = getNextImage();
        document[place].src = new_image.image_item.src;
        document[place].parentNode.href=new_image.href
        var recur_call = "rotateImage('"+place+"')";
        setTimeout(recur_call, interval);
        }

Mude a função rotateImage para essa de cima. Ela vai pegar o link da imagem e substituir o href para o href que você determinou lá em cima no array inicial. Não se esqueça do trecho do html:

<a href="#"><img name="rImage" src="" width=468 height=60></a>

Eu não posso testar agora, esses passos que te dei são puramente lógicos então pode ser que eu tenha esquecido de algum conceito, mas aí a gente vai consertando....

Boa sorte.

Akeleabrasssss

Entrar

Como coloco links nestas imagens automaticas?

Pergunta

gajo

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

gajo

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades