nicht angemeldet
Sorry, bin eben noch amateur!!!
also, da ich leider nicht genau weiss, welcher Teil relevant ist, setzte ich meine Code unten ein!!
<html>
<head>
<title>Drop-Down Menus 2</title>
<script language="JavaScript" type="text/JavaScript">
// ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
//
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// --- Version Date 8-15-02 --------------------------------------------------------------------------------------------------------------
//
// ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
var w3c = document.getElementById ? true : false;
var iex = document.all ? true : false;
var ns4 = document.layers ? true : false;
function fixNetscape(){
if(origWidth != window.innerWidth || origHeight != window.innerHeight){
window.location.reload();
}
}
if(ns4){
origWidth = window.innerWidth;
origHeight = window.innerHeight;
window.onresize = fixNetscape;
}
function newImage(src){
img = new Image();
img.src = src;
return img;
}
function imageSwap(img,obj,div){
if(ns4 && div != null){
document.layers[div].document.images[img].src = obj.src;
}else{
document.images[img].src = obj.src;
}
}
function getStyle(name, nest){
nest = nest ? 'document.'+nest+'.' : '';
return w3c ? document.getElementById(name).style : iex ? document.all[name].style : ns4 ? eval(nest+'document.'+name) : false;
}
// ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
Menus = new Object();
var curMenu = null;
MakeMenu = function(name,left,top,rollimg,rollout,rollover,rolldiv){
this.name = name;
this.left = left;
this.top = top;
this.timer = null;
this.rollimg = rollimg;
this.rollout = newImage(rollout);
this.rollover = newImage(rollover);
this.rolldiv = (rolldiv != null) ? rolldiv : null;
this.obj = name+'Object';
eval(this.obj+'=this');
}
MakeMenu.prototype.show = function(){
clearTimeout(this.timer);
getStyle(this.name).visibility = 'visible';
imageSwap(this.rollimg,this.rollover,this.rolldiv);
curMenu = this.name;
}
MakeMenu.prototype.hide = function(){
this.timer = setTimeout(this.obj+'.hideIt()',500);
}
MakeMenu.prototype.hideIt = function(){
getStyle(this.name).visibility = 'hidden';
imageSwap(this.rollimg,this.rollout,this.rolldiv);
}
MakeMenu.prototype.startMenu = function(){
var html;
if(ns4){
html = '<layer name="'+this.name+'" left="'+this.left+'" top="'+this.top+'" z-index="1000" visibility="hidden" ';
}else{
html = '<div id="'+this.name+'" style="position:absolute; left:'+this.left+'px; top:'+this.top+'px; z-index:1000; visibility:hidden" ';
}
html += 'onMouseOver="Menus.'+this.name+'.show()" onMouseOut="Menus.'+this.name+'.hide()">';
return html;
}
hideCur = function(){
if(curMenu != null){
Menus[curMenu].hideIt();
curMenu = null;
}
}
endMenu = function(){
return ns4 ? '</layer>' : '</div>';
}
createMenu = function(name,left,top,rollimg,rollout,rollover,rolldiv){
Menus[name] = new MakeMenu(name,left,top,rollimg,rollout,rollover,rolldiv);
}
// ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
// object name | left position | top position | rollover image name | normal image src | rollover image src | rollover div name (optional)
createMenu('submenu1', 20, 41, 'img_1', 'images/img_out.gif', 'images/img_over.gif');
createMenu('submenu2', 120, 41, 'img_2', 'images/img_out.gif', 'images/img_over.gif');
createMenu('submenu3', 220, 41, 'img_3', 'images/img_out.gif', 'images/img_over.gif');
// ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
</script>
<style type="text/css">
body {
background-color: #ffffff; margin: 20px 0px 0px 20px;
}
td {
font: normal 11px arial,sans-serif; color: #5a463c;
}
table.sub td {
border-bottom: solid 1px #f6f6f0;
}
table.sub a {
font: normal 11px arial,sans-serif; color: #5a463c; text-decoration: none; display: block;
}
table.sub a:hover {
background-color: #f6f6f0;
}
</style>
</head>
<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<!-- Main Navigation -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onMouseOver="hideCur(); Menus.submenu1.show()" onMouseOut="Menus.submenu1.hide()"><img name="img_1" src="images/img_out.gif" width="100" height="20" border="0"></a></td>
<td><a href="#" onMouseOver="hideCur(); Menus.submenu2.show()" onMouseOut="Menus.submenu2.hide()"><img name="img_2" src="images/img_out.gif" width="100" height="20" border="0"></a></td>
<td><a href="#" onMouseOver="hideCur(); Menus.submenu3.show()" onMouseOut="Menus.submenu3.hide()"><img name="img_3" src="images/img_out.gif" width="100" height="20" border="0"></a></td>
</tr>
</table>
<!-- Sub Navigation -->
<!-- 1. -->
<script language="JavaScript" type="text/JavaScript">document.write(Menus.submenu1.startMenu());</script>
<table class="sub" border="0" cellspacing="0" cellpadding="5" bgcolor="#e1e1cd">
<tr><td><a href="#">Lorem ipsum dolor sit</a></td></tr>
<tr><td><a href="#">Consectetuer adipiscing</a></td></tr>
<tr><td><a href="#">Sed diam nonummy nibh</a></td></tr>
<tr><td><a href="#">Magna aliquam erat</a></td></tr>
<tr><td><a href="#">Adipiscing elit</a></td></tr>
<tr><td><a href="#">Ut wisi enim ad minim</a></td></tr>
</table>
<script language="JavaScript" type="text/JavaScript">document.write(endMenu());</script>