|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 SELECT PERSONNALISABLE
 Information sur la source
 Description
Toujours dans la meme optique,que ma 1er source, ce script permet de remplacer une balise select (et de recuperer les options qui le constitu) par une liste de type ul. Comme ca sous ie on peut gerer un select de maniere différente et spprimer le bug d'affichage. On a le document html , la feuille de style et le js,1 image qui reprend 3 etats (onmouseover,out,click). Comme ca meme si le javascript est desactivé le select reste en place. Le css permet de gerer la mise en forme.
 Source
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>Select perso</title>
- <style type="text/css">
-
- </style>
- <script src="select.js"></script>
- </head>
- <body>
- <select id="select_0" >
- <option value="#titre">Choisir le lien</option>
- <option value="#Lien 1" class="opt">Texte Lien 1</option>
- <option value="#Lien 2" class="opt">Texte Lien 2</option>
- <option value="#Lien 3" class="opt">Texte Lien 3</option>
- <option value="#Lien 4" class="opt">Texte Lien 4</option>
- <option value="#Lien 5" class="opt">Texte Lien 5</option>
- </select>
-
-
- </body>
-
- </html>
-
- dans un css :
-
- BODY {background:url(image/bg.png);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:x-small;line-height:13px;}
- .selecteur, .selecteur_liste {display:block;padding:0;margin:0;width:152px;height:auto;list-style:none}
- .selecteur LI {display:block;height:13px;background:#dadada}
- .selecteur LI.titre {width:auto;height:auto;border:#666666 1px solid}
- .selecteur A {display:block;width:auto;height:13px;background:url(image/bg_select.png) no-repeat;text-indent:5px;text-decoration:none;color:#666666}
- .selecteur LI.titre A:hover {background:url(image/bg_select.png) no-repeat 0 -13px}
- .selecteur_liste{clear:both;z-index:0;position:absolute;height:50px;overflow:auto;border:#666666 1px solid;border-top:#dadada 1px solid}
- .selecteur_liste LI.opt A {color:#666666;text-decoration:none}
- .selecteur_liste LI.opt A:hover {background:#FFFFFF;color:red}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Select perso</title>
<style type="text/css">
</style>
<script src="select.js"></script>
</head>
<body>
<select id="select_0" >
<option value="#titre">Choisir le lien</option>
<option value="#Lien 1" class="opt">Texte Lien 1</option>
<option value="#Lien 2" class="opt">Texte Lien 2</option>
<option value="#Lien 3" class="opt">Texte Lien 3</option>
<option value="#Lien 4" class="opt">Texte Lien 4</option>
<option value="#Lien 5" class="opt">Texte Lien 5</option>
</select>
</body>
</html>
dans un css :
BODY {background:url(image/bg.png);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:x-small;line-height:13px;}
.selecteur, .selecteur_liste {display:block;padding:0;margin:0;width:152px;height:auto;list-style:none}
.selecteur LI {display:block;height:13px;background:#dadada}
.selecteur LI.titre {width:auto;height:auto;border:#666666 1px solid}
.selecteur A {display:block;width:auto;height:13px;background:url(image/bg_select.png) no-repeat;text-indent:5px;text-decoration:none;color:#666666}
.selecteur LI.titre A:hover {background:url(image/bg_select.png) no-repeat 0 -13px}
.selecteur_liste{clear:both;z-index:0;position:absolute;height:50px;overflow:auto;border:#666666 1px solid;border-top:#dadada 1px solid}
.selecteur_liste LI.opt A {color:#666666;text-decoration:none}
.selecteur_liste LI.opt A:hover {background:#FFFFFF;color:red}
 Conclusion
Verion 0.1b. Tester seulement sous firefox et ie6, donc si d'autre personne on d'autre navigateur merci de me donner les erreurs svp. Probleme de Gestion du onblur sous ie mais pas sous firfox. La aussi si quelqu'un a une idée merci de m'en faire part. J'attend vos commentaire pour 'aider a ameliorer mes scripts.
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
DHTML - Formulaire - Input File - Style CSS [ par asgarden ]
Bonjour,Voilà cela fait un petit moment que je cherche comment modifier le style d'un champs de formulaire de type FILE ?J'ai beau essayer, rien n'y f
affichage du site, CSS [ par blinix123 ]
J'ai mon site, et j'aimerais qu'il soit fixe, j'entends par la que j'aimerais que la page soit fixe et que si jamais je la rétrécis, la forme de la pa
Simpe question HTML et CSS [ par syndrael ]
Bonjour, J'ai une image et un bouton radio que je place dans un TD. Comment puis je faire pour que ces deux éléments soient l'un au dessus de l'autre,
gros probleme de css [ par stefbuet ]
j'ai un gros problemme : j'ai mon site, avec une page html et un fichier css, quand je ne suis pas connecté a internet, l'affichage marche correctemen
Feuille de style [ par Jossdoit ]
Bonjour,Je developpe actuellement un site web et j'utilise du CSS. Je trouve ca bien sympas mais je voulais savoir si il etait possible d'utiliser le
création d'un imput text générer par un select dynamique (PHP+SQL) dans un formulaire [ par Ullir ]
J'ai de gros problemes de surchauffe de matiere grise !!! Débutant en code PHP, je mélange quelques codes ( html - javascript - php - sql
Comment faites vous pour attribuer du CSS à vos pubs AdSense ? [ par bouazza92 ]
Salut tous et toutes ,voilà , j'ai récemmement crée un compte AdSense chez Google , mais ça me rapporte que peu de centimes , j'ai donc l'idée de pers
création d'un imput text générer par un select dynamique (PHP+SQL) dans un formulaire [ par Ullir ]
J'ai de gros problemes de surchauffe de matiere grise !!! Débutant dans les langages informatiques, je mélange quelques codes ( html - javasc
triple liste déroulante dynamique [ par ahcorad ]
voila j'aimerais faire une liste déroulante dynamique sans recharger la page ! (catégorie, sous_cat et objets) je n'arrive seulement à faire fonctionn
Propriété CSS [ par xactise ]
Bonjours voila dans mon fichier css j'ai ce petit bout de code : TABLE:hover{ background-color : #DDDDDD; }Ce petit bout de code fonctionne très bie
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|