Mettre un lien sur une image d'un slider javascript

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par mateomania, 17 Mai 2011.

  1. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    Bonjour,

    je souhaiterais mettre un lien sur chaque image qui compose mon slider et qui renverrai sur des pages différentes ...
    je n'y arrive pas...
    si quelqu'un a une idée
    merci d'avance !

    je vous mets le code html et javascript (il y a du css aussi mais je ne crois pas que ce soit necessaire lol ) :

    html :


    <div id="slider">
    <!-- La banderolle qui contiens toute les images -->
    <div id="mask">
    <ul id="image_container" name="image_container">

    <li><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"</li>
    <li><img src="images/markstore.jpg" title="Markstore" alt="Markstore"></li>
    <li><img src="images/ML.jpg" title="ML | mathieuloubière" alt="MathieuLoubière"></li>
    </ul>
    </div>
    <img src="images/glass.png" name="glass" id="glass">


    <!-- Les fleches de navigations -->
    <ul id="dots">

    <li class="button1" onClick="changeImage(1)"></li>
    <li class="button2" onClick="changeImage(2)"></li>
    <li class="button3" onClick="changeImage(3)"></li>


    </ul>
    <img src="images/fleche_gauche.png" class="fleche" id="fleche_gauche" alt="Précèdent" title="Prècédent" onClick="prevImage()">
    <img src="images/fleche_droite.png" alt="Suivant" name="fleche_droite" class="fleche" id="fleche_droite" title="Suivant" onClick="nextImage()">
    </div>



    javascript :



    // Des Variables pour pouvoir modifier facilement ce qui doit l'être
    var secDuration = 5;
    var image = 1;
    var maxImages =3;
    var slider = document.getElementById('slider');
    var timeout

    // La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres
    function changeImage(requiredImage) {

    // Début de l'algorithme .
    if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image
    if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image
    image++;
    }
    else{
    image = 1;//Si Nous sommes sur la dernière, on reviens au début
    }
    }
    else{ // Si nous avont spécifié une image
    if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première
    image = 1;
    }
    else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image
    image = maxImages;
    }
    else{
    image = requiredImage; // Sinon, on vas à l'image spécifiée.
    }
    }
    //On dis au slider à travers sa classe quel image il doit afficher
    slider.className = "image"+image;

    // On nettoie et relance le timeout
    clearTimeout(timeout)
    timeout = setTimeout("changeImage()",secDuration*1000);
    }

    //Deux petites fonctions tres compréhensibles
    function nextImage(){
    changeImage(image+1);
    }
    function prevImage(){
    changeImage(image-1);
    }

    //On met le slide sur l'image par défaut, ici la 1ere
    changeImage(1);
     
  2. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    en fait je voudrais un lien sur chcune de ces images qui font partie du slider :

    <li><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"</li>
    <li><img src="images/markstore.jpg" title="Markstore" alt="Markstore"></li>
    <li><img src="images/ML.jpg" title="ML | mathieuloubière" alt="MathieuLoubière"></li>
     
  3. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    Il y a sûrement plusieurs possibilité mais avec cette piste :

    dans ton code html ajouter le lien dont tu as besoins :

    <div id="slider">
    <a href="" id="sliderLink" class="sliderLink"></a>

    Dans ton CSS le styler en fonction du design pour qu'il se superpose sur l'image (qui me semble être obtenue avec un fond vue que je ne voie pas de <img> dont tu fait varier la src par javascript (le CSS aurait pu apporter cette précision)) :

    Code:
    .sliderLink{
     width: xxx px;
     height: yyy px;
     display: block;
     position: absolute;
     top: xx px;
     left: yy px;
    }
    et dans ton code javascript après :
    var slider = document.getElementById('slider');
    var sliderLink = document.getElementById('sliderLink');

    ensuite dans la fonction de rotation des vues :

    //On dis au slider à travers sa classe quel image il doit afficher
    slider.className = "image"+image;
    sliderLink.href = "un truc en fonction d'ou tu en est dans tes images";
     
  4. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    pour l'instant il y a 3 images qui composent mon slider et elle sont bien dans mon code html :

    <li><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"</li>
    <li><img src="images/markstore.jpg" title="Markstore" alt="Markstore"></li>
    <li><img src="images/ML.jpg" title="ML | mathieuloubière" alt="MathieuLoubière"></li>
     
  5. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    que fait le changement de classe alors?
     
  6. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    le changement de classe est là pour signifier quelle est l'image qui doit s'afficher dans le slider quand on clique sur les miniatures qui se trouvent en dessous
     
  7. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    Et donc moi je souhaiterais mettre un lien sur chaque image( les grandes images) du slider qui renvoie sur une page différente de mon portfolio :wink:
     
  8. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    je bloque la-dessus ...
     
  9. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    tu as eu mon lien?
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    non pas vue le lien.

    Mais :

    <li><a href="truc"><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"></a></li>
    <li><a href="truc"><img src="images/markstore.jpg" title="Markstore" alt="Markstore"></a></li>
    <li><a href="truc"><img src="images/ML.jpg" title="ML | mathieuloubière" alt="MathieuLoubière"></a></li>

    te met un lien sur chaque image, reste a savoir ce que le changement de class opére comme changement.
     
  11. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    jt'ai envoyé un message privé
     
  12. mateomania
    mateomania Nouveau WRInaute
    Inscrit:
    9 Mars 2011
    Messages:
    9
    J'aime reçus:
    0
    bon c'est pas grave, je vais faire sans... :)
    merci quand même !!
    bonne fin de soirée
     
Chargement...
Similar Threads - Mettre lien image Forum Date
Lien d'affiliation Amazon : mettre nofollow ou sponsored ? Monétisation d'un site web 25 Février 2021
Faut il mettre des ancres neutres pour dofollow lien externe Netlinking, backlinks, liens et redirections 12 Avril 2018
GHS tools : faut-il mettre des liens dans livres d'or et guestbooks ? Netlinking, backlinks, liens et redirections 13 Juillet 2017
vers quels réseaux sociaux mettre des liens de partage Développement d'un site Web ou d'une appli mobile 28 Juillet 2016
Plusieurs liens qui pointent sur la même page. Mettre en nofollow ? Débuter en référencement 29 Juillet 2015
Mettre certain liens internes en nofollow? Netlinking, backlinks, liens et redirections 20 Mai 2015
Mettre des liens dans des balises Hn Débuter en référencement 7 Mai 2015
Lorsqu'on a créé un site, faut-il mettre un lien vers son site dans le footer ? [Résolu] Débuter en référencement 31 Décembre 2014
mettre un lien facebook et twitter sur le post Débuter en référencement 17 Décembre 2014
Mettre un lien externe en Hx ? Référencement Google 13 Octobre 2014
a-t-on le droit de mettre les logos de nos clients - sans leur demander leur autorisation Droit du web (juridique, fiscalité...) 7 Octobre 2013
Liens dans flash comptés, comment mettre en nofollow ? Référencement Google 2 Octobre 2013
mettre un lien source quand on copie l'article Développement d'un site Web ou d'une appli mobile 14 Février 2013
Mettre un lien sur commentcamarche Le café de WebRankInfo 7 Septembre 2012
Éviter de mettre beaucoup de liens sur notre site pour le rérencement Débuter en référencement 25 Avril 2012
Mettre au point une relation clientèle Administration d'un site Web 23 Mars 2012
Css : Mettre un lien hypertexte sur un background Développement d'un site Web ou d'une appli mobile 1 Juin 2011
Intérêt de mettre un lien sur Delicious ? Autres réseaux sociaux 7 Février 2011
Est-ce problèmatique de mettre des liens sur des H1, H2, etc Référencement Google 2 Novembre 2010
Test SEO : Comment transmettre la valeur de plusieurs liens Tests et études de cas 18 Avril 2010