Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Anderson Hetfield

Slide de fotos javascript com link nas img

Por , em Javascript

Recommended Posts

Anderson Hetfield    0

Anderson Hetfield
Postado

Tenho um slide de fotos em javascript com miniaturas que funciona legal. Mas agora preciso colocar link externo nas imagens maiores.

alguém poderia dar uma força? O link tem que ser via javascript

 

O .js está todo abaixo

desde já agradeço

 

var photoslink=new Array()
var which=0
 
// Imagens
var myPix = new Array(3)
myPix[0] = "1";
myPix[1] = "2";
myPix[2] = "3";
 
 
// Variáveis
var format = ".jpg"; // formato das imagens
var timer = "4000"; // tempo, em milésimos de segundos
var i = 1; // não mexer.
var intervalo; // criada variável global da animação
 
function start() {
intervalo = window.setInterval("change()",timer); // Inicia a animação
document.getElementById(0).className = "imgatual";
}
 
// Função quando clica na imagem pequena exibe ela grande.
function abrir() {
var main = document.getElementById("exibicao");
var iten = main.getElementsByTagName("img");
if (iten) {
for (var i=0;i<iten.length;i++) {
if (iten[i].className  == "imgmenu") {
iten[i].onclick = function() { // quando clicar na imagem executar os comandos
limpa(); // função limpa
this.className = "imgclick"; // coloca borda do click
document.getElementById("image").src = 'images/' + myPix[this.id] + format; // exibe a imagem grande
 
}
}
}
}
}
 
// Função que limpa as bordas que estão com class=imgclick
function limpa() {
var main = document.getElementById("exibicao");
var iten = main.getElementsByTagName("img");
if (iten) {
for (var i=0;i<iten.length;i++) {
if (iten[i].className  == "imgclick") { // busca quais imagens estão com class=imgclick
iten[i].className = "imgmenu"; // as quais forem muda para imgmenu
}
}
}
}
 
function borda() {
var img = arguments[0]; // recebe o por parametro a ID da imagem
var main = document.getElementById("exibicao");
var iten = main.getElementsByTagName("img");
if (iten) {
for (var i=0;i<iten.length;i++) { // aqui modifica a borda da imagem que está com a class=igmatual ou class="imgclick" para imgmenu
if ((iten[i].className  == "imgatual") || (iten[i].className == "imgclick")) {
iten[i].className = "imgmenu";
}
}
document.getElementById(img).className = "imgatual"; // aqui coloca a borda na imagem atual
}
}
 
// Função que exibe a imagem grande!
function change() {
var tam = myPix.length;
if (i < tam) {
document.getElementById("image").src = 'images/' + myPix[i % tam] + format; // exibe a imagem grande
borda(i); // modifica a borda nas imagens pequenas
 
if (i == tam) i = -1;
i++;
}else { i = 0; }
}
 
window.onload = function() {
abrir();
start();
}
 
function mudar_banner(){
 document.getElementById("myPix").src=imagem[x];
 document.getElementById('link').href=site[x];
 x++;
 if (x==3){ // aqui compara x com a quantidade total de imagens que tem
 x=0;
  }
 }

Compartilhar este post

Link para o post
Compartilhar em outros sites

milkybar    2

milkybar
Postado

Coloque um <a href="link aqui">html da imagem do site</a>

 

Procure pela <ul><li> ou div que estiverem cada uma das imagens e envolva cada um com o <a href="link"></a>.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Hetfield    0

Anderson Hetfield
Postado

Obrigado pela resposta. vou postar o html comentado abaixo

 

<head><title>Exibição de Imagens</title></head>
<link rel="stylesheet" type="text/css" href="imagens.css" /> / /os estilos, mas não é preciso mexer nele
<script language="JavaScript" src="imagens.js"></script> // foi postado acima
<body>
<div id="exibicao">
<table cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#fff" nowrap="nowrap"><img id="image" src="images/1.jpg" width='450' height='300' style="margin:0 10px 0px 0px;"></td> (essa linha carrega a img inicial automaticamente - só essa aceita o link externo. Se eu colocar as 3 tags de img aqui vai ficar uma embaixo da outra)
// as celulas da tab abaixo são as miniaturas das img maiores que, ao clicarmos nessas miniaturas elas aparecem maior na janela. se colocar o link externo aqui tb não é o que preciso, pois aqui só mostra a img maior
</tr>
<tr>
<td style="width:450px;" nowrap="nowrap">
<img class="imgmenu" id="0" src="images/1.jpg" width='58' height='58'>
<img class="imgmenu" id="1" src="images/2.jpg" width='58' height='58'>
<img class="imgmenu" id="2" src="images/3.jpg" width='58' height='58'>
</td>
</tr>
</table>
</div>
</body>
apliquei uma variavel para o link
var linkornot=1 // 0 é link desativado e 1 é link ativo
// se a varialvel linkornot = "1" aplica os links nas img correspondentes (0, 1 e 2), mas não estou conseguindo gerar a função para fazer ele ativar
var imagelinks=new Array()
imagelinks[1]="http://www.netscape.com"
, mas não consigo aplicar a função nas variaveis myPix[ ]=" "

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito