Drop down menu med grafik

Hvorfor kan du ikke sætte images ind ?-)

har det noget med måden koden genereres på ...

et lille snip fra den færdige kode:

<TR>
<TD>
<FONT face='Verdana, Arial, Helvetica, sans-serif' size='2'>
<A href='http://www.insideout.dk/senior/aerespokaler.htm'>::Ærespokaler</A>
</FONT>
</TD>
</TR>

-- der kunne jo sagtens være et img, hvor der står ærepokaler ...

Selve menufelterne hvor linkene til siderne står, er skrevet med tekst, men jeg kan da godt lave dem om til images, hvis det gør det nemmere at lave en menu.

-- næeh, det skulle ikke spille nogen trille, men jeg må have misforstået dig !-)

-- Hvad mener du med at du ikke kan midter-justere, fordi den er i layers ?-)

Her er et eksempel (opdelt i to), hvor jeg øverst viser at man sagtens kan centrere hvadsom helst og nederst viser nogle menupunkter i layers som er flyttet ind på den plads de skal have:

<HTML>
<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<STYLE TYPE="text/css">
td {
display:block;
vertical-align: top;
}
.menuPunkt, .menuPunkt a{
text-decoration: none;
font-family: verdana,arial,sans-serif ;
color: #CCCCCC ;
font-size: 10pt ;
font-weight: bold ;
cursor:hand;
}
.menuText, .menuText a{
background-color:#66CCCC;
text-decoration: none;
font-family: verdana,arial,sans-serif ;
color: #30C ;
font-size: 10pt ;
font-weight: normal ;
cursor:hand;
}
.menuOverskrift {
font-family: verdana,arial,sans-serif ;
color: #CCCCCC ;
font-size: 14pt ;
font-weight: bold ;
font-style: italic ;
}
</STYLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function trim(txt){
return txt.replace(/^\s*(.*?)\s*$/, "$1");
}
function getI(object,elementId){
  return object.getElementById(elementId)
}
function getTs(object,tagName){
  return object.getElementsByTagName(tagName)
}
</SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function posMenu(){
    refElm = document.getElementById('minRefImg');
  for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
  divMenu = document.getElementById('menu');
  divMenu.style.left=zx;
  divMenu.style.top=zy;
  posText(zx,zy);
}
var men = 5;// Number of active menus
function posText(x,y){
  for(i=1;i<=men;i++){
    punkt=document.getElementById('menupunkt'+i);
    for(var zx=zy=0;punkt!=null;zx+=punkt.offsetLeft,zy+=punkt.offsetTop,punkt=punkt.offsetParent);
      obj=document.getElementById('menutext'+i);
    obj.style.left=zx-x+45;
    obj.style.top=zy-y+5;
  }
}
function showFrame(frm){
  par=getI(top.document,frm).parentNode;
  frms=getTs(par,"IFRAME");
  for (i=0;i<frms.length;i++){
    if (frms[i].id==frm){
      frms[i].style.display="block"
    }else{
      frms[i].style.display="none"
    }
  }
}
function showMenu(nr){
    obj=document.getElementById('menutext'+nr);
    obj.style.display="block";
}
function hideMenu(nr){
    document.getElementById('menutext'+nr).style.display='none';
}
</SCRIPT>
</HEAD>
<BODY STYLE="width:100%;height:100%;vertical-align:middle;" onload="posMenu()" onresize="posMenu()">
    <TABLE COLS="3" BORDER="0" STYLE="width:100%;height:100%">
        <TR STYLE="height:10%"><TD COLSPAN="3" ALIGN="center"><TABLE BORDER="1" WIDTH="80%" ALIGN="center"><TR ALIGN="center"><TD WIDTH="10%">10%</TD><td WIDTH="80%">80%&nbsp;</TD><TD width="10%">10%</TD></TR></TABLE></TD></TR>
        <TR STYLE="height:80%">
            <TD STYLE="width:10%;height:80%">&nbsp;</TD>
            <TD STYLE="width:80%;height:80%;border:1px solid #f00;background:#eee"><IMG ID="minRefImg" SRC="transparent.gif" HEIGHT="1" WIDTH="1"></IMG>&nbsp;</TD>
            <TD STYLE="width:10%;height:80%">&nbsp;</TD>
        </TR>
        <TR STYLE="height:10%"><TD COLSPAN="3">&nbsp;</TD></TR>
    </TABLE>
    <div ID="menu" STYLE="position:absolute;top:0;left:0;display:block;overflow:no">
    <DIV ID="menuover" CLASS="menuOverskrift" STYLE="display:block">Hvad vil du</DIV><BR><BR>
  <TABLE ONMOUSEOVER="showMenu(1);" ONMOUSEOUT="hideMenu(1);"><TR><TD>
    <DIV ID="menupunkt1" CLASS="menuPunkt" STYLE="display:block"><A HREF="java script:showFrame('Start');">Start/Instruktion</A><BR>
    <DIV ID="menutext1" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"><A HREF="java script:showFrame('Start');">&nbsp;&nbsp;Start&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A></DIV></DIV>
    </TD></TR></TABLE>
  <BR>
    <TABLE ONMOUSEOVER="showMenu(2);" ONMOUSEOUT="hideMenu(2);"><TR><TD>
    <DIV ID="menupunkt2" CLASS="menuPunkt" STYLE="display:block">Indtastning m.v.<BR><BR>
    <DIV ID="menutext2" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"><A HREF="java script:showFrame('Init');">&nbsp;&nbsp;Start&nbsp;ny&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A><BR><A HREF="java script:showFrame('Players');">&nbsp;&nbsp;Spillere&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A></DIV></DIV>
    </TD></TR></TABLE>
    <TABLE ONMOUSEOVER="showMenu(3);" ONMOUSEOUT="hideMenu(3);"><TR><TD>
    <DIV ID="menupunkt3" CLASS="menuPunkt" STYLE="display:block">Menu 3    <BR><BR>
    <DIV ID="menutext3" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>
    <TABLE ONMOUSEOVER="showMenu(4);" ONMOUSEOUT="hideMenu(4);"><TR><TD>
    <DIV ID="menupunkt4" CLASS="menuPunkt" STYLE="display:block">Menu 4    <BR><BR>
    <DIV ID="menutext4" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>
    <TABLE ONMOUSEOVER="showMenu(5);" ONMOUSEOUT="hideMenu(5);"><TR><TD>
    <DIV ID="menupunkt5" CLASS="menuPunkt" STYLE="display:block">Menu 5    <BR><BR>
    <DIV ID="menutext5" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;">&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;menutext5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR></DIV></DIV>
    </TD></TR></TABLE>
</div>
</BODY>
</HTML>

Jeg gad ikke lige bygge det alt sammen om, så menuen fik lov til at blive i midterfeltet, fordi den er lodret og ikke vandret ...

Jeg har sådan set fundet ud af at midterjustere menupunkterne der er i layer vha. en extension som gør at et layer kan knyttes til et billed som i dette tilfælde er menupunktets overskrift.
Men kan du så sige mig hvordan jeg gør sådan layeret gradvis bliver mere synligt. Det starter altså med at være usynligt og bliver så mere synligt når man bevæger musen over layeret

Så får vi nok brug for et billede, for selve div'en kan man ikke fade in, men et forgrundsobjekt som tekst eller billede kan fades ind og ud (IE only):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Opacity</title>
<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC = new Object();
function startOpChange(elm,end,tim){
  if (!document.all)return;
  clearInterval(endOpC[0]);
  actOp=elm.filters.alpha.opacity;
  if (actOp!=end){
    OpC[0]=actOp;
    OpC[1]=end;
    OpC[2]=(actOp<end)?1:-1;
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
    endOpC[0]=setInterval("opChange("+elm.sourceIndex+")",delayTime);
  }
}
function opChange(elm){
  OpC[0]+=OpC[2];
  document.all[elm].filters.alpha.opacity=OpC[0];
  if (OpC[0]==OpC[1]){
    clearInterval(endOpC[0]);
    return;
  }
}
</script> 
</head>
<body>
<form>
<img src="../billede.jpg" name="fisk" style="filter:alpha(opacity=60);"
onMouseOver="startOpChange(this,100,1);"
onMouseOut="startOpChange(this,60,1);">
</form>
</body>
</html>

Men kan man ikke få billederne til at fade in når jeg holder musen over et andet billede??

Tjoh, men så hiver vi noget af det generelle ud af scriptet, men sådan noget som:

<body ... onload="var imgs = new Array();imgs[0]=fisk2;imgs[1]=fisk3;imgs[2]=fisk4;imgs[3]=fisk5;">

og så en anelse omskrivning af:

function opChange(elm){
  OpC[0]+=OpC[2];
  document.all[elm].filters.alpha.opacity=OpC[0];
  for(i=0;i<4;i++)imgs[i].filters.alpha.opacity=OpC[0];
  if (OpC[0]==OpC[1]){
    clearInterval(endOpC[0]);
    return;
  }
}

Lukker og slukker

-- og tak for hjælpen !-)