Avatar billede jtc Nybegynder
01. juli 2003 - 15:23 Der er 8 kommentarer og
1 løsning

Drop down menu med grafik

Hej er der nogen der kan lave mig en dropdownmenu ala den menu jeg har på www.insideout.dk ?
Problemet med denne menu er bare at jeg ikke kan midter justere den, da den arbejder med layers.
Kan nogen hjælpe???
Avatar billede roenving Novice
01. juli 2003 - 18:05 #1
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 ...
Avatar billede jtc Nybegynder
02. juli 2003 - 14:46 #2
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.
Avatar billede roenving Novice
02. juli 2003 - 15:12 #3
-- 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 ...
Avatar billede jtc Nybegynder
02. juli 2003 - 15:53 #4
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
Avatar billede roenving Novice
02. juli 2003 - 16:33 #5
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>
Avatar billede jtc Nybegynder
02. juli 2003 - 16:42 #6
Men kan man ikke få billederne til at fade in når jeg holder musen over et andet billede??
Avatar billede roenving Novice
02. juli 2003 - 16:59 #7
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;
  }
}
Avatar billede jtc Nybegynder
12. juli 2003 - 19:41 #8
Lukker og slukker
Avatar billede roenving Novice
13. juli 2003 - 01:06 #9
-- og tak for hjælpen !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester