Bonjour tous le monde,
Comme vous l'avez lu je cherche à mettre en place des balises input type=radio en les liant à des images, je voudrait donc que les petit boutons radio soit changer par des images (les images qui peuvent avoir également deux/trois apparences: chcked, non-checked et peut être aussi cursor hover en css).
J'aimerai réussir à le faire en css et html et peut être en java script.
Je voudrait faire la meme bande d'image que sur la page d'accueil de twitter mais avec des balise input type=radio.(sans les images qui reload boen sur pas de php).
Voici le html:
et le css
Je vous remercie de votre aide par avance
Modifié par cl9m9n7 (29 Aug 2011 - 19:55)
Comme vous l'avez lu je cherche à mettre en place des balises input type=radio en les liant à des images, je voudrait donc que les petit boutons radio soit changer par des images (les images qui peuvent avoir également deux/trois apparences: chcked, non-checked et peut être aussi cursor hover en css).
J'aimerai réussir à le faire en css et html et peut être en java script.
Je voudrait faire la meme bande d'image que sur la page d'accueil de twitter mais avec des balise input type=radio.(sans les images qui reload boen sur pas de php).
Voici le html:
<!DOCTYPE html>
<head>
<title>test choix recherche</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--JAVASCRIPT-->
<script type="text/javascript" language="JavaScript">
function ActionDeterminator()
{
if(document.myform.reason[0].checked == true) {
document.myform.action = 'http://www.google.fr/search';
document.myform.method = 'get';
document.myform.name = 'q';
}
if(document.myform.reason[1].checked == true) {
document.myform.action = 'http://fr.search.yahoo.com/search';
document.myform.method = 'get';
document.myform.name = 'p';
}
if(document.myform.reason[2].checked == true) {
document.myform.action = 'http://www.bing.com/search';
document.myform.method = 'get';
document.myform.name = 'q';
}
if(document.myform.reason[3].checked == true) {
document.myform.action = 'http://www.facebook.com/search.php';
document.myform.method = 'get';
document.myform.name = 'q';
}
if(document.myform.reason[4].checked == true) {
document.myform.action = 'http://twitter.com/#!/search';
document.myform.method = 'get';
document.myform.name = 'q';
}
if(document.myform.reason[5].checked == true) {
document.myform.action = 'http://www.youtube.com/results?search';
document.myform.method = 'get';
document.myform.name = 'q';
}
if(document.myform.reason[6].checked == true) {
document.myform.action = 'http://www.dailymotion.com/relevance/search/';
document.myform.method = 'get';
document.myform.name = ' ';
}
if(document.myform.reason[7].checked == true) {
document.myform.action = 'http://www.deezer.com/fr/search/';
document.myform.method = 'get';
}
return true;
}
</script>
<!--JAVASCRIPT-->
<!--BARRE TITRE "DEBUT"-->
<div id="barre_titre">
<a href="index.html">
</a>
</div>
<!--BARRE TITRE "FIN"-->
<!--BARRE DE RECHERCHE et BOUTON. "DEBUT"-->
<div class="barre_recherche">
<form name="myform" method="get" action=""> <!--ATTENTION, GARDER LE "FORM"-->
<input class="text" type="text" name="q" size="25">
<input class="bouton" type="submit" value="" onClick="return ActionDeterminator();">
</div>
<!--BARRE DE RECHERCHE et BOUTON. "FIN"-->
<!--CASE DE CHOIX "DEBUT"-->
<div id="cases" >
<input type="radio" name="reason" id="case"><img src="images/case google.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case yahoo.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case bing.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case facebook.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case twitter.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case youtube.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case dailymotion.png"></input>
<input type="radio" name="reason" id="case"><img src="images/case deezer.png"></input>
</div>
<!--CASE DE CHOIX "FIN"-->
</form> <!--ATTENTION, GARDER LE "FORM"-->
</body>
</html>et le css
#bouton{
background: url(images/bouton.png) no-repeat;
width:60px;
height:40px;
/*EFFET ENFONCEMENT*/
position: relative;
left: 2px;
top: 2px;
}
body{
color: black;
background-color: #ffffff;
background-image: url(images/fond.jpg);
background-repeat: repeat-x;
margin:250px 0px;
padding:0px;
text-align:center;
}
#cases{
position:absolute;
top: 355px;
}
Je vous remercie de votre aide par avance
Modifié par cl9m9n7 (29 Aug 2011 - 19:55)
