begin process at 2012 02 14 04:41:27
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > SELECT PERSONNALISABLE

SELECT PERSONNALISABLE


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :select, dhtml, css Niveau :Débutant Date de création :12/06/2006 Vu / téléchargé :27 001 / 1 643
Auteur : celeg

Ecrire un message privé
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture BOITE DE TEXTE TYPE SCROLLBAR AVEC SCROLL VERTICAL
Toutes les sources de celeg

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip IMPRIMER UNE PARTIE DE PAGE NON SÉLECTIONNABLE par lecurieux41
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip QUIZ HTML CSS ET JAVASCRIPT par lecurieux41

Commentaires et avis

Commentaire de taz_iup le 21/06/2006 14:47:04

Salut je t'ai mis 9.
Voici les points négatifs:
   - le ul ne reste pas à la place du select d'origine
   - il manque une méthode pour mettre à jour le libelle du "titre"
   - les noms ne sont pas très explicites.
   - il manque quand même quelques commentaires.
   - Les styles (css annexes au fichier js) ne contiennent pas que de la mise en forme.

Sinon, tout le reste est impec ;).
Une jolie classe comme on les aime bien, gestion multi-navigateur,...

Commentaire de celeg le 21/06/2006 17:58:30

Merci TAZ_IUP, je desepérais d'avoir un retour de commentaire...

Je ne vois pas ce que tu veux dire par libelle du "titre" . Pour le reste je vais voir ce que je peux faire.

Commentaire de Rouanou le 06/10/2006 11:40:33

Pas mal sauf que j'ai un pb.

j'ai un div principal dans le body avec un height=100% (je suis obligé).
Du coup ton menu arrive complètement en bas de page.

J'ai essayé de jouer sur les css mais je n'arrive pas à ce qu'il se place dans la page.

As-tu une idée ?

 Ajouter un commentaire


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


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Beautiful woman in a bikini meditating on the beach
Photo Tropical Location With Palm Tree and Woman Holding Umbrella 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)