Lien slider Javascript

Résolu/Fermé

mathbart Messages postés 404 Date d'inscription samedi 10 janvier 2009 Statut Membre Dernière intervention 15 septembre 2014 - Modifié par mathbart le 15/09/2014 à 00:07
mathbart Messages postés 404 Date d'inscription samedi 10 janvier 2009 Statut Membre Dernière intervention 15 septembre 2014 - 15 sept. 2014 à 12:24

Bonjour,

J'ai téléchargé un slider en Javascript (capture d'écran pour vous donner une idée: http://img15.hostingpics.net/pics/670736Capture.png ) je voudrais que au fur et à mesure que le client fait défiler le curseur, le bouton nommé lien change de lien en fonction des valeurs, par exemple 1Go -> Offre-1Go.html / 2Go -> Offre-2go.html / etc...

Or j'ai essayé plein de choses et je ne sais pas comment faire... Voici le code:

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
.bkbutton {
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #dcdcdc;
 display:inline-block;
 color:#777777;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:1px 1px 0px #ffffff;
}.bkbutton:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
    text-decoration:none;
}.bkbutton:active {
 position:relative;
 top:1px;
}
</style>
<style type="text/css">
    .ui-slider .ui-slider-handle {  
        position: absolute;  
        z-index: 2;
        cursor: pointer;  
        background: url('images/slider/pointer.png') no-repeat 50% 50%;  
        outline: none;
        border:none;
        top: -15px;
    } 
    .ui-slider .ui-slider-range-min {
        background: url('images/slider/filled.png') repeat-x;
        z-index:1;
    }
    .ui-slider {
        background: url('images/slider/unfilled.png') repeat-x;
        z-index:1;
    }
</style>
<!--Price Selector content-->
        <script type="text/javascript">
    var DS = new Array("10GB", "50GB", "100GB", "200GB");
    var BW = new Array("1000GB", "2000GB", "3000GB", "4000GB");
    var Price = new Array("$4.9", "$9.9", "$14.9", "$19.9");
    var Link = new Array("test1", "test2", "test3", "test4");


        $(function() {
            $("#hostpslider").slider({
                range: "min",
                value: 2,
                min: 0,
                max: 3,
                step: 1,
                slide: function(event, ui) {
                    if (ui.value == 0) {$('#s_1').css('display', 'block')} else {$('#s_1').css('display', 'none')};
                    if (ui.value == 1) {$('#s_2').css('display', 'block')} else {$('#s_2').css('display', 'none')};
                    if (ui.value == 2) {$('#s_3').css('display', 'block')} else {$('#s_3').css('display', 'none')};
                    if (ui.value == 3) {$('#s_4').css('display', 'block')} else {$('#s_4').css('display', 'none')};
                    $("#DS").val(DS[ui.value]);
                    $("#BW").val(BW[ui.value]);
                    $("#Price").val(Price[ui.value]);
                    $("#Link").val(Link[ui.value]);             
                }
            });
            $("#BW").val(BW[$("#hostpslider").slider("value")]);
            $("#DS").val(DS[$("#hostpslider").slider("value")]);
            $("#Price").val(Price[$("#hostpslider").slider("value")]);
            $("#Link").val(Link[$("#hostpslider").slider("value")]);
        });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div id="wrapper">
    <div id="chooseplan" align="center">
                <div class="cleaner h10"></div>
        <p>Powerful <strong>cPanel</strong> hosting on Texas datacenters with 99.9% uptime guarantee.</p>
        <div id="hostpslider"></div>
        <div class="cleaner h10"></div>
        <div class="sb" align="left">
            <p><strong>Small</strong></p>
        </div>
        <div class="lb" align="center">
            <p><strong>Medium</strong></p>
        </div>
        <div class="lb" align="center">
            <p><strong>Large</strong></p>
        </div>
        <div class="sb" align="right">
            <p><strong>Ultimate</strong></p>
        </div>
        <div class="cleaner h10"></div>
        <div class="fourboxes">
            <div class="box">
                <label for="BW">Bandwidth:</label>
                <input type="text" id="BW" disabled="disabled" /> 
            </div>
            <div class="box">
                <label for="DS">Disk Space:</label>
                <input type="text" id="DS" disabled="disabled" />
            </div>
            <div class="box">
                <label for="Price">Price:</label>
                <input type="text" id="Price" disabled="disabled" />
                <label for="Price"><sub>/MO</sub></label>
            </div>        
            <div class="cleaner h10"></div>
            <div class="orderbox" align="center">
                <div class="cleaner h20"></div>
                <a href="#" onClick="Link(); return(false)">Lien</aA>
            </div>
        </div>
        <div class="server">
            <div class="ps_server" id="s_4" style="display:none;"></div>
            <div class="ps_server" id="s_3"></div>
            <div class="ps_server" id="s_2" style="display:none;"></div>
            <div class="ps_server" id="s_1" style="display:none;"></div>
        </div>
</div>
</div>
  
</body>
</html>

Comme vous pouvez le voir j'ai rajouté la variable "Link" pour l'intégrer au lien, mais ça ne change rien, je ne sais absolument pas comment faire.. Si une personne pouvais prendre 5 minutes ce serais vraiment super sympa :)

Merci d'avance,
Alex

A voir également:

Lien slider Javascript
Lien url - Guide
Créer un lien pour partager des photos - Guide
Verifier un lien - Guide
Telecharger javascript - Télécharger - Langages
Lien copié ✓ - Forum Google Chrome

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
15 sept. 2014 à 12:08

Salut,

D'après ton code javacript tu accèdes à ton élément link en utilisant son identifiant :

$("#Link")

Il faudrait donc ajouter cet id à ton ancre html :

<a href="#" id="Link" onClick="Link(); return(false)">Lien</aA>

Bonne journée

mathbart Messages postés 404 Date d'inscription samedi 10 janvier 2009 Statut Membre Dernière intervention 15 septembre 2014 24
15 sept. 2014 à 12:13

Salut,

Je test tout de suite et je te dit, merci :)

mathbart Messages postés 404 Date d'inscription samedi 10 janvier 2009 Statut Membre Dernière intervention 15 septembre 2014 24
15 sept. 2014 à 12:15

ça ne change rien, ça affiche toujours le "#" quand je passe la souris sur le lien :/

Réponse 2 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
15 sept. 2014 à 12:19

Oui modifier la "valeur" d'une ancre html n'est pas correct, tu veux modifier l'attribut href.
Donc remplacer :

$("#Link").val(Link[ui.value]);

par :

$("#Link").attr('href', Link[ui.value]);

mathbart Messages postés 404 Date d'inscription samedi 10 janvier 2009 Statut Membre Dernière intervention 15 septembre 2014 24
Modifié par mathbart le 15/09/2014 à 12:25

ça ne change pas, si ça te dérange pas tu peut prendre la main par Team Viewer ? Ce sera plus simple je pense. Je dois faire une mauvaise manip quelque part.. (je t'ai envoyé un mp)

Discussions similaires

lien copié

Rajout de lien sur plusieurs pages

comment utiliser un lien MEGA pour télécharger un fichier ?

Faux virus (Pour une blague)

Impossible d'ouvrir des liens via mon Samsung A71