ACCUEIL
Contact
Rechercher
Insérez dans vos
  favoris

ACCUEIL DES
  VISITEURS

DATE & HEURE
EFFETS DE TEXTE
FENETRES
FORMULAIRES
IMAGES
MENUS
PRATIQUE
POP UP
DIVERS

Cours de javascript
Générer vos Fichiers
  CSS

Générer vos Meta-Tags
Description des Balises
  Meta

Les Codes Couleur
L'objet Math
Lissage De Prêt
Tableau d'Amortissement
un Multi-Moteurs de recherche sur Votre Site
Cryptez votre e-mail
  pour contrer le Spam

Cryptez vos Scripts
Moteurs de recherches
Référencement
Je Crée Mon Site
L'éditeur JavaScript


Un Menu Contextuel avec des Liens Internes ou Externes

Un clic droit sur votre page fait apparaitre un menu personnalisé avec des titres, des séparateur et des images.

Les liens s'ouvre soit dans la même page, soit dans une autre page.
Cela marche aussi avec des Frames Tester les Frames

Essayer sur cette page et Pour Copier utiliser le menu Edition-Copier.

Testé avec IE Netscape7 Firefox

Insérez le code ci-dessous dans l'entête de votre page (entre les balises<head> ... </head>) et corrigez le comme suit :

Pour Copier utiliser le menu Edition-Copier.
<script language="JavaScript">
<!--
//PLF- /
var colorbg = "#CCCCCC"; //couleur de fond
var colorlien = "#000000"; //couleur du texte
var colorsel = "#0000CC"; //couleur selection
var taillebg = 150 //largeur du menu
menutexte = new Array;
menulien = new Array;
menutarget = new Array;
// MENU
menutexte[0]= "<img src='flechg.gif' border='0' width='11' height='11'>Page pr&eacute;c&eacute;dente"
menulien[0]= "javascript:history.go(-1)"
menutarget[0]="_self"
menutexte[1]= "<img src='flechd.gif' border='0' width='11' height='11'>Page suivante"
menulien[1]= "javascript:history.go(1)"
menutarget[1]="_self"
menutexte[2]= ""
menulien[2]= ""
menutarget[2]=""
menutexte[3]= "Mes Pages"
menulien[3]= ""
menutarget[3]=""
menutexte[4]= "Page1"
menulien[4]= "page1.htm"
menutarget[4]="_self"
menutexte[5]= "Page2"
menulien[5]= "page2.htm"
menutarget[5]="_self"
menutexte[6]= "Liens Externes"
menulien[6]= ""
menutarget[6]=""
menutexte[7]= "La cuisine de ma Copine"
menulien[7]= "http://www.lacuisinedemacopine.net/"
menutarget[7]="_blank"
function position(p)
{
position_x = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
position_y = (navigator.appName.substring(0,3) == "Net") ? p.pageY : event.y+document.body.scrollTop;
}
function ouvrir_menu()
{
document.getElementById("menu_context").style.top = position_y;
document.getElementById("menu_context").style.left = position_x;
document.getElementById("menu_context").style.visibility = "visible";
return(false);
}
function fermer_menu()
{
if (document.getElementById)
{
document.getElementById("menu_context").style.top = 0;
document.getElementById("menu_context").style.left = 0;
document.getElementById("menu_context").style.visibility = "hidden";
}
}
function menu_sel(selec, lienmenu)
{
if(selec == 1)
{
lienmenu.style.background = colorsel;
lienmenu.style.color = colorbg;
}
else
{
lienmenu.style.background =colorbg;
lienmenu.style.color = colorlien;
}
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
//-->
</script>

Personnalisez votre menu contextuel en changeant les valeurs

Créez votre menu en indiquant pour chaque lien les 3 valeurs suivantes
menutexte[4]= "Page1" indiquez le texte du lien
menulien[4]= "page1.htm" indiquez l'adresse de la page
menutarget[4]="_self" indiquez l'ouverture de la nouvelle page : même page "_self" - autre page "_blank" ou le nom de votre frame si vous en utilisés

Pour insérer un espace laissez menutexte vide :
menutexte[2]= ""
menulien[2]= ""
menutarget[2]=""

Pour insérer un titre laissez menulien vide. La valeur de menutexte est alors centrée :
menutexte[3]= "Mes Pages"
menulien[3]= ""
menutarget[3]=""

Pour insérer une image titre mettez la balise <img> dans menutexte (avec du texte ou non). Pensez à mettre border='0' :
menutexte[1]= "<img src='flechd.gif' border='0' width='11' height='11'>Page suivante"
menulien[1]= "javascript:history.go(1)"
menutarget[1]="_self"

Chaque lien à un indice [4]. Commencez à [0] et ne laissez pas de trou (pour chaque valeur)

Insérez le code ci-dessus dans votre page Web entre les balises <BODY> et </BODY>. Juste avant </BODY>

Pour Copier utiliser le menu Edition-Copier.
<script language="JavaScript">
<!--
//PLF- /
document.write('<div id=menu_context style="z-index:500;position:absolute;width:'+taillebg+'px; border:2px solid #9D9DA1; background-color:'+colorbg+'; font-family:Verdana; font-size:10px; cursor:default; visibility:hidden;padding:3">');
document.onmousemove = position;
document.oncontextmenu = ouvrir_menu;
document.onclick = fermer_menu;
for(a=0;a<menulien.length;a++)
{
if(menutexte[a].length > 0)
{
if(menulien[a].length > 0)
{
document.write('<div onMouseOver="menu_sel(1, this)" onMouseOut="menu_sel(0, this)"><A HREF="'+menulien[a]+'" TARGET="'+menutarget[a]+'" STYLE="text-decoration:none;color:'+colorlien+'">'+menutexte[a]+'</A></div>');
}
else
{
document.write('<div align="center" onMouseOver="menu_sel(1, this)" onMouseOut="menu_sel(0, this)">'+menutexte[a]+'</div>');
}
}
else
{
document.write('<div onMouseOver="menu_sel(1, this)" onMouseOut="menu_sel(0, this)"><hr width="'+(taillebg-5)+'" size="1" color="9D9DA1" /></div>');
}
}
//-->
</script>

 

Ce site vous a plu ? Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur votre site

 
 
Mon javascript    31-08-2018