Avatar billede rasmus-madsen Nybegynder
25. april 2007 - 13:46 Der er 14 kommentarer og
1 løsning

Help boks ved siden af billede.

Hej allesammen.

Har en lille haste sag her.

HAr dette billede :
<img src="help.jpg" height="20" left="20" onmouseover=java script:doShow(Layer1) onmouseout=java script:doHide(Layer1)>

Jeg vil gerne have at layet kommer og til højre for billede.
Men da det forskelligt hvor billede er, skal det være bestemt i javascript.

Layeret :
<div id="Layer1" style="position:absolute; left:101px; top:20px; width:506px; height:121px; z-index:1; visibility:hidden; font-size: 11px;">
<p><b>Hjælp :</b></p>Her skal du indtaste dit brugernavn til systemet. Brugernavnet er det
samme som det du bruger i bw (brugerwep). Er du stadig i tving kan du kontakte
administrationen.
</div>

Derfor skal vi finde en kode som bestemmer left og rigth.

Kan nogle det ?

På forhånd tak
Avatar billede mclemens Nybegynder
25. april 2007 - 14:03 #1
Hvad med denne:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>


<script type="text/javascript">
mychkvar=-1;

var IE=document.all?true:false;
if(!IE)document.captureEvents(Event.mousemove)
document.onmousemove=mousepos;
var cury=0;
var curx=0;

function mousepos(e){
if(IE){
myscrolltop=(tmenu=document.documentElement.scrollTop)? tmenu : document.body.scrollTop;
myscrollleft=(lmenu=document.documentElement.scrollLeft)? tmenu : document.body.scrollLeft;
tmpy=event.clientY+myscrolltop;
tmpx=event.clientX+myscrollleft;
}else{
tmpy=e.pageY;
tmpx=e.pageX;
myscrolltop=0;
myscrollleft=0;
}
cury=tmpy;
curx=tmpx;
}

tmpx1=0;
tmpx2=0;
tmpy1=0;
tmpx2=0;
tmpx1b=0;
tmpx2b=0;
tmpy1b=0;
tmpx2b=0;
tmpcurnode="";


function hideshowdiv(tmpid,tmpcur,pleft,ptop){
mychkvar=1;
if(tmpid=document.getElementById(tmpid)){
  if(tmpcurnode!="")tmpcurnode.style.visibility='hidden';
  tmpcurnode=tmpid;

  xleft=tmpcur.offsetLeft;
  xtop=tmpcur.offsetTop;
  tmpcur2=tmpcur;
  while(tmpcur2=tmpcur2.offsetParent){
  xleft=xleft+tmpcur2.offsetLeft;
  xtop=xtop+tmpcur2.offsetTop;
  }

  tmpy1b=xtop;
  tmpx1b=xleft;
  tmpy2b2=xtop+tmpcur.offsetHeight;
  tmpx2b=xleft+tmpcur.offsetWidth;




  if(pleft!="d"){
  tmpid.style.top=xtop+ptop+"px";
  tmpid.style.left=xleft+pleft+"px";
  }else{
  tmpid.style.top=tmpy2b2+"px";
  tmpid.style.left=xleft-tmpcur.offsetLeft+"px";
  }

  tmpid.style.visibility='visible';
  tmpy1=tmpid.offsetTop;
  tmpx1=tmpid.offsetLeft;
  tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
  tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
}
}

window.onload=runhidectrl;
function runhidectrl(){
if(tmpcurnode!=""){
  if((curx<tmpx1)||(curx>tmpx2)||(cury<tmpy1)||(cury>tmpy2)){
  if((curx<tmpx1b)||(curx>tmpx2b)||(cury<tmpy1b)||(cury>tmpy2b2)){
    tmpcurnode.style.visibility="hidden";
  }
  }if(mychkvar==0)tmpcurnode.style.visibility="hidden";
}
setTimeout("runhidectrl();",100);
}
</script>

</head><body><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" onmouseover="hideshowdiv('menu1',this,99,0)">
<div id="menu1" style="visibility:hidden;position:absolute;top:0px;left:0px;background-color:#aaa;width:200px;height:150px;"><br>
<a href="#" onclick="document.getElementById('menu1').style.visibility='hidden';">Skjul</a>
</div>
</body></html>
Avatar billede mclemens Nybegynder
25. april 2007 - 14:05 #2
( Se evt. http://www.eksperten.dk/spm/702784 og links )
Avatar billede mclemens Nybegynder
25. april 2007 - 14:36 #3
Ups. rettelse til 14:03:01
visibility bør erstattes af display
visible bør ersattes af block
hidden bør erstattes af none

... Iflg. mig selv i den anden tråd, måske
skulle jeg overveje at stole på mig selv :-/
Avatar billede rasmus-madsen Nybegynder
25. april 2007 - 18:02 #4
Det sku flot ! Takker
Svar og pointsne er dine.
Avatar billede rasmus-madsen Nybegynder
25. april 2007 - 18:05 #5
ups kan til at trykke svar..

DEt skal du :) hehe
Avatar billede mclemens Nybegynder
25. april 2007 - 18:17 #6
Velbekomme, her
er lige et svar :o)
Avatar billede jhe-ting Nybegynder
25. april 2007 - 20:25 #7
OBS!!! ::::
----------------------------------
captureEvents er obsolete - se
  http://developer.mozilla.org/en/docs/DOM:window.captureEvents
brug hellere addEventListener - se
  http://developer.mozilla.org/en/docs/DOM:element.addEventListener
og attachEvent til IE - se
  http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp
Avatar billede jhe-ting Nybegynder
25. april 2007 - 20:44 #8
PS:
Timer-rutinen 'runhidectrl' der kører 10 gange i sekundet bør erstattes med en mousemove-trigget timeout.
Avatar billede mclemens Nybegynder
25. april 2007 - 20:55 #9
jhe-ting, korrekt.

Jeg bruger også selv addEventListener og
attachEvent på min side da jeg kører xhtml.
- Scriptetjeg programmerede er fra april måned 06.
Jeg lærte ordet javascript i marts måned 06 da jeg
oprettede min profil herinde på eksperten og da den
blev lavet til html var xhtml optimering ikke nødvendig,
og da jeg ikke lige selv bruger den har jeg ikke behov
p.t. for at rette den til så den matcher med xhtml.

- Den er med andre ord lavet med 1 måned erfaring
indenfor js inden jeg fik det sidste kommentarer fra
Roenving og Olebole der gav mig lyst til at kode af
nogle nyere standarder og kompatibel med xhtml.

"Timer-rutinen 'runhidectrl' der kører 10 gange i sekundet bør erstattes med en mousemove-trigget timeout."
Korrekt ... setTimeout("runhidectrl();",100); bør slettes
og så bør runhidectrl(); skrives i toppen af function mousepos(e){
... Men det vil betyde et kald til funktionen hver eneste gang musen
bevæges 1px, hvilket vel egentlig er mere end 10 gange i sekundet.
- Nåh, jeg har ikke hvad der bruger mest resourcer, men det
afhænger jo også af hvor meget man bevæger musen ...
Avatar billede mclemens Nybegynder
25. april 2007 - 21:01 #10
jhe-ting jeg kiggede lige i din seneste herinde:
http://www.eksperten.dk/spm/772583 - overvej at bruge attachEvent
og addEventListener også, aktivering af events via attribut event
listener under xhtml er ligessom brug af .event attaching under xhtml.
Avatar billede mclemens Nybegynder
25. april 2007 - 21:23 #11
<script type="text/javascript">

mychkvar=-1;

var IE=(navigator.userAgent.toLowerCase().indexOf("msie")!=-1);

if(document.addEventListener){
  document.addEventListener("mousemove", mousepos, false);
  window.addEventListener("load", runhidectrl, false);
}
else if(document.attachEvent){
  document.attachEvent("onmousemove", mousepos);
  window.attachEvent("onload", runhidectrl);
}

var cury=curx=0;

function mousepos(e){
  if(IE){
    myscrolltop=(tmenu=document.documentElement.scrollTop)? tmenu : document.body.scrollTop;
    myscrollleft=(lmenu=document.documentElement.scrollLeft)? tmenu : document.body.scrollLeft;
    tmpy=event.clientY+myscrolltop;
    tmpx=event.clientX+myscrollleft;
  }else{
    tmpy=e.pageY;
    tmpx=e.pageX;
    myscrolltop=myscrollleft=0;
  }
  cury=tmpy;
  curx=tmpx;
}

tmpx1=tmpx2=tmpy1=tmpx2=tmpx1b=tmpx2b=tmpy1b=tmpx2b=0;
tmpcurnode="";


function hideshowdiv(tmpid,tmpcur,pleft,ptop){
  mychkvar=1;
  if(tmpid=document.getElementById(tmpid)){
    if(tmpcurnode!="")tmpcurnode.style.display='none';
    tmpcurnode=tmpid;

    xleft=tmpcur.offsetLeft;
    xtop=tmpcur.offsetTop;
    tmpcur2=tmpcur;
    while(tmpcur2=tmpcur2.offsetParent){
      xleft=xleft+tmpcur2.offsetLeft;
      xtop=xtop+tmpcur2.offsetTop;
    }

    tmpy1b=xtop;
    tmpx1b=xleft;
    tmpy2b2=xtop+tmpcur.offsetHeight;
    tmpx2b=xleft+tmpcur.offsetWidth;




    if(pleft!="d"){
      tmpid.style.top=xtop+ptop+"px";
      tmpid.style.left=xleft+pleft+"px";
    }else{
      tmpid.style.top=tmpy2b2+"px";
      tmpid.style.left=xleft-tmpcur.offsetLeft+"px";
    }

    tmpid.style.display='block';
    tmpy1=tmpid.offsetTop;
    tmpx1=tmpid.offsetLeft;
    tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
    tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
  }
  setTimeout("runhidectrl();",100);
}


function runhidectrl(){
  if(tmpcurnode!=""){
    if((curx<tmpx1)||(curx>tmpx2)||(cury<tmpy1)||(cury>tmpy2)){
      if((curx<tmpx1b)||(curx>tmpx2b)||(cury<tmpy1b)||(cury>tmpy2b2)){
        tmpcurnode.style.display="none";
      }
    }if(mychkvar==0)tmpcurnode.style.display="none";
  }
}
</script>
Avatar billede mclemens Nybegynder
25. april 2007 - 21:24 #12
(tror dog ikke Rasmus kører xhtml da img
tagget slutter med ">" istedet for " />")
Avatar billede mclemens Nybegynder
25. april 2007 - 21:28 #13
Fik rokeret lidt skævt...

<script type="text/javascript">

mychkvar=-1;

var IE=(navigator.userAgent.toLowerCase().indexOf("msie")!=-1);

if(document.addEventListener){
  document.addEventListener("mousemove", mousepos, false);
  window.addEventListener("load", runhidectrl, false);
}
else if(document.attachEvent){
  document.attachEvent("onmousemove", mousepos);
  window.attachEvent("onload", runhidectrl);
}

var cury=curx=0;

function mousepos(e){
  if(IE){
    myscrolltop=(tmenu=document.documentElement.scrollTop)? tmenu : document.body.scrollTop;
    myscrollleft=(lmenu=document.documentElement.scrollLeft)? tmenu : document.body.scrollLeft;
    tmpy=event.clientY+myscrolltop;
    tmpx=event.clientX+myscrollleft;
  }else{
    tmpy=e.pageY;
    tmpx=e.pageX;
    myscrolltop=myscrollleft=0;
  }
  cury=tmpy;
  curx=tmpx;
}

tmpx1=tmpx2=tmpy1=tmpx2=tmpx1b=tmpx2b=tmpy1b=tmpx2b=0;
tmpcurnode="";


function hideshowdiv(tmpid,tmpcur,pleft,ptop){
  mychkvar=1;
  if(tmpid=document.getElementById(tmpid)){
    if(tmpcurnode!="")tmpcurnode.style.display='none';
    tmpcurnode=tmpid;

    xleft=tmpcur.offsetLeft;
    xtop=tmpcur.offsetTop;
    tmpcur2=tmpcur;
    while(tmpcur2=tmpcur2.offsetParent){
      xleft=xleft+tmpcur2.offsetLeft;
      xtop=xtop+tmpcur2.offsetTop;
    }

    tmpy1b=xtop;
    tmpx1b=xleft;
    tmpy2b2=xtop+tmpcur.offsetHeight;
    tmpx2b=xleft+tmpcur.offsetWidth;

    if(pleft!="d"){
      tmpid.style.top=xtop+ptop+"px";
      tmpid.style.left=xleft+pleft+"px";
    }else{
      tmpid.style.top=tmpy2b2+"px";
      tmpid.style.left=xleft-tmpcur.offsetLeft+"px";
    }

    tmpid.style.display='block';
    tmpy1=tmpid.offsetTop;
    tmpx1=tmpid.offsetLeft;
    tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
    tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
  }
}


function runhidectrl(){
  if(tmpcurnode!=""){
    if((curx<tmpx1)||(curx>tmpx2)||(cury<tmpy1)||(cury>tmpy2)){
      if((curx<tmpx1b)||(curx>tmpx2b)||(cury<tmpy1b)||(cury>tmpy2b2)){
        tmpcurnode.style.display="none";
      }
    }if(mychkvar==0)tmpcurnode.style.display="none";
  }
  setTimeout("runhidectrl();",100);
}
</script>
Avatar billede mclemens Nybegynder
25. april 2007 - 21:46 #14
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>


<script type="text/javascript">

mychkvar=-1;

var IE=(navigator.userAgent.toLowerCase().indexOf("msie")!=-1);

if(document.addEventListener){
  document.addEventListener("mousemove", mousepos, false);
  window.addEventListener("load", runhidectrl, false);
  if(e=document.getElementById("skjul1"))e.addEventListener("click", function(){document.getElementById('menu1').style.display='none';}, false);
  if(e=document.getElementById("vismenu1"))e.addEventListener("mouseover", function(){hideshowdiv('menu1',document.getElementById('vismenu1'),99,0);}, false);
}
else if(document.attachEvent){
  document.attachEvent("onmousemove", mousepos);
  window.attachEvent("onload", runhidectrl);
if(e=document.getElementById("skjul1"))e.attachEvent("onclick", function(){document.getElementById('menu1').style.display='none';});
if(e=document.getElementById("vismenu1"))e.attachEvent("onmouseover", function(){hideshowdiv('menu1',document.getElementById('vismenu1'),99,0);});
}


var cury=curx=0;

function mousepos(e){
  if(IE){
    myscrolltop=(tmenu=document.documentElement.scrollTop)? tmenu : document.body.scrollTop;
    myscrollleft=(lmenu=document.documentElement.scrollLeft)? tmenu : document.body.scrollLeft;
    tmpy=event.clientY+myscrolltop;
    tmpx=event.clientX+myscrollleft;
  }else{
    tmpy=e.pageY;
    tmpx=e.pageX;
    myscrolltop=myscrollleft=0;
  }
  cury=tmpy;
  curx=tmpx;
}

tmpx1=tmpx2=tmpy1=tmpx2=tmpx1b=tmpx2b=tmpy1b=tmpx2b=0;
tmpcurnode="";


function hideshowdiv(tmpid,tmpcur,pleft,ptop){
  mychkvar=1;
  if(tmpid=document.getElementById(tmpid)){
    if(tmpcurnode!="")tmpcurnode.style.display='none';
    tmpcurnode=tmpid;

    xleft=tmpcur.offsetLeft;
    xtop=tmpcur.offsetTop;
    tmpcur2=tmpcur;
    while(tmpcur2=tmpcur2.offsetParent){
      xleft=xleft+tmpcur2.offsetLeft;
      xtop=xtop+tmpcur2.offsetTop;
    }

    tmpy1b=xtop;
    tmpx1b=xleft;
    tmpy2b2=xtop+tmpcur.offsetHeight;
    tmpx2b=xleft+tmpcur.offsetWidth;




    if(pleft!="d"){
      tmpid.style.top=xtop+ptop+"px";
      tmpid.style.left=xleft+pleft+"px";
    }else{
      tmpid.style.top=tmpy2b2+"px";
      tmpid.style.left=xleft-tmpcur.offsetLeft+"px";
    }

    tmpid.style.display='block';
    tmpy1=tmpid.offsetTop;
    tmpx1=tmpid.offsetLeft;
    tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
    tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
  }
}


function runhidectrl(x){
  if(x!=1){
    if(document.addEventListener){
      if(e=document.getElementById("skjul1"))e.addEventListener("click", function(){document.getElementById('menu1').style.display='none';}, false);
      if(e=document.getElementById("vismenu1"))e.addEventListener("mouseover", function(){hideshowdiv('menu1',document.getElementById('vismenu1'),99,0);}, false);
    }
    else if(document.attachEvent){
      if(e=document.getElementById("skjul1"))e.attachEvent("onclick", function(){document.getElementById('menu1').style.display='none';});
      if(e=document.getElementById("vismenu1"))e.attachEvent("onmouseover", function(){hideshowdiv('menu1',document.getElementById('vismenu1'),99,0);});
    }
  }
  if(tmpcurnode!=""){
    if((curx<tmpx1)||(curx>tmpx2)||(cury<tmpy1)||(cury>tmpy2)){
      if((curx<tmpx1b)||(curx>tmpx2b)||(cury<tmpy1b)||(cury>tmpy2b2)){
        tmpcurnode.style.display="none";
      }
    }if(mychkvar==0)tmpcurnode.style.display="none";
  }
  setTimeout("runhidectrl(1);",100);
}
</script>

</head><body><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" id="vismenu1">
<div id="menu1" style="display:none;position:absolute;top:0px;left:0px;background-color:#aaa;width:200px;height:150px;"><br>
<a href="#" id="skjul1">Skjul</a>
</div>
</body></html>
Avatar billede mclemens Nybegynder
25. april 2007 - 21:48 #15
(Vi skal jo heller ikke glemme event attachments i html attribut formatet)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>


<script type="text/javascript">

mychkvar=-1;

var IE=(navigator.userAgent.toLowerCase().indexOf("msie")!=-1);

if(document.addEventListener){
  document.addEventListener("mousemove", mousepos, false);
  window.addEventListener("load", runhidectrl, false);
}
else if(document.attachEvent){
  document.attachEvent("onmousemove", mousepos);
  window.attachEvent("onload", runhidectrl);
}


var cury=curx=0;

function mousepos(e){
  if(IE){
    myscrolltop=(tmenu=document.documentElement.scrollTop)? tmenu : document.body.scrollTop;
    myscrollleft=(lmenu=document.documentElement.scrollLeft)? tmenu : document.body.scrollLeft;
    tmpy=event.clientY+myscrolltop;
    tmpx=event.clientX+myscrollleft;
  }else{
    tmpy=e.pageY;
    tmpx=e.pageX;
    myscrolltop=myscrollleft=0;
  }
  cury=tmpy;
  curx=tmpx;
}

tmpx1=tmpx2=tmpy1=tmpx2=tmpx1b=tmpx2b=tmpy1b=tmpx2b=0;
tmpcurnode="";


function hideshowdiv(tmpid,tmpcur,pleft,ptop){
  mychkvar=1;
  if(tmpid=document.getElementById(tmpid)){
    if(tmpcurnode!="")tmpcurnode.style.display='none';
    tmpcurnode=tmpid;

    xleft=tmpcur.offsetLeft;
    xtop=tmpcur.offsetTop;
    tmpcur2=tmpcur;
    while(tmpcur2=tmpcur2.offsetParent){
      xleft=xleft+tmpcur2.offsetLeft;
      xtop=xtop+tmpcur2.offsetTop;
    }

    tmpy1b=xtop;
    tmpx1b=xleft;
    tmpy2b2=xtop+tmpcur.offsetHeight;
    tmpx2b=xleft+tmpcur.offsetWidth;




    if(pleft!="d"){
      tmpid.style.top=xtop+ptop+"px";
      tmpid.style.left=xleft+pleft+"px";
    }else{
      tmpid.style.top=tmpy2b2+"px";
      tmpid.style.left=xleft-tmpcur.offsetLeft+"px";
    }

    tmpid.style.display='block';
    tmpy1=tmpid.offsetTop;
    tmpx1=tmpid.offsetLeft;
    tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
    tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
  }
}


function runhidectrl(x){
  if(x!=1){
    if(document.addEventListener){
      if(e=document.getElementById("skjul1"))e.addEventListener("click", function(){document.getElementById('menu1').style.display='none';}, false);
      if(e=document.getElementById("vismenu1"))e.addEventListener("mouseover", function(){hideshowdiv('menu1',document.getElementById('vismenu1'),99,0);}, false);
    }
    else if(document.attachEvent){
      if(e=document.getElementById("skjul1"))e.attachEvent("onclick", function(){document.getElementById('menu1').style.display='none';});
      if(e=document.getElementById("vismenu1"))e.attachEvent("onmouseover", function(){hideshowdiv('menu1',document.getElementById('vismenu1'),99,0);});
    }
  }
  if(tmpcurnode!=""){
    if((curx<tmpx1)||(curx>tmpx2)||(cury<tmpy1)||(cury>tmpy2)){
      if((curx<tmpx1b)||(curx>tmpx2b)||(cury<tmpy1b)||(cury>tmpy2b2)){
        tmpcurnode.style.display="none";
      }
    }if(mychkvar==0)tmpcurnode.style.display="none";
  }
  setTimeout("runhidectrl(1);",100);
}
</script>

</head><body><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" id="vismenu1">
<div id="menu1" style="display:none;position:absolute;top:0px;left:0px;background-color:#aaa;width:200px;height:150px;"><br>
<a href="#" id="skjul1">Skjul</a>
</div>
</body></html>
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