<html>
<head>
<title>3 menús laterales gráficos</title>
<script LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
// Vertical-Slide-Menu, written by Peter Gehrig and Urs Dudli
// Copyright (c) 1999 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// IMPORTANT: if you add this script to a script-library or script-archive
// you have to add a link to http://www.24fun.ch on the webpage where this script is
// running.
// Additional scripts can be found at http://www.24fun.ch.
//
info@24fun.ch
// 12/19/1999
// Instruction:
// Crate an imagemap for each of your menu categories.
// Put each imagemap into a <DIV>Container (see end of the page).
// In this sample the <DIV>Container are called menu1, menu2 and menu3
// Configure the vertical and horizontal position of each imagemap (just below)
// Set the starting position of the categories of your menu
var menu1top=5
var menu2top=95
var menu3top=185
var menuleft=-115
// This number configures the length and the speed of the menu-movement.
// Play around with it until you are satisfied.
var pace=14
// Don't change the variables below.
var step
var direction
var pause=25
var thismenu
var vorzeichen=1
var vorzeimenu1=-1
var vorzeimenu2=-1
var vorzeimenu3=-1
var menuismoving="no"
function gotourl(thisurl) {
alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}
function inite() {
if (document.layers) {
document.menu1.left=menuleft
document.menu2.left=menuleft
document.menu3.left=menuleft
document.menu1.top=menu1top
document.menu2.top=menu2top
document.menu3.top=menu3top
}
if (document.all) {
document.all.menu1.style.posLeft=menuleft
document.all.menu2.style.posLeft=menuleft
document.all.menu3.style.posLeft=menuleft
document.all.menu1.style.posTop=menu1top
document.all.menu2.style.posTop=menu2top
document.all.menu3.style.posTop=menu3top
}
}
function getmenuname(clickedmenu) {
if (menuismoving=="no") {
if (document.layers) {
thismenu=eval("document."+clickedmenu)
}
if (document.all) {
thismenu=eval("document.all."+clickedmenu+".style")
}
step=pace
checkdirection()
movemenu()
}
}
function checkdirection() {
if (document.layers) {
if (thismenu==document.menu1){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
if (thismenu==document.menu2){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2}
if (thismenu==document.menu3){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3}
}
if (document.all) {
if (thismenu==document.all.menu1.style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
if (thismenu==document.all.menu2.style){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2}
if (thismenu==document.all.menu3.style){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3}
}
menuismoving="yes"
}
function movemenu() {
if (document.layers) {
if (step>=0) {
thismenu.left+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (document.all) {
if (step>=0) {
thismenu.posLeft+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
}
// - End of JavaScript - -->
</script>
<style type="text/css">
#menu1 {position:absolute;left:-1000px;}
#menu2 {position:absolute;left:-1000px;}
#menu3 {position:absolute;left:-1000px;}
.baseline {
position:absolute;
left:250px;
top:100px;
font-family:Arial;
font-size:9pt;
color:000000;
}
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="inite()" style="font-family: Verdana">
<div ID="text" class="baseline" style="width: 532; height:0">
<br>
<br>
Pulsa en el borde de cualquiera de los botones de menú a la izquierda para
visualizar los submenús. Para cerrarlos pulsa sobre el mismo borde..<br>
<br>
<br>
<br>
<br>
</div>
<div ID="menu1">
<img SRC="menu1dec99.gif" USEMAP="#menu1dec99.gif" BORDER="0" width="150" height="93">
<map NAME="menu1dec99.gif">
<area SHAPE="RECT" COORDS="117,10,132,83" HREF="javascript:getmenuname('menu1')">
<area SHAPE="RECT" COORDS="22,10,91,24" HREF="javascript:gotourl('contacto 1')">
<area SHAPE="RECT" COORDS="22,25,91,38" HREF="javascript:gotourl('contacto 2')">
<area SHAPE="RECT" COORDS="19,39,92,51" HREF="javascript:gotourl('contacto 3')">
<area SHAPE="RECT" COORDS="19,54,91,64" HREF="javascript:gotourl('contacto 4')">
<area SHAPE="RECT" COORDS="20,67,93,79" HREF="javascript:gotourl('contacto 5')">
</map>
</div>
<div ID="menu2">
<img SRC="menu2dec99.gif" USEMAP="#menu2dec99.gif" BORDER="0" width="150" height="93">
<map NAME="menu2dec99.gif">
<area SHAPE="RECT" COORDS="117,7,133,82" HREF="javascript:getmenuname('menu2')">
<area SHAPE="RECT" COORDS="20,12,63,23" HREF="javascript:gotourl('enlace 1')">
<area SHAPE="RECT" COORDS="18,24,65,37" HREF="javascript:gotourl('enlace 2')">
<area SHAPE="RECT" COORDS="18,40,66,52" HREF="javascript:gotourl('enlace 3')">
<area SHAPE="RECT" COORDS="19,55,71,63" HREF="javascript:gotourl('enlace 4')">
<area SHAPE="RECT" COORDS="16,68,72,80" HREF="javascript:gotourl('enlace 5')">
</map>
</div>
<div ID="menu3">
<img SRC="menu3dec99.gif" USEMAP="#menu3dec99.gif" BORDER="0" width="150" height="93">
<map NAME="menu3dec99.gif">
<area SHAPE="RECT" COORDS="117,7,133,82" HREF="javascript:getmenuname('menu3')">
<area SHAPE="RECT" COORDS="19,9,82,24" HREF="javascript:gotourl('tema 1')">
<area SHAPE="RECT" COORDS="17,25,82,36" HREF="javascript:gotourl('tema 2')">
<area SHAPE="RECT" COORDS="19,37,81,50" HREF="javascript:gotourl('tema 3')">
<area SHAPE="RECT" COORDS="19,51,82,64" HREF="javascript:gotourl('tema 4')">
<area SHAPE="RECT" COORDS="19,66,82,78" HREF="javascript:gotourl('tema 5')">
</map>
</div>
<p align="center">
<b>3 Menús laterales gráficos</b></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center">Imágenes:<br>
<a href="menu1dec99.gif">menu1dec99.gif</a><br>
<a href="menu2dec99.gif">menu2dec99.gif</a><br>
<a href="menu3dec99.gif">menu3dec99.gif</a></p>
</body>
</html>
vista previa : 
