drop down divs
Jeg er kørt fast i en rodet kode og tænkte der måtte være en mere enkelt måde at løse det på. Jeg mangler en måde at styre farven på skrifttypen når man laver en onmouseover. Pt. laver den rod i det og ændre den aktive menus skrifttype farve. Den skal bare blive ved med at være hvid. Nå men her er koden.<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>test</title>
<style type="text/css">
.masterdiv { }
.menutitle { cursor: pointer; width: 344px; height: 19px }
.submenu { width: 344px }
.bgsub1 { background-image: url(images/bgsub1.gif); background-repeat: repeat-x }
.bgsub2 { background-image: url(images/bgsub2.gif); background-repeat: repeat-x }
.deftext { color: #535353; font-size: 8pt; font-family: Verdana, Arial, Helvetica; font-weight: bold }
.overtext { color: #fff; font-size: 8pt; font-family: Verdana, Arial, Helvetica; font-weight: bold }
.subtext { color: black; font-size: 8pt; font-family: Verdana, Arial, Helvetica; font-weight: bold }
</style>
<script type="text/javascript">
var persistmenu="yes"
var persisttype="sitewide"
var outcolor=""
var overcolor="#852C25"
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById("sub"+obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("div");
var pm = document.getElementById("masterdiv").getElementsByTagName("img");
var tb = document.getElementById("masterdiv").getElementsByTagName("table");
var tbl = document.getElementById("tbl"+obj);
//var dt = document.getElementById("masterdiv").getElementsByTagName("td");
if (el.style.display != "block") {
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") {
ar[i].style.display = "none";
}
}
for (var j=0; j<pm.length; j++){
if (pm[j].id.indexOf("pm") > -1) {
pm[j].src="images/newsarrowout.gif";
}
}
for (var k=0; k<tb.length; k++){
if (tb[k].id.indexOf("tbl") > -1) {
tb[k].style.background=outcolor;
}
}
el.style.display = "block";
pm["pm"+obj].src="images/newsarrowover.gif";
tbl.style.background=overcolor;
}else{
el.style.display = "none";
pm["pm"+obj].src="images/newsarrowout.gif";
tbl.style.background=outcolor;
}
}
if (persistmenu=="yes" && document.getElementById) {
savemenustate();
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="") {
SwitchMenu(cookievalue);
}
}
}
function savemenustate() {
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid=inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener) {
window.addEventListener("load", onloadfunction, false);
} else if (window.attachEvent) {
window.attachEvent("onload", onloadfunction);
} else if (document.getElementById) {
window.onload=onloadfunction;
}
if (persistmenu=="yes" && document.getElementById) {
window.onunload=savemenustate;
}
function overLink(element,obj) {
var dtt = "dt"+obj;
if (element.style) {
element.style.background=overcolor;
document.getElementById(dtt).className="overtext";
}
}
function outLink(element,obj) {
var dtt = "dt"+obj;
if (element.style) {
element.style.background=outcolor;
document.getElementById(dtt).className="deftext";
}
}
</script>
</head>
<body bgcolor="#abb5c9">
<table width="344" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="344">
<div id="masterdiv" class="masterdiv">
<div class="menutitle" onclick="SwitchMenu('1');">
<table width="344" border="0" cellspacing="0" cellpadding="0" height="19">
<tr height="1">
<td width="344" height="1" background="images/bgdots.gif"></td>
</tr>
<tr height="18">
<td width="344" height="18" onmouseover="overLink(this,'1');" onmouseout="outLink(this,'1');">
<table width="344" border="0" cellspacing="0" cellpadding="0" height="18" id="tbl1">
<tr height="18">
<td width="4" height="18"></td>
<td width="335" height="18" class="deftext" id="dt1">test1</td>
<td valign="bottom" width="5" height="18"><img src="images/newsarrowout.gif" height="5" width="5" border="0" id="pm1" name="pm1"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="submenu" id="sub1">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
<div class="menutitle" onclick="SwitchMenu('2');">
<table width="344" border="0" cellspacing="0" cellpadding="0" height="19">
<tr height="1">
<td width="344" height="1" background="images/bgdots.gif"></td>
</tr>
<tr height="18">
<td width="344" height="18" onmouseover="overLink(this,'2');" onmouseout="outLink(this,'2');">
<table width="344" border="0" cellspacing="0" cellpadding="0" height="18" id="tbl2">
<tr height="18">
<td width="4" height="18"></td>
<td width="335" height="18" class="deftext" id="dt2">test2</td>
<td valign="bottom" width="5" height="18"><img src="images/newsarrowout.gif" height="5" width="5" border="0" id="pm2" name="pm2"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="submenu" id="sub2">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</div>
</td>
</tr>
<tr height="1">
<td width="344" height="1" background="images/bgdots.gif"></td>
</tr>
</table>
</body>
</html>
