Mettre un lien sur image de diaporama en js

Fermé
nanie954 - 3 juin 2007 à 12:46
 didiko-971 - 28 oct. 2007 à 07:07
Bonjour,
voici le script que j'ai mis sur le site de ma cliente.il fonctionne parfaitement, mais ma cliente me demande maintenant de faire un lien sur chaque image pour que l'on puisse l'agrandir. j'ai essayé divers autres scripts qui ne marchent pas. pouvez vous m'aider svp à ajouter juste un lien par image dans ce script, je suis avant tout graphiste et n'y connait pas grand chose en js?
Vous pourrez voir le rendu sur le lien suivant:
http://www.lestraitsdekatia.fr


<div id="galeriekat"> 
    <!-- DEBUT DU SCRIPT DIAPORAMA-->
    <script language="JavaScript" type="text/javascript">
var current = 0;

function next(){ // forward one image
if(document.formname.slide[current+1]){
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;}
else{first();}}

function previous(){ // back on image
if((current-1) >= 0){
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;}
else{last();}}

function first(){ // jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;}

function last(){ // this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;}

function ap(text){ // this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate();}

function change(){ // this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;}

function rotate() {
if (document.formname.slidebutton.value == "Stop") {
current = (current == document.formname.slide.length-1) ? 0 : current+1;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 3000);}}
// End --></script>
    <form name="formname" action="#">
      <table cellspacing="0" cellpadding="0" width="450px" align="center">
        <tr> 
          <td colspan="3"><img src="images/bout_01.jpg" alt="toile les traits de katia" title=" toile les traits de Katia" name="show" border="0" /> 
          </td>
        </tr>
        <tr> 
          <td width="45%" height="30" align="right" valign="bottom"> <select name="slide" size="1" onchange="change();" >
              <option selected="selected" value="images/bout_01.jpg">Au Printemps</option>
              <option value="images/vitri_03.jpg">Fraicheurs</option>
              <option value="images/vitri_02.jpg">A vos Amours</option>
              <option value="images/vitri_04.jpg">L'Eté Dernier</option>
              <option value="images/bout_02.jpg">Depuis la porte</option>
              <option value="images/bout_03.jpg">Douceurs Fauves</option>
              <option value="images/bout_04.jpg">Fine Fraicheur</option>
              <option value="images/bout_06.jpg">L'or des Terres</option>
              <option value="images/vitri_05.jpg">Emaux Emus</option>
              <option value="images/bout_07.jpg">Turquoises</option>
              <option value="images/bout_08.jpg">Rouge Insolence</option>
              <option value="images/vitri_07.jpg">Coquelicots des Villes</option>
              <option value="images/bout_09.jpg">Du Seuil</option>
              <option value="images/bout_10.jpg">Bois des Eaux</option>
              <option value="images/bout_11.jpg">Muses Ecarlates</option>
              <option value="images/vitri_01.jpg">Contrastes</option>
              <option value="images/bout_12.jpg">Cerise du levant</option>
              <option value="images/bout_14.jpg">Violettes de Verre</option>
              <option value="images/vitri_06.jpg">Verres de Violette</option>
              <option value="images/bout_13.jpg">Intime fantaisie</option>
            </select></td>
          <td width="35%" height="30" align="center" valign="bottom" nowrap="nowrap"> 
            <input name="button" type="button" title="Jump to beginning" onclick="first();"value="|<" /> 
            <input type="button" onclick="previous();" value="<" title="Last Picture" /> 
            <input type="button" name="slidebutton" onclick="ap(this.value);" value="Start" title="AutoPlay" /> 
            <input type="button" onclick="next();" value=">" title="Next Picture" /> 
            <input type="button" onclick="last();" value=">|" title="Jump to end" /> 
          </td>
          <td width="20%" align="center" valign="bottom" nowrap="nowrap"> </td>
        </tr>
      </table>
    </form>
    <!-- FIN DU SCRIPT DIAPORAMA-->

4 réponses

Il faut créer un double dossier images, ce qui t'évite de créer une table, tu numérotes les images en donnant le même numéro à la vignette et l'image grande taille vu que le lien est identique pour toutes les images.
Ensuite suffit de passer via une variable et l'affaire est dans le sac.

Exemple du script que j'avais développé au cours (que j'ai déjà remis à 36 sauces):
http://www.laurentmahe-judo.fr/les_dojos-frejus.htm

Le script parmettant l'agrandissement n'est pas de moi, c'est un greffon d'un script popup existant ;-)

On pourrait l'adapté via un DIV pour échapper au popups, ça devrait être possible :-)
0
Merci pour ta réponse, ton diaporama se rapproche de ce que je veux. Ce qui manque quand je ne passe pas par le diaporama dans le formulaire, ce sont les titres des photos qui s'affichent dans la liste de selection.
je ne sais pas si c'est possible de mettre un lien sur chaque photo quand elle s s'affichent par le formulaire:

  <option value="images/bout_01.jpg">Au Printemps</option>


là, la photo bout_01.jpg s'affiche mais comment mettre un lien sur elle pour un agrandissement? Mystere..??

Sincèrement merci!
nanie
0
Ca c'est la version originale qui était créée pour un peintre ;-)

http://i.domaindlx.com/danzel/oeuvre.html

C'est le même script mais ici avec une table pour les titres, je pense qu'il y a moyen de rajouter un lien sans que ça foire :-)
0
d'ailleurs, en te relisant, le lien est déjà présent sur ma version, suffit que tu cliques sur la vignette et tu as l'image en grande taille.

La version peintre, c'est si tu veux en plus un affichage d'un titre ou autre :-)

Si j'ai tout compris, sinan y a probablement moyen de modifier celui que tu utilises en greffant un syqtème popup, ou fausse popup (reconstruction par javascript) ou div (sur le même système ça devrait être possible), mais là faudrait avoir le temps de faire des essais.
0
Bonjour,
Je voulait savoir Comment mettre un lien sur une Image pour myspace
0