Tout d'abord, bonjour à toute la communauté de Commentcamarche.net,
Je suis en train d'élaborer un site concernant le cyclisme, et donc les coureurs. Je connais bien le milieu, je connais leur valeur mais j'aimerais rendre mon site un peu plus interactif.
Je vous montre d'abord un exemple de notation selon mon avis :
http://jim.e3b.org/teams/saxobank/karvesen.html
Et vous voyez que j'ai mis à côté, un lien Notez-le ouvrant vers une nouvelle fenêtre http://jim.e3b.org/teams/saxobank/popup_notation.html
Donc je vous présente mon projet : je souhaiterais que l'on puisse :
- cliquer à un endroit de n'importe quelle barre graphique par exemple celle d'un grimpeur, et que la largeur de la barre bleue s'adapte à l'endroit où j'ai cliqué.
-ou bien que l'on puisse coulisser le marqueur séparant la partie bleue et la partie grise.
Et que ça me donne une valeur situé entre 0 et 10,0 dans une textbox.
Ensuite je pense pouvoir me débrouiller pour établir un formulaire.
Donc premièrement, ai-je été clair ? deuxièmement est-ce réalisable à l'aide de Javascript et enfin troisièmement merci à tous ceux qui prendront la peine de m'aider .
Je vous montre le code :
- la partie head : <style type="text/css">
<!--
html{overflow:hidden}
#conteneur{
margin: 0px 0 10px 0px;
width: 197px;
height: 20px;
background-image:url('images/g_colorbar2.jpg');
border: 1px solid silver;
}
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .745em;
font-weight: bold;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("images/g_colorbar.jpg");
font-size: .745em;
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */
dd div {
position: relative;
background: url("images/g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("images/g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden
opacity : 0.5;
filter:alpha(opacity=50);;
}
</style>
- la partie Body :
<body style="width:250px; height:250px; background-image:url('http://www.wks.fr/local/cache-vignettes/L400xH400/tuto_308_1-40c3b.jpg');">
<DIV align=left style=" font-family: Arial; font-size: 14px; font-weight: bold; color: #74A0CF;" >Notez-le<br>
<br><dl>
<dt>Grimpeur</dt>
<dd>
<div id ="conteneur0" style="width:100%;"><strong></strong></div>
</dd><br>
<dt>Sprinteur</dt>
<dd>
<div id ="conteneur1" style="width:100%;"><strong></strong></div>
</dd><br>
<dt>Rouleur</dt>
<dd>
<div id ="conteneur2" style="width:100%;"><strong></strong></div> </dd><br>
<dt>Puncheur</dt>
<dd>
<div id ="conteneur3" style="width:100%;"><strong></strong></div>< </dd><br>
<dt>Classiques pavées</dt>
<dd>
<div id ="conteneur4" style="width:100%; font-size:11px;"><strong></strong></div>
</dd>
</dl>
</div>
Note : Sur mon site j'ai tenté un onmouseover mais c'était pas concluant et puis je n'arrivait pas à tirer une valeur. ( c'est mon plus gros problème en réalité.)
Barre animé
