[Resolvido] Não consigo colocar links nas imagens

[KELLIMA 0]

Olá Pessoal,

 

 

Tenho o seguinte Script que funciona muito bem para exibir uma tabela com imagens que, a cada atualização da página, rotacionem aleatoriamente. No entanto, preciso colocar um link diferente em cada imagem afim de que ela possa redirecionar quem nela clicar para outras páginas. Mas, não consigo. Há algo no código que precisa ser alterado para que a url da imagem possa ser acrescida com um link. Por favor, me ajudem!!!

 

<script type="text/javascript">
function aleatorio(inferior,superior){
   var numPossibilidades = superior - inferior;
   aleat = Math.random() * numPossibilidades 
   aleat = Math.floor(aleat);
   return parseInt(inferior) + aleat 
} 

window.onload = function() {
   var imagens=[
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
"5.jpg",
"6.jpg",
"7.jpg",
"8.jpg",
"9.jpg",
];
   var tabela = document.getElementById("tabela");

   for(r=0; r<tabela.rows.length; r++) {
       for(c=0; c<tabela.rows[r].cells.length; c++) {
           if(imagens.length == 0) {
               r = tabela.rows.length;
               break;
           }
           var imgRandom = aleatorio(0, imagens.length-0);
           tabela.rows[r].cells[c].style.backgroundImage = "url("+imagens[imgRandom]+")";
           imagens.splice(imgRandom, 1);
       } 
   }
}
</script>
<div align="center">
 <table id="tabela" width="640" cellspacing="10">
   <tr>
     <th width="200" height="335" scope="col"> </th>
     <th width="200" scope="col"> </th>
     <th width="200" scope="col"> </th>
   </tr>
   <tr>
     <th height="335" scope="col"> </th>
     <th scope="col"> </th>
     <th scope="col"> </th>
   </tr>
   <tr>
     <th height="335" scope="col"> </th>
     <th scope="col"> </th>
     <th scope="col"> </th>
   </tr>
 </table>
</div>

[KELLIMA 0]

Fantástico! Ficou quase bom! Fiz, exatamente o que você disse:

 

<script type="text/javascript">
function aleatorio(inferior,superior){
   var numPossibilidades = superior - inferior;
   aleat = Math.random() * numPossibilidades 
   aleat = Math.floor(aleat);
   return parseInt(inferior) + aleat 
} 

window.onload = function() {
   var imagens=[
'<a href="index.html"> <img src="1.jpg">  </a>',
'<a href="index.html"> <img src="2.jpg">  </a>',
'<a href="index.html"> <img src="3.jpg">  </a>',
'<a href="index.html"> <img src="4.jpg">  </a>',
'<a href="index.html"> <img src="5.jpg">  </a>',
'<a href="index.html"> <img src="6.jpg">  </a>',
'<a href="index.html"> <img src="7.jpg">  </a>',
'<a href="index.html"> <img src="8.jpg">  </a>',
'<a href="index.html"> <img src="9.jpg">  </a>',
];
   var tabela = document.getElementById("tabela");
   for(r=0; r<tabela.rows.length; r++) {
       for(c=0; c<tabela.rows[r].cells.length; c++) {
           if(imagens.length == 0) {
               r = tabela.rows.length;
               break;
           }
var imgRandom       = aleatorio(0, imagens.length-0);
var tabelaRows      = tabela.rows[r];
var tabelaRowsCells = tabelaRows.cells[c];

tabelaRowsCells.innerHTML = '<a href="'+ imagens[imgRandom] +'"> <img src="'+ imagens[imgRandom] +'">  </a>';
           imagens.splice(imgRandom, 1);
       } 
   }
}
</script>
<div align="center">
 <table id="tabela" width="640" cellspacing="10">
   <tr>
     <th width="200" height="335" scope="col"> </th>
     <th width="200" height="335" scope="col"> </th>
     <th width="200" height="335" scope="col"> </th>
   </tr>
   <tr>
     <th height="335" scope="col"> </th>
     <th height="335" scope="col"> </th>
     <th height="335" scope="col"> </th>
   </tr>
   <tr>
     <th height="335" scope="col"> </th>
     <th height="335" scope="col"> </th>
     <th height="335" scope="col"> </th>
   </tr>
 </table>
</div>

 

 

Mas... se eu trocar "1.jpj" por '<a href="index.html"> <img src="1.jpg"> </a>', para lincar as imagens para uma página qualquer, no caso, "index.html", as imagens aparecem duplicadas na tabela. Ou seja, cada imagem aparece replicada e a tabela que era pra ter 9 imagens aparece com 18, cada uma com esse caractere("> )abaixo dela. E das duas imagens de cada, uma fica linkada e a outra não, sendo que a lincada não redireciona para a página "index.html" que linkei para teste. Na exibição no navegador, ao apontar para a imagem linkada, aparece a seguinte url: nome da pasta/<a href=. Veja como corrigir isso, ou se errei em alguma coisa e me envie o script completo para uso, se puder, por favor, indicando como devo colocar o endereçamento das imagens na "var imagens" para que elas redirecione para a página que eu colocar. Obrigado!

 

Eis o Script original!

 

<script type="text/javascript">
function aleatorio(inferior,superior){
   var numPossibilidades = superior - inferior;
   aleat = Math.random() * numPossibilidades 
   aleat = Math.floor(aleat);
   return parseInt(inferior) + aleat 
} 

window.onload = function() {
   var imagens=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"];
   var tabela = document.getElementById("tabela");

   for(r=0; r<tabela.rows.length; r++) {
       for(c=0; c<tabela.rows[r].cells.length; c++) {
           if(imagens.length == 0) {
               r = tabela.rows.length;
               break;
           }
           var imgRandom = aleatorio(0, imagens.length-0); 
           tabela.rows[r].cells[c].style.backgroundImage = "url("+imagens[imgRandom]+")";
           imagens.splice(imgRandom, 1);
       } 
   }
}
</script>
<div align="center">
 <table id="tabela" width="640" cellspacing="10">
   <tr>
     <th width="200" height="335" scope="col"> </th>
     <th width="200" scope="col"> </th>
     <th width="200" scope="col"> </th>
   </tr>
   <tr>
     <th height="335" scope="col"> </th>
     <th scope="col"> </th>
     <th scope="col"> </th>
   </tr>
   <tr>
     <th height="335" scope="col"> </th>
     <th scope="col"> </th>
     <th scope="col"> </th>
   </tr>
 </table>
</div>

[KELLIMA 0]

Ok, Muito obrigado! Deu tudo certo!