Entrar

Creando pagina web

gusabio · · Solicitar retirada
Hola buen día, soy nuevo aquí, estoy crenado una pagina, tengo un menú desplegable y utilice javascrip y css, la pagina esta solamente en HTML, para el menu utilice dos archivos, uno llamado menustyle.css y el otro menuscript.js, el index es la pagina principal; pero mi menú que esta de forma horizontal no despliega, si cambia de color los botones pero no despliega si alguien podría ayudarme por favor se los agradecería mucho; aquí les dejo los códigos que estoy utilizando

menuscript.js

//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
if ( subInfo[x+1].length < 1 ) {
document.write('<div id="submenu' + (x+1) + '">');
// SET DIV FOR BUTTONS WITH SUBMENU
} else {
document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
document.write('onMouseOver="overSub=true;');
document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
document.write('onMouseOut="overSub=false;');
document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
document.write('setOutImg(\'' + (x+1) + '\',\'\');">');


document.write('<ul>');
for ( k=0; k<subInfo[x+1].length-1; k++ ) {
document.write('<li>');
document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
document.write('target="' + subInfo[x+1][k+1][2] + '">');
document.write( subInfo[x+1][k+1][0] + '</a>');
document.write('</li>');
}
document.write('</ul>');
}
document.write('</div>');
}





//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources;
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources;
}
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}



//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null;
}

// GET X COORDINATE
function getRealLeft(id) {
var el = getElement(id);
if (el) {
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
}

// GET Y COORDINATE
function getRealTop(id) {
var el = getElement(id);
if (el) {
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
}

// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x;
el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
hideAllSubMenus();
butX = getRealLeft(buttonID);
butY = getRealTop(buttonID);
moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
for ( x=0; x<totalButtons; x++) {
moveObjectTo("submenu" + (x+1) + "",-500, -500 );
}
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
if ( overSub == false ) {
moveObjectTo(subID,-500, -500);
}
}



//preload();


menustyle.css



.dropmenu {
position: absolute;
left: -1500px;
visibility: visible;
z-index: 101;
float: left;

border-width: 0px;
border-style: solid;
border-color: #FFFFFF;
background-color: #D5D9FF;
}
.dropmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropmenu li {
display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
display: block;
width: 120px;

padding: 1px;
margin: 2px;
font-family: Trebuchet MS;
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;

color: #000000;
background-color: #808BFF;
}
.dropmenu a:hover {
padding: 1px;
margin: 2px;
font-family: Trebuchet MS;
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;

color: #000000;
background-color: #D5DEFF;
}


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
.Estilo1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
border-left-width: thin;
border-left-style: none;
border-left-color: #000000;
}
.Estilo5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
</style>

<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:771px;
top:227px;
width:186px;
height:15px;
z-index:1;
}
.Estilo9 {
font-size: 12px;
color: #FFFFFF;
}
.Estilo10 {color: #FFFFFF}
body {
background-color: #E2E2E2;
}
.Estilo13 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.Estilo15 {font-size: 18px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #000099; }
-->
</style>

<style type="text/css">
<!--
#apDiv2 {
position:absolute;
left:217px;
top:282px;
width:903px;
height:28px;
z-index:1;
}
-->
</style>
<style type="text/css">
<!--
.Estilo18 {color: #000000}
-->
</style></head>


<body>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><br>
</td></tr></table>

<table border="0" cellpadding="0" cellspacing="0"><tr><td><br>
</td></tr></table>

<table width="914" height="147" border="0" align="center" background="Imagenes/Encabezado1.jpg">
<tr>
<td width="100%"><div align="right" class="Estilo1">
<div align="right" class="Estilo1">
<table width="289" height="31">
<tr>
<td width="29"><span class="Estilo9">Inicio</span></td>
<td width="64"><div align="center" class="Estilo9">Descargas</div></td>
<td width="89" class="Estilo5 Estilo9">Sitios de interes</td>
<td width="86"><div align="center"><span class="Estilo5 Estilo10">Mapa del sitio</span></div></td>
</tr>
</table>
<label></label>
<table border="0">
<tr>
<td><div align="left"> <img src="btnBuscar.jpg" alt="btnBuscar" width="67" height="20" />
<input type="text" name="txtBuscar" id="txtBuscar" />
</div></td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div></td>
</tr>
</table>
<p>
<label></label></p>
<table width="917" height="40" border="0" align="center">
<tr>
<td width="911"><label></label>
<label> </label>
<div align="center">

<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="Link 1" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="buttons/button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><a href="Sub-Link 1" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target=""><img src="buttons/button2up.png" border="0" id="button2" vspace="1" hspace="1"></a><a href="Link 3" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target=""><img src="buttons/button3up.png" border="0" id="button3" vspace="1" hspace="1"></a><a href="Link 4" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu(\'submenu4\')',delay);" target=""><img src="buttons/button4up.png" border="0" id="button4" vspace="1" hspace="1"></a><a href="Link 7" onmouseover="setOverImg('5','');overSub=true;showSubMenu('submenu5','button5');" onmouseout="setOutImg('5','');overSub=false;setTimeout('hideSubMenu(\'submenu5\')',delay);" target=""><img src="buttons/button5up.png" border="0" id="button5" vspace="1" hspace="1"></a><a href="" onmouseover="setOverImg('6','');overSub=true;showSubMenu('submenu6','button6');" onmouseout="setOutImg('6','');overSub=false;setTimeout('hideSubMenu(\'submenu6\')',delay);" target=""><img src="buttons/button6up.png" border="0" id="button6" vspace="1" hspace="1"></a><a href="" onmouseover="setOverImg('7','');overSub=true;showSubMenu('submenu7','button7');" onmouseout="setOutImg('7','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target=""><img src="buttons/button7up.png" border="0" id="button7" vspace="1" hspace="1"></a><br>
</td></tr></table>






</tr>
</table>
<table width="915" height="1169" align="center" bgcolor="#FFFFFF">
<tr>
<th width="182" align="left" valign="top" scope="col"><p align="right">&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span class="Estilo15">Teléfono</span></p>
<p><img src="Imagenes/linea roja.jpg" alt="linea roja" width="182" height="0" /></p>
<table width="153" height="26" bordercolor="#FFFFFF" bordercolorlight="#000000">
<tr>
<th width="149" align="left" valign="top" scope="col"><div align="center" class="Estilo13">01 938-153- 3190</div></th>
</tr>
</table>
<p>&nbsp;</p>
<p><span class="Estilo15">Siguenos</span></p>
<p><img src="Imagenes/linea roja.jpg" alt="linea roja" width="182" height="0" /></p>
<p>
<label>
<input type="image" name="logoface2" id="logoface2" src="Imagenes/logoface2.jpg" />
</label>
<label>
<input type="image" name="logotwitter" id="logotwitter" src="Imagenes/logo twitter.jpg" />
</label>
</p></th>
<th width="534" align="left" valign="top" scope="col">&nbsp;</th>
<th width="183" align="left" valign="top" scope="col">&nbsp;</th>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>