Lien slider Javascript [Résolu/Fermé]

Signaler
Messages postés
402
Date d'inscription
samedi 10 janvier 2009
Statut
Membre
Dernière intervention
15 septembre 2014
-
Messages postés
402
Date d'inscription
samedi 10 janvier 2009
Statut
Membre
Dernière intervention
15 septembre 2014
-
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

2 réponses

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
432
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
Messages postés
402
Date d'inscription
samedi 10 janvier 2009
Statut
Membre
Dernière intervention
15 septembre 2014
24
Salut,

Je test tout de suite et je te dit, merci :)
Messages postés
402
Date d'inscription
samedi 10 janvier 2009
Statut
Membre
Dernière intervention
15 septembre 2014
24
ça ne change rien, ça affiche toujours le "#" quand je passe la souris sur le lien :/
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
432
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]);
Messages postés
402
Date d'inscription
samedi 10 janvier 2009
Statut
Membre
Dernière intervention
15 septembre 2014
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)