Jump to content


Photo

Colocar Link Na Imagem Maior


  • Faça o login para participar
6 replies to this topic

#1 Jola

Jola

    Turista

  • Usuários
  • 49 posts
  • Sexo:Masculino

Posted 01/04/2009, 12:27

Segue o código, antes de tudo....

<script>
// Photos
var myPix = new Array(3)
myPix[0] = "u2";
myPix[1] = "skank";
myPix[2] = "redhot";

// Text
var myText = new Array(3)
myText[0] = "U2";
myText[1] = "Skank";
myText[2] = "Red Hot Chili Peppers";

// Configuração
var format = ".jpg";
var timer = "7000";

var i = 1;

function animator(obj,pega) {
if (obj != "fecha") {
intervalo = window.setInterval("change()",timer);
}else { 
window.clearInterval(intervalo);
if (pega == "u2") {
document.getElementById("image").src = 'images/' + myPix[0]  + format;
document.getElementById('tarja').innerHTML=myText[0];
}else if (pega == "skank") {
document.getElementById("image").src = 'images/' + myPix[1]  + format;
document.getElementById('tarja').innerHTML=myText[1];
}else {
document.getElementById("image").src = 'images/' + myPix[2]  + format;
document.getElementById('tarja').innerHTML=myText[2];
}
intervalo = window.setInterval("change()",timer);
}
}

function change() {
if (i < myPix.length) {
document.getElementById("image").src = 'images/' + myPix[i % myPix.length] + format;

if (i == 0) {
document.getElementById('tarja').innerHTML=myText[i];
}else if (i == 1) {
document.getElementById('tarja').innerHTML=myText[i];
}else {
document.getElementById('tarja').innerHTML=myText[i];
i = -1;
}
i++;
}else { i = 0; }
}

window.onload=animator('go');
</script>


Esse script faz imagem grande e 3 menores do lado direito, ao clicar nas menores, abre a grande e se voce nao clicar a cada 7 segundos vai mudando a imagem, até ai tudo bem, o que eu quero agora é eu ter a opção de clicar em cima da imagem grande e ir para o link desejado....


Valeu pela ajuda, falou!!

#2 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 01/04/2009, 14:02

Para cada imagem um link diferente? Se for, é só criar mais um array com os links e adiconar um <a> - ou apenas um onclick na imagem - e mudar o href.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#3 Jola

Jola

    Turista

  • Usuários
  • 49 posts
  • Sexo:Masculino

Posted 01/04/2009, 15:50

Para cada imagem um link diferente? Se for, é só criar mais um array com os links e adiconar um <a> - ou apenas um onclick na imagem - e mudar o href.



Alex Hiroshi, infelizmente eu não sei fazer o que você falou, eu sei criar a array ali em cima:

var myLink = new Array(3)
myLink[0] = "www.terra.com.br";
myLink[1] = "www.uol.com.br";
myLink[2] = "www.globo.com";

Depois disso eu não sei como mexer no código :( , se você puder me ajudar ou alguem, vou ficar
muito agradecido, valeu, falou

Abraços


PS.: Ai está o anexo, do que eu quero, um link na imagem grande, na selecionada....
Valeu, falou!!

Attached Files


Edição feita por: Jola, 01/04/2009, 18:05.


#4 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 02/04/2009, 10:10

Poste aí a parte html também.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#5 Jola

Jola

    Turista

  • Usuários
  • 49 posts
  • Sexo:Masculino

Posted 12/04/2009, 11:02

Poste aí a parte html também.


<style type="text/css">
#tarja {
	position: absolute;
	top: 184px;
	left: 5px;
	width: 190px;
	height: 15px;
	padding: 5px;
	z-index: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #333333;
	background-color: #CCCCCC;
}
img {
		 border:#000000;
		 margin-top:2px;
		 margin-bottom:2px;
}
a {
	   outline:0;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10em;
	color: #666666;
}
.style3 {font-size: 5px}
</style>
<script>
// Photos
var myPix = new Array(3)
myPix[0] = "001";
myPix[1] = "002";
myPix[2] = "003";

// Text
var myText = new Array(3)
myText[0] = "Descricao da img 01";
myText[1] = "Descricao da img 02";
myText[2] = "Descricao da img 03";

// Configuração
var format = ".gif";
var timer = "5000";

var i = 1;

function animator(obj,pega) {
if (obj != "fecha") {
intervalo = window.setInterval("change()",timer);
}else { 
window.clearInterval(intervalo);
if (pega == "001") {
document.getElementById("image").src = 'images/' + myPix[0]  + format;
document.getElementById('tarja').innerHTML=myText[0];
}else if (pega == "002") {
document.getElementById("image").src = 'images/' + myPix[1]  + format;
document.getElementById('tarja').innerHTML=myText[1];
}else {
document.getElementById("image").src = 'images/' + myPix[2]  + format;
document.getElementById('tarja').innerHTML=myText[2];
}
intervalo = window.setInterval("change()",timer);
}
}

function change() {
if (i < myPix.length) {
document.getElementById("image").src = 'images/' + myPix[i % myPix.length] + format;

if (i == 0) {
document.getElementById('tarja').innerHTML=myText[i];
}else if (i == 1) {
document.getElementById('tarja').innerHTML=myText[i];
}else {
document.getElementById('tarja').innerHTML=myText[i];
i = -1;
}
i++;
}else { i = 0; }
}

window.onload=animator('go');
</script>
<table width="200" height="218" cellpadding="0" cellspacing="0" bordercolor="#666666">
<tr>
<td width="210" height="216" nowrap="nowrap" bgcolor="#333333"><div align="center"><img src="images/001.gif" name="image" width='200' height='200' id="image" style="margin:0;"></div></td>
<!--
1) Em id use os valores que colocou na Array
2) Em src coloque o endereço das imagens
-->
<td width="70" height="216" nowrap="nowrap" bgcolor="#333333" style="width:68px;">
  <div align="center"><a href="java script:;"><img class="imgmenu" src="images/001.gif" id="001" onMouseOver="animator('fecha',id);" width='60' height='60'></a><br />
	 <span class="style3">&nbsp;</span><br>
	  <a href="java script:;"><img class="imgmenu" id="002" src="images/002.gif" onMouseOver="animator('fecha',id);" width='60' height='60' /><br />
	  </a><span class="style3">&nbsp;</span><br>
	  <a href="java script:;"><img class="imgmenu" id="003" src="images/003.gif" onMouseOver="animator('fecha',id);" width='60' height='60'></a><br>
  </div></td>
</tr>
</table>
<div class="style1" id="tarja">
  <div align="justify">Descricao da img 01</div>
</div>

Esse é a página inteira, só você colar e ver... Se puder me ajudar, eu agradeço de verdade..

Falo mano!

#6 Feko

Feko

    Normal

  • Usuários
  • 87 posts
  • Sexo:Não informado
  • Localidade:Balneário Camboriú - SC

Posted 14/04/2009, 15:13

O primeiro passo é criar o outro array com os Links, como ele falou.

Em seguida, tente fazer o seguinte...

Substitua:
<img src="images/001.gif" name="image" width='200' height='200' id="image" style="margin:0;">
Por:
<a href="java script:void(0)" id="linque"><img src="images/001.gif" name="image" width='200' height='200' id="image" style="margin:0;"></a>

Supondo que você tenha criado o array myLink, como ali em cima, localize a seguinte linha:
document.getElementById("image").src = 'images/' + myPix[i % myPix.length] + format;
Embaixo dessa linha, adicione a seguinte linha:
document.getElementById("linque").href = myLink[i % myLink.length];

Como disse acima, isso é apenas uma tentativa, não testei e não sei se funciona. Mas não custa tentar :)

#7 Jola

Jola

    Turista

  • Usuários
  • 49 posts
  • Sexo:Masculino

Posted 18/04/2009, 10:02

O primeiro passo é criar o outro array com os Links, como ele falou.

Em seguida, tente fazer o seguinte...

Substitua:

<img src="images/001.gif" name="image" width='200' height='200' id="image" style="margin:0;">
Por:
<a href="java script:void(0)" id="linque"><img src="images/001.gif" name="image" width='200' height='200' id="image" style="margin:0;"></a>

Supondo que você tenha criado o array myLink, como ali em cima, localize a seguinte linha:
document.getElementById("image").src = 'images/' + myPix[i % myPix.length] + format;
Embaixo dessa linha, adicione a seguinte linha:
document.getElementById("linque").href = myLink[i % myLink.length];

Como disse acima, isso é apenas uma tentativa, não testei e não sei se funciona. Mas não custa tentar :)


To na facul, qnd eu chegar em casa, eu vou tentar
Valeu pela ajuda anyway

falou!




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq