Bonjour,
Je cherche à modifier ce script (menu dynamique qui s'ouvre lors d'un clic de souris) pour qu'il s'ouvre lors du survole de la souris et non du clic... Quelqu'un saurais répondre ?
Voici le script :
<html>
<Head>
<script language="JavaScript">
/* Daniel Fabien - webmaster@script-masters.com
* Script Masters - http://www.script-masters.com/
*
* Menu deroulant dynamique
* Vous pouvez utilisé ce script sous reserve de conserver ce message
*/
// Configurez ces variables pour personnaliser votre menu
var nbMenu = 4; // Nombre de Menu (ici 4 : javascript, php, MySql et Html
var tailleMenu = 400; // Largeur en pixel du menu
var hauteur = 200; // Hauteur approximative des menus une fois déroulé
var tailleCellule = tailleMenu / nbMenu; // Ne rien modifier
var background = "#FFFFFF"; // Couleur de fond de votre page
var couleurFond = "#C3C9D4"; // Couleur de fond du menu
var couleurRollover = "#959EAD"; // Couleur de la case du menu lors du rollover
var couleurBordure = "#000000"; // Couleur des bordures du menu
var couleurTexte = "#000000"; // Couleur de votre texte
var couleurTexteRoller = "#FFFFFF"; // Couleur des liens lors du passage de la souris
var police = "Verdana, Arial;"; // Police du menu
var taillePolice = "9"; // la taille de votre texte
var image = "fleche.gif"; // Adresse ou se trouve l'image pour rentrer le menu
// Vos titres principaux
var valMenu = new Array(nbMenu);
valMenu[0] = "Javascript";
valMenu[1] = "Php";
valMenu[2] = "MySQL";
valMenu[3] = "Html";
// Si vous rajouter des menus, rajouter aussi une ligne par menu
// en prenant soins d'increenter l'indice
// exemple :
// valSsMenu[4] = new Array();
// Le faire pour valSsMenu, valSsMenuLien, valSsMenuCible
var valSsMenu = new Array(nbMenu);
valSsMenu[0] = new Array();
valSsMenu[1] = new Array();
valSsMenu[2] = new Array();
valSsMenu[3] = new Array();
var valSsMenuLien = new Array(nbMenu);
valSsMenuLien[0] = new Array();
valSsMenuLien[1] = new Array();
valSsMenuLien[2] = new Array();
valSsMenuLien[3] = new Array();
var valSsMenuCible = new Array(nbMenu);
valSsMenuCible[0] = new Array();
valSsMenuCible[1] = new Array();
valSsMenuCible[2] = new Array();
valSsMenuCible[3] = new Array();
// Les sous-titres en rapport avec les numero de titres principaux
// Suivi du lien
// Et de la cible ( _blank = nouvelle fenêtre _top = même fenetre )
// Mettre le nom de la frame à la place de la cible si il y en a une
// Javascript
valSsMenu[0][0] = "Annuaire";
valSsMenuLien[0][0] = "http://www.script-masters.com/";
valSsMenuCible[0][0] = "_blank";
valSsMenu[0][1] = "Cours";
valSsMenuLien[0][1] = "http://www.script-masters.com/";
valSsMenuCible[0][1] = "_blank";
valSsMenu[0][2] = "Exemples";
valSsMenuLien[0][2] = "http://www.script-masters.com/";
valSsMenuCible[0][2] = "_blank";
// Php
valSsMenu[1][0] = "Guide Officiel";
valSsMenuLien[1][0] = "Http://www.script-masters.com/";
valSsMenuCible[1][0] = "_blank";
valSsMenu[1][1] = "Sites Php";
valSsMenuLien[1][1] = "Http://www.script-masters.com/";
valSsMenuCible[1][1] = "_blank";
valSsMenu[1][2] = "Trucs et astuces";
valSsMenuLien[1][2] = "Http://www.script-masters.com/";
valSsMenuCible[1][2] = "_blank";
// MySQL
valSsMenu[2][0] = "Qu'est-ce que MySQL?";
valSsMenuLien[2][0] = "Http://www.script-masters.com/";
valSsMenuCible[2][0] = "_blank";
valSsMenu[2][1] = "Installation";
valSsMenuLien[2][1] = "Http://www.script-masters.com/";
valSsMenuCible[2][1] = "_blank";
valSsMenu[2][2] = "Manipulation";
valSsMenuLien[2][2] = "Http://www.script-masters.com/";
valSsMenuCible[2][2] = "_blank";
valSsMenu[2][3] = "Livres";
valSsMenuLien[2][3] = "Http://www.script-masters.com/";
valSsMenuCible[2][3] = "_blank";
// Html
valSsMenu[3][0] = "Balises de bases";
valSsMenuLien[3][0] = "Http://www.script-masters.com/";
valSsMenuCible[3][0] = "_blank";
valSsMenu[3][1] = "Editeurs Html";
valSsMenuLien[3][1] = "Http://www.script-masters.com/";
valSsMenuCible[3][1] = "_blank";
valSsMenu[3][2] = "Exemples";
valSsMenuLien[3][2] = "Http://www.script-masters.com/";
valSsMenuCible[3][2] = "_blank";
// Ne rien modifier sous cette ligne //
document.write('<style type="text/css">');
document.write('table.menu {');
document.write(' border: 1px solid '+ background +'');
document.write('}');
document.write('td.inc {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' background-color: '+ couleurFond +';');
document.write(' border-top-width: 1px;');
document.write(' border-right-width: 1px;');
document.write(' border-bottom-width: 1px;');
document.write(' border-left-width: 0px;');
document.write(' border-top-style: solid;');
document.write(' border-right-style: solid;');
document.write(' border-bottom-style: solid;');
document.write(' border-left-style: solid;');
document.write(' border-top-color: '+ couleurBordure +';');
document.write(' border-right-color: '+ couleurBordure +';');
document.write(' border-bottom-color: '+ couleurBordure +';');
document.write(' border-left-color: '+ couleurBordure +';');
document.write(' cursor: hand;');
document.write('}');
document.write('td.menu {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' background-color: '+ couleurFond +';');
document.write(' border: 1px solid '+ couleurBordure +';');
document.write(' cursor: hand;');
document.write('}');
document.write('td.ssmenuD {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' background-color: '+ couleurFond +';');
document.write(' border: 1px solid '+ couleurBordure +';');
document.write('}');
document.write('a.ssmenu {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' color: '+ couleurTexte +';');
document.write('}');
document.write('td.invisible {');
document.write(' background-color: '+ background +';');
document.write(' border: 1px solid '+ background +';');
document.write('}');
document.write('</style>');
// Detection des navigateurs
var is_ie5 = 0;
var is_ns6 = 0;
var is_ns4 = 0;
var is_ie4 = 0;
if ((document.getElementById) && (document.all)){
is_ie5 = 1;
} else if(document.getElementById){
is_ns6 = 1;
}
if (document.layers) {
is_ns4 = 1;
}
if ((document.all)&&(!document.getElementById)) {
is_ie4 = 1;
}
function generationMenu(){
// Affichage du menu
document.write('<table width="'+ tailleMenu +'" border="0" cellspacing="0" cellpadding="0">');
document.write('<tr align="center" class="menu">');
for (i=0;i<nbMenu;i++) {
var classe = "inc";
if ( i==0 ){
classe="menu";
}
document.write('<td onMouseOut="javascript:this.style.background=\''+ couleurFond +'\'" onMouseOver="javascript:this.style.background=\''+ couleurRollover +'\'" class="'+ classe +'" width="'+ tailleCellule +'"onClick="changeMenu('+ i + ')">'+ valMenu[i] +'</td>');
}
document.write('</tr>');
// Préparation des sous-menus
document.write('<tr border="0" class="menu"><td colspan='+ nbMenu +' class="ssmenu" border="0">');
if (is_ie5 || is_ie4 || is_ns6){
document.write('<DIV id="ssMenu" style="position:relative;top:0px;left:0px;width='+ tailleMenu +';height='+ hauteur +';visibility:hidden">');
document.write('</DIV>');
}
document.write('</td></tr>');
document.write('</table>');
}
function changeMenu(numMenu){
// Génération du nouveau tableau
var newTable="";
newTable += "<table border='0' cellspacing='0' cellpadding='0' width='"+ tailleMenu +"' class=menu><tr>";
for (i=0;i<valSsMenu.length;i++) {
if ( i==numMenu ) {
newTable += "<td class='ssmenuD' width='"+ tailleCellule +"'>";
for (z=0;z<valSsMenu[i].length;z++) {
// On affiche les liens
newTable += "<a href='"+ valSsMenuLien[i][z] +"' target='"+ valSsMenuCible[i][z] +"' onMouseOut='javascript:this.style.color=\""+ couleurTexte +"\"' onMouseOver='javascript:this.style.color=\""+ couleurTexteRoller +"\"' class='ssmenu'>"+ valSsMenu[i][z] + "</a><br>";
}
newTable += "<a href='javascript:suppMenu()'><center><img src='"+ image +"' border=0></center></a></td>";
}else{
newTable += "<td class='invisible' width='"+ tailleCellule +"'> </td>";
}
}
newTable += "</tr></table>";
if (is_ie5 || is_ns6){
document.getElementById("ssMenu").innerHTML = newTable;
document.getElementById("ssMenu").style.visibility = "visible";
} else if (is_ie4) {
document.all["ssMenu"].innerHTML = newTable;
document.all["ssMenu"].style.visibility = "visible";
}
}
function suppMenu() {
document.getElementById("ssMenu").style.visibility = "hidden";
}
</script>
</Head>
<Body>
<script>
generationMenu();
</script>
</Body>
</html>
Merci d'avance et bonne continuation
Afficher un message au passage de la souris (tableau ou zone de texte) avec javascript
