Afficher un PopUp de définition pour un mot dansune liste déroulante
Avec paramêtrage du popup
c'est tout bête mais ça peut servir :)
Voir l'effet ici =>
http://www.blinckers-groups.com/script/changement_list_popup.html
Marche sous IE et N6
@++
Source / Exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
- PopUp sur liste ver 1.2
- Script pour afficher une définition dans un
- PopUp sur le changement d'un éléments d'une
- liste déroulante.
- Distribution libre
- BLINCKERS© Groups by McPeter
- http://www.blinckers-groups.com
- mcpeter@blinckers-groups.com
-->
<html>
<head>
<title>Définition sur liste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.case {
margin: 4px;
padding: 4px;
width: 500px;
font-size: 12px;
border: 1px dashed #666666;
}
-->
</style>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="4" bgcolor="#E5E5E5" class="case">
<tr>
<td>
<span style="font-size: 12px">
<em><font color="#333333"><strong>BLINCKERS© Groups by McPeter | Section JavaScript</strong></font></em><br> <br>
<font color="#004E98">Script pour afficher une définition, ou toutes données<br>
voulues, en fonction d'un choix dans une liste déroulante.</font>
<hr></span>
<form name="liste">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="140" align="left" valign="top">
<select name="liste_de_mots" style="width: 135px; font-size: 12px; color:#004E98" onChange="javascript:afficher_definition(document.liste.liste_de_mots.options[form.liste_de_mots.selectedIndex].value)">
<option value="0">--- Choisissez un mot ---</option>
<option value="0">------------------------------------</option>
<option value="1">Broadcast</option>
<option value="2">Chat</option>
<option value="3">Cookies</option>
<option value="4">DL</option>
<option value="5">E-Mail</option>
<option value="6">HTML</option>
</select></td>
<td><span style="font-size: 12px; color:#004E98">Choisisser un mot dans la liste déroulante pour voir sa définition</span></td>
</tr>
</table>
</form>
<script language="JavaScript 1.2" type="text/JavaScript">
// Paramêtre du PopUp
var couleur_de_fond_0 = "#E5E5E5";
var largeur_fenetre = "400"; // valeur en pixels
var hauteur_fenetre = "300"; // valeur en pixels
// Paramêtre de la zone de Titre
var couleur_titre = "#FF0000";
var police_titre = "Verdana";
var taille_titre = "12px";
var couleur_de_fond_1 = "#9BB6DA";
// Paramêtres pour la zone de définition
var couleur_content = "#333333";
var police_content = "Verdana";
var taille_content = "12px";
var couleur_de_fond_2 = "#9BB6DA";
// Paramêtres pour la zone de pied de PopUp
var couleur_pied = "#333333";
var police_pied = "Verdana";
var taille_pied = "12px";
var couleur_de_fond_3 = "#9BB6DA";
// Paramètres pour le bouton fermer
var fond_bouton = "#E5E5E5";
var police_bouton = "Verdana";
var taille_text_bouton = "10px";
var color_text_bouton = "#333333";
content=new Array();
// Modifiez le tableau ci-dessous pour y inscrire le texte associé à vos définitions.
// Vous pouvez augmenter ou réduire ce tableau à volonté.
// Le premier termes mis dans les apostrophes, est pour le titre, le deuxième : la définition.
content[0]=new Array("Définitions","Choisisser un mot dans la liste déroulante pour voir sa définition");
content[1]=new Array("Broadcast","Envoyer un message à l\'ensemble des membres de la liste");
content[2]=new Array("Chat","Vient de \"to chat\" : Discuter.");
content[3]=new Array('Cookies','Fichier téléchargé sur votre ordinateur lors d\'une navigation pour automatiser certaines tâches, comme la reconnaissance d\'un login et d\'un mot de passe.');
content[4]=new Array('DL','En anglais : DownLoad<br>Télécharger un fichier d\'un réseau/ordinateur vers son ordinateur');
content[5]=new Array('E-Mail','En anglais : Electronique Mail<br>Boîte aux lettres électronique.');
content[6]=new Array('HTML','En anglais : HyperText Mark-up Language<br>Langage universel permettant la mise en forme de texte.');
function afficher_definition(mot)
{
Window2=open("","","scrollbars=no,width="+largeur_fenetre+",height="+hauteur_fenetre+"");
Window2.document.open();
Window2.document.write("<html><head><TITLE>BLINCKERS© Groups - Définition sur liste</TITLE></head>");
Window2.document.write("<body bgcolor="+couleur_de_fond_0+" text=#000000>");
Window2.document.write("<table width=100% border=0 cellspacing=2 cellpadding=2><tr>");
Window2.document.write("<td height=30 align=center valign=middle bgcolor="+couleur_de_fond_1+" style='border: 1px dashed #333333; font-size:"+taille_titre+"; color:"+couleur_titre+"'>")
Window2.document.write("<strong>"+content[mot][0]+"</strong>");
Window2.document.write("</td></tr></table><br>");
Window2.document.write("<table width=100% height=62% border=0 cellspacing=2 cellpadding=5><tr>");
Window2.document.write("<td align=left valign=top bgcolor="+couleur_de_fond_2+" style='border: 1px dashed #333333; font-size:"+taille_content+"; color:"+couleur_content+"'>");
Window2.document.write(content[mot][1]);
Window2.document.write("</td></tr></table><br>");
Window2.document.write("<table width=100% border=0 cellspacing=2 cellpadding=2><tr>");
Window2.document.write("<td height=30 align=center valign=middle bgcolor="+couleur_de_fond_3+" style='border: 1px dashed #333333; font-size:"+taille_pied+"; color:"+couleur_pied+"'>");
Window2.document.write("<input type=button value='Fermer la fenêtre' onclick='window.close()' style='background-color:"+fond_bouton+" ; background-attachment: scroll; font-family:"+police_bouton+" ; font-size:"+taille_text_bouton+" ; color:"+color_text_bouton+" ; border-height: 2; text-decoration: none; font-weight: bold; border: 1; border-style: solid; padding: 1'>");
Window2.document.write("</td></tr></table></body></html>");
Window2.document.close();
}
</script>
</td>
</tr>
</table>
</body>
</html>
Conclusion :
19/02/2003
Réctification du code pour compatibilité Netscape 6
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.