Sujet Précédent Sujet Suivant

Menu Javascript Déroulant au passage souris

Fermé
gawel - 3 mars 2009 à 15:22
anthonice Messages postés 1316 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:

4 réponses

Réponse 1 / 4
pyschopathe Messages postés 1974 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()...
2
anthonice Messages postés 1316 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131
3 mars 2009 à 15:32
Quel pseudo lol
0
pyschopathe Messages postés 1974 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135 > anthonice Messages postés 1316 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...
0
anthonice Messages postés 1316 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131 > pyschopathe Messages postés 1974 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010
3 mars 2009 à 16:02
mdr
0
pyschopathe Messages postés 1974 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135 > anthonice Messages postés 1316 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011
3 mars 2009 à 22:59
^^
0
Réponse 2 / 4
anthonice Messages postés 1316 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
1
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
0
Réponse 4 / 4
anthonice Messages postés 1316 Date d'inscription samedi 10 novembre 2007 Statut Membre Dernière intervention 30 octobre 2011 131
6 mars 2009 à 11:40
De rien ^^
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses