Carrossel

[FernandoSouzS 0]

Boa tarde,

peguei esse código na internet e estou tentando adaptá-lo para o que quero.

Veja bem:

Existem 2 espaços: 1º onde está a imagem grande e o 2º é um espaço onde tem as imagens pequenas.

A intenção é que ao clicar na imagem pequena a imagem em tamanho maior no espaço acima seja exibido.

*Essa parte ja está funcionando tranquilo.

Aí, o que eu não estou conseguindo é associar o site à imagem grande.

Por que a inteção é que ao clicar na imagem pequena e exbir a grande, eu possa clicar na grande e ir para o endereço do site associado.

 

Como eu poderia fazer isso?

Obrigado desde já!

 

 

 

 

<script language="javascript" type="text/javascript">
var imagem = new Array();
	//Coloque o link das imagens aqui:
	imagem[0] = "imagens/index1.jpg";
	imagem[1] = "imagens/index2.jpg";
	imagem[2] = "imagens/index3.jpg";
	imagem[3] = "imagens/index4.jpg";
	imagem[4] = "imagens/index5.jpg";


	var link = new Array();

	link[0]="http://www.google.com.br";
	link[1]="http://www.uol.com.br";
	link[2]="http://www.terra.com.br";
	link[3]="http://www.g1.com.br";
	link[4]="http://www.r7.com.br";



	//Defina a velocidade de transição das imagens em milissegundos:
	var velTransicao = 70;


	var carregar = new Array();

	//Função responsável por carregar as imagens com o evento onLoad();
	function carregarImagens() {
		var objQuadro1 = document.getElementById("imgQuadro1");
		var objQuadro2 = document.getElementById("imgQuadro2");
		var tbQuadro = document.getElementById("tbQuadro");

		//Posicionando os spans na tela:
		objQuadro1.style.left = tbQuadro.offsetLeft;
		objQuadro1.style.top = tbQuadro.offsetTop;
		objQuadro2.style.left = tbQuadro.offsetLeft;
		objQuadro2.style.top = tbQuadro.offsetTop;

		//Carregando todas as imagens em um loop:
		for (var i=0; i<imagem.length; i++) {
			carregar[i] = new Image();
			carregar[i].src = imagem[i];
			document.getElementById("imgQuadro1").innerHTML = "Carregando...";
			document.getElementById("imgTumb"+i).innerHTML = "Carregando...";
			//Chamando a função verificaCarregamento a cada 100 ms para verificar se as imagens
			//foram carregadas ou não.
			window.setTimeout("verificaCarregamento("+i+")",100);
		}
	}

	//Função que verifica se as imagens foram carregadas ou não.
	function verificaCarregamento(imgID,linkID) {
		//Se forem carregadas, o bloco abaixo será executado:
		if(carregar[imgID].complete) {
				//exibindo imagens pequenas
				document.getElementById("imgTumb"+imgID).innerHTML = '<img src="'+carregar[imgID].src+'" width="65" height="36" onClick=abrirImagem('+imgID+')>';
				//Se for a imagem[0], ela será colocada no quadro principal.
				if (imgID == 0) {
				//exibindo imagem grande (Quadro1)
						document.getElementById("imgQuadro1").innerHTML = '<img width="350" height="220" onClick=abrirLink('+linkID+') id="imgQuadro" src="'+imagem[imgID]+'">';
				}
		//Se não foi carregada, chama a função novamente e refaz o teste de carregamento:
		}else{
				window.setTimeout("verificaCarregamento("+imgID+")", 100);
		}
	}

	var tLoop = 2;
	function abrirLink(linkID){
		var objQuadroLink = document.getElementByID("linkQuadro");

		//objQuadroLink.style.opacity = '0';
		//objQuadroLink.style.filter = 'alpha(opacity="0")';
		objQuadroLink.innerHTML = '<a href="'+link[linkID]+'">';

		efeito(tLoop);

	}

	//Criando uma variável-controle:
	var iLoop = 2;
	function abrirImagem(imgID) {
		var objQuadro1 = document.getElementById("imgQuadro1");
		var objQuadro2 = document.getElementById("imgQuadro2");


		if (iLoop == 2) {
				objQuadro1.style.zIndex = 1;
				objQuadro2.style.zIndex = 2;
				objQuadro2.style.opacity = '0';
				objQuadro2.style.filter = 'alpha(opacity="0")';
				objQuadro2.innerHTML = '<img width="350" height="220" id="imgQuadro" src="'+imagem[imgID]+'">';
						if(window.navigator.userAgent.indexOf("Firefox",0) != -1) {
								objQuadro2.style.display = "";
						}else{
								objQuadro2.style.display = "block";
						}
				efeito(iLoop);          
		}else{
				objQuadro1.style.zIndex = 2;
				objQuadro2.style.zIndex = 1;
				objQuadro1.style.opacity = '0';
				objQuadro1.style.filter = 'alpha(opacity="0")';
				objQuadro1.innerHTML = '<img width="350" height="220" id="imgQuadro" src="'+imagem[imgID]+'">';

						if(window.navigator.userAgent.indexOf("Firefox",0) != -1) {
								objQuadro1.style.display = "";
						}else{
								objQuadro1.style.display = "block";
						}
				efeito(iLoop);
		}

	}

	//Função que gera o efeito de transição entre os slides
	var iFiltro = 0;
	function efeito(imgID) {
		var objQuadro1 = document.getElementById("imgQuadro1");
		var objQuadro2 = document.getElementById("imgQuadro2");

		//Controle para as várias possibilidades do i:
		if (iFiltro > 100) {

				if (imgID == 2){
						iLoop = 1;
						objQuadro1.style.display = "none";
				}else{
						iLoop = 2;
						objQuadro2.style.display = "none";
				}
				//Zerando o valor de iFiltro, pois ele poderá ser chamado novamente:
				iFiltro = 0;    
		}else{
				valorOpacidade = iFiltro/50;
				valorOpacidade = valorOpacidade.toString();
				//Controlando a opacidade das fotos:
				if (imgID == 1){
						objQuadro1.style.opacity = valorOpacidade;
						objQuadro1.style.filter = "alpha(opacity='"+iFiltro+"')";
				}else{
						objQuadro2.style.opacity = valorOpacidade;
						objQuadro2.style.filter = "alpha(opacity='"+iFiltro+"')";
				}

		iFiltro+=10;
		tempEfeito = window.setTimeout('efeito('+imgID+')',velTransicao);
		}
	}
	//Iniciar o carregamento assim que a página for carregada:
	window.onload = carregarImagens;

	</script>

	<style type="text/css">
	<!-- body {background-color:#ffffff; color:#436f21; font-family:tahoma,arial,verdana;}-->
	<!-- td.tumbnails {width:70; height:36;}-->
	<!-- div.tumbnails {font-size:11px;} -->
	<!-- #tbQuadro {border:#fffffff} -->

	</style>

	<table id="tbQuadro" class="boxDestaque" style="position:absolute;left:170;top:170;">
	<tr>
			<td>
			<span id="imgQuadro1" style="display:block; position:absolute;"></span>
			<span id="imgQuadro2" style="display:none;  position:absolute;"></span>
			</td>
	</tr>
<!--
	<tr class="boxeslink">
	<td><div id="link0" title="google" onClick="window.open('http://www.google.com.br')">Google</div></td>
	<td><div id="link1" onClick="window.open('http://www.uol.com.br')">UOL</div></td>
	<td><div id="link2" onClick="window.open('http://www.terra.com.br')">TERRA</div></td>
	<td><div id="link3" onClick="window.open('http://www.g1.com.br')">G1</div></td>
	<td><div id="link4" onClick="window.open('http://www.r7.com.br')">R7</div></td>
	</tr>
-->
	<tr class="boxesDestaque">
			<td><div id="imgTumb0"></div></td>
			<td><div id="imgTumb1"></div></td>
			<td><div id="imgTumb2"></div></td>
			<td><div id="imgTumb3"></div></td>
			<td><div id="imgTumb4"></div></td>
	</tr>
	</table>
	<!-- <table border="0" >
	<tr class="boxesDestaque">
			<td class="tumbnails"><div id="imgTumb5" class="tumbnails"></div></td>
			<td class="tumbnails"><div id="imgTumb6" class="tumbnails"></div></td>
			<td class="tumbnails"><div id="imgTumb7" class="tumbnails"></div></td>
			<td class="tumbnails"><div id="imgTumb8" class="tumbnails"></div></td>
			<td class="tumbnails"><div id="imgTumb9" class="tumbnails"></div></td>
	</tr>
	</table> 

[Andrey Knupp Vital 136]

ao clicar na imagen grande ir a um link ??

 

se for basta imprimir ela com a tag href ou botar evento onClick na tag

<img src="">

 

<a href="www.google.com"><img src=".."></a>