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- http://www.jejavascript.net/
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écé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- http://www.jejavascript.net/
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
