Lien slider Javascript

Résolu
mathbart Messages postés 404 Date d'inscription   Statut Membre Dernière intervention   -  
mathbart Messages postés 404 Date d'inscription   Statut Membre Dernière intervention   -
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:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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
0
mathbart Messages postés 404 Date d'inscription   Statut Membre Dernière intervention   24
 
Salut,

Je test tout de suite et je te dit, merci :)
0
mathbart Messages postés 404 Date d'inscription   Statut Membre Dernière intervention   24
 
ça ne change rien, ça affiche toujours le "#" quand je passe la souris sur le lien :/
0
Réponse 2 / 2
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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]);
0
mathbart Messages postés 404 Date d'inscription   Statut Membre Dernière intervention   24
 
ç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)
0

Discussions similaires

Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
Retrouver liens copiés sur le téléphone
SAMA -
Peterson -

3 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
copie d'un lien dans le navigateur internet
Ulysse Orseau -
diamantnoir -

4 réponses
Faux virus (Pour une blague)
BYHazer -
BYHazer -

2 réponses