Billedeændring ved onclick
Jeg har fundet denne tree-menu http://www.dkscripts.starthotel.dk/dhtml/dhtmlSCRIPTS/14.htmsom er ganske simple og kan det jeg efterspørger, bortset fra en ting: Istedet for små kasser skal jeg bruge pile; det er ikke problemet, men pilene skal dynamiske. Når man udfolder menuen skal pile pege nedad og når menuen er rullet ind skal pilen pege til højre
Selve koden:
<html>
<script language="JavaScript">var l1 = new Image()
l1.src = "icons/l1.gif"
var l2 = new Image()
l2.src = "icons/l2.gif"
var l3 = new Image()
l3.src = "icons/l3.gif"
var Link=[
[1,1,"Home",null,"_blank"],
[2,3,"HomePage","http://www.ScriptBreaker.com","_blank"],
[2,3,"BookMark","http://www.ScriptBreaker.com","_blank"],
[2,3,"Add2 Favor","http://www.ScriptBreaker.com","_blank"],
[1,1,"Scripts",null,"_blank"],
[2,2,"JavaScript",null,"_blank"],
[3,3,"Games","http://www.ScriptBreaker.com","_blank"],
[3,3,"Navigation","http://www.ScriptBreaker.com","_blank"],
[2,3,"Asp","http://www.ScriptBreaker.com","_blank"],
[1,3,"Forum","http://www.ScriptBreaker.com","_blank"],
[1,3,"Contact","http://www.ScriptBreaker.com","_blank"]
];
var Prop=[
15, // height of the level 1 headers
15, // height of the level 2 headers
15, // height of the level 3 headers
];
</script>
<script language="JavaScript">
function create_menu(id,arr,parr){
document.write("<table><tr><td><div style='position:relative;'>");
vtop = 0;
open_div = 0
c_div = 1;
for(i=0;i<arr.length;i++) {
if(arr[i-1]) {
if(arr[i][0] < arr[i-1][0]) {document.write("</div>");open_div--;}
if((open_div != 0) && (arr[i][0] == 1)) {document.write("</div>");open_div--;
if((open_div == 1) && (arr[i][0] ==1)) document.write("</div>");
}
}
height = parr[(arr[i][1]-1)];
if(arr[i][1] == 1) img = l1.src;
else{if (arr[i][1] == 2) img = l2.src;
else img = l3.src;}
document.write("<div style='top:"+vtop+";height:"+height+"' class='level"+arr[i][0]+"'>")
document.write("<img src="+img+" border=0 hspace=3 vspace=1 ");
if(arr[i+1]) {if(arr[i][0] < arr[i+1][0]) document.write("onclick=change('"+ id +"_"+ c_div+"') style='cursor:hand'");}
document.write("><a href=\"");
if(arr[i][3] == null) document.write("java script:change('"+ id +"_"+ c_div+"')\"");
else document.write(arr[i][3] +"\" target='"+arr[i][4]+"'");
document.write(">"+arr[i][2]+"</a></div>");
vtop += height;
if(arr[i+1]) {
if(arr[i][0] < arr[i+1][0]) {document.write("<div style='display:none;' id='"+id+"_"+c_div+"'>");open_div++;c_div++;}
}
}
for(i=0;i<open_div;i++) document.write("</div></td></tr></table>");
document.write("</div>");
}
function change(id){
obj = document.getElementById(id);
if(obj.style.display == "") {
obj.style.display = "none";
}
else {
obj.style.display = "";
}
}</script>
<head>
<style>
.level1 {
font-size:10px;
margin:5px 0px 0px 0px;
}
.level1 a {
font-family:verdana;
color:#000000;
font:normal;
text-decoration:none;
}
.level2 {
font-size:10px;
margin:3px 0px 0px 10px;
}
.level2 a {
font-family:verdana;
color:blue;
text-decoration:none;
}
.level3 {
font-family:verdana;
margin:3px 0px 0px 20px;
}
.level3 a {
font-size:10px;
color:red;
text-decoration:none;
}
.level3 a:hover {
text-decoration:underline;
}
</style>
<body>
<script language="JavaScript">
create_menu('TreeMenu',Link,Prop);
</script>
</body>
</html>
Stig
