Menu Javascript Déroulant au passage souris

Fermé

gawel - 3 mars 2009 à 15:22
anthonice Messages postés 1314 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 - 6 mars 2009 à 11:40

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

A voir également:

Menu Javascript Déroulant au passage souris
Menu déroulant excel - Guide
Telecharger javascript - Télécharger - Langages
Quelle touche pour débloquer la souris ? - Guide
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide

4 réponses

Réponse 1 / 4

pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
3 mars 2009 à 15:30

Essaie en remplaçant onClick() par onMouseOver()...

anthonice Messages postés 1314 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131
3 mars 2009 à 15:32

Quel pseudo lol

pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135 > anthonice Messages postés 1314 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011
3 mars 2009 à 15:49

Fais gaffe chuis un fou...

anthonice Messages postés 1314 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131 > pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010
3 mars 2009 à 16:02

mdr

Réponse 2 / 4

anthonice Messages postés 1314 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131
3 mars 2009 à 15:30

<img src="..." onmouseover="alert('coucou, je survole l'image)" />

A la place de la fonction alert, tu peux mettre n'importe quelle fonctions de ton choix

Réponse 3 / 4

Gawel
4 mars 2009 à 09:04

Merci pour votre réponce
J'essayerais sa et vous donnera la reponce

Bonne continuation a tous

Réponse 4 / 4

anthonice Messages postés 1314 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131
6 mars 2009 à 11:40

De rien ^^

Discussions similaires

Problème Chronopost : Pas d'avis de passage !!

Suppression listes déroulantes

les entrées et les sortées

Discussions similaires

Newsletters