Slide show : changer un lien href en meme temps que l'image affichée

Slide show : changer un lien href en meme temps que l'image affichée - HTML/CSS - Programmation

Marsh Posté le 11-01-2011 à 15:38:38    

Salut à tous,
 
j'ai récupéré un petit script en JS pour faire un slide show sur des images.
Je l'ai juste adapté pour qu'il récupère les images que je souhaite : elles sont référencées dans une BDD.
 
En revanche, malgré m'etre bien penché dessus (mais je ne connais rien au JS ...), je n'arrive pas à modifier le script pour qu'il me change la valeur du HREF d'un lien - voir plus bas en gras - (qui sont également stockées  dans une BDD, avec le nom des images).
 
Le script original qui fait défiler UNIQUEMENT les images :

Code :
  1. <script type="text/javascript">
  3. <?php echo 'tbimage=new Array(\''.$image_bdd_1.'\',\''.$image_bdd_2.'\',\''.$image_bdd_3.'\',\''.$image_bdd_4.'\',\''.$image_bdd_5.'\',\''.$image_bdd_6.'\')'; ?>
  4. preImages=new Array;
  5. var opaa=0;
  6. var opab=100;
  7. var compteur=2;
  8. var vitesse=5000;
  10. function precharge()
  11. {
  12. for (i = 0; i < tbimage.length; i++)
  13. {
  14.  preImages[i] = new Image();
  15.  preImages[i].src = 'images/'+tbimage[i]+'';
  16. }
  17. setTimeout(defilmage,vitesse);
  18. }
  20. function defilmage(reg)
  21. {
  22. oxo=reg;
  23. if(compteur==tbimage.length-1)
  24. {
  25.  compteur=-1;
  26. }
  27. if(oxo==1)
  28. {
  29.  compteur++;
  30.  opaa=10;
  31.  document.getElementById('divimageb').src="images/"+tbimage[compteur]+"";
  32.  oxo=0;
  33. }
  34. var imacibleb=document.getElementById('divimagea');
  35. var imaciblea=document.getElementById('divimageb');
  37. opaa+=3;
  38. opab-=4;
  40. if(document.all && !window.opera)
  41. {
  42.  imaciblea.style.filter = 'alpha(opacity=' + opaa + ');';
  43.  imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
  44. }
  45. else
  46. {
  47.  imaciblea.style.opacity = opaa/100;
  48.  imacibleb.style.opacity = opab/100;
  49. }
  50. if(opaa>=100)
  51. {
  52.  opaa=10;
  53.  opab=100;
  54.  var xcc=imaciblea.src.length-4;
  55.  var cxx=imaciblea.src.lastIndexOf("/" )+1;
  56.  var nomimg=imaciblea.src.substring(cxx,xcc);
  57.  imacibleb.src='images/'+nomimg+'';
  58.  setTimeout("defilmage(1)",vitesse);;
  59.  return false;
  60. }
  61. setTimeout("defilmage()",25);
  62. }
  64. if(navigator.appName.substring(0,3)=="Mic" )
  65. {
  66. attachEvent("onload",precharge);
  67. }
  68. else
  69. {
  70. addEventListener("load", precharge, false);
  71. }
  72. </script>


 
L'affichage :
 
<div style="position:relative;top:-110px;left:0px;"><a href="index.php?page=xxx">
<img alt="" id="divimagea" src="images/<?php echo $image_bdd_1; ?>" style="border:0px none;position:absolute;top:0px;left:0px;width:950px;height:220px;opacity:100;FILTER:alpha(opacity=100);" />
<img alt="" id="divimageb" src="images/<?php echo $image_bdd_2; ?>" style="border:0px none;position:absolute;top:0px;left:0px;width:950px;height:220px;opacity:0;FILTER:alpha(opacity=0);" />
</a></div>
 
J'imagine qu'il faut créer un tableau, comme cela a été fait avec les images, et de faire défiler sa valeur (du style : $url_bdd_1, ... etc) en même temps que le nom des images ($image_bdd_1, ... etc).
 
Merci de votre aide pour me mettre sur la voie !  :hello:


Message édité par T2k le 13-01-2011 à 14:39:24
Reply

Marsh Posté le 11-01-2011 à 15:38:38   

Reply

Marsh Posté le 11-01-2011 à 16:50:04    

Heu à mon avis il manque un truc, je vois pas de référence au lien.
 
Tu l'as pris ou ton slideshow ?

Reply

Marsh Posté le 13-01-2011 à 11:21:55    

Justement, il n'y en a pas !
Heu je me souviens plus du tout ca fait un moment que j'ai pris ce script

Reply

Marsh Posté le 13-01-2011 à 14:41:44    

Personne ne vois comment adapté ce script alors ? :/
J'imagine ce qu'il faut faire
-récupérer les urls (stockées dans la BDD avec le nom des images)
-faire défiler la valeur du lien en meme temps que l'images
-et changer le href du lien
 
mais niveau code, je vois pas du tout (connait rien au JS)
 
Help me plz :s

Reply

Marsh Posté le 13-01-2011 à 15:40:16    

Bon j'ai pas trop lu le script, mais ce que je ferai :
Je donne un "id" a la balise <a>
 
<a id="balise_le_lien" href="index.php?page=xxx"> ..blabla ... image.... </a>
 
Apres je modifie le lien en JS :
 
document.getElementById("balise_le_lien" ).href="nouvelle_url";

Reply

Marsh Posté le 19-01-2011 à 15:00:21    

C'est ce que je me disais, mais j'ai pas réussi à le faire !
 
En gros il y a un array avec 6 valeurs (pour le nom de mes images), et un compteur pour savoir où l'on se trouve
Mais je vois comment intégrer la même chose dans ce script pour changer la valeur du href de mon lien en même temps :/

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed