Søg
Avatar billede kovalt Nybegynder
03. april 2006 - 22:04 Der er 39 kommentarer og
2 løsninger

visibility:hidden; ved onMouseOut på div

Hej

  Jeg har et div-eletemt som jeg gør synlig idet musen kører hen over et billedet. Dette gøres med onMouseOver på billedet.

  Jeg ville gerne om jeg kunne få div'en til at forsvinde igen når musen ikke længere er over div'en - men så vidt jeg kan se findes der ikke en onMouseOut til divs. Kan man løse denne?

Kovalt
Avatar billede razmuz_dk Nybegynder
03. april 2006 - 22:07 #1
onmouseout virker fint til divs? Proiblemet må ligge et andet sted. Test dig evt. frem med:
<div onmouseover="alert('vis')" onmouseout="alert('skjul')">test</div>
Avatar billede farving Nybegynder
03. april 2006 - 22:10 #2
Som sagt så burde der ikke være problemer med onmouseout eller over for den sagsskyld
Avatar billede mclemens Nybegynder
03. april 2006 - 22:26 #3
virker også her uden problemer... her er en kort
test med både billede og div du kan prøve...

<html><head>
<body>
<img src="1.jpg" width="100" height="100" onmouseover="document.getElementById('abc').style.visibility='visible';">

<div id="abc" style="visibility:hidden;position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:green;" onmouseout="document.getElementById('abc').style.visibility='hidden';">abc</div>
</body></html>
Avatar billede kovalt Nybegynder
03. april 2006 - 22:39 #4
det lader til at det er fordi jeg har en tabel inde i mit div som åbenbart ligger og skygger.

Hvis jeg sætter onMouseHidden på tabellen i stedet fungerer det næsten - bortset fra at den sætter visibility:hidden; når jeg krydser grænsen mellem to tr eller to td.

Har i noget medicin mod det :-)
Avatar billede mclemens Nybegynder
03. april 2006 - 23:24 #5
sådan ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html;

charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--

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){
tmpy=event.clientY;
tmpx=event.clientX;
}else{
tmpy=e.pageY;
tmpx=e.pageX;
}
cury=tmpy;
curx=tmpx;
}

tmpx1=0;
tmpx2=0;
tmpy1=0;
tmpx2=0;
tmpcurnode="";

function hideshowdiv(tmpid,tmpctrl){
if(tmpid=document.getElementById(tmpid)){
  tmpcurnode=tmpid;

  if(tmpctrl==1){
  tmpid.style.visibility='visible';

  tmpy1=tmpid.offsetTop;
  tmpx1=tmpid.offsetLeft;
  tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
  tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
  }
}
}

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

</head>


<body onclick="alert(curx);">

<img src="1.jpg" width="100" height="100" onmouseover="hideshowdiv('abc',1)">

<div id="abc"

style="visibility:hidden;position:absolute;top:0px;left:0px;background-color:green;">
Indsæt din table................................<br>Indsæt din table<br>Indsæt din

table<br>Indsæt din table<br>Indsæt din table<br>Indsæt din table<br>Indsæt din table<br>Indsæt

din table<br>Indsæt din table<br>Indsæt din table<br>Indsæt din table<br>Indsæt din

table<br>Indsæt din table<br>Indsæt din table<br>
</div>

</body></html>
Avatar billede mclemens Nybegynder
03. april 2006 - 23:25 #6
hmm, teksten blev lidt ombrudt :P
... bemærk der skal ikke noget onmouse på div'en ;)
Avatar billede mclemens Nybegynder
03. april 2006 - 23:28 #7
arg firefox :P
Avatar billede mclemens Nybegynder
03. april 2006 - 23:35 #8
ret nederste del af scriptet fra:

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

til:

window.onload=runhidectrl;
function runhidectrl(){
if(tmpcurnode!=""){
  if((curx<tmpx1)||(curx>tmpx2)||(cury<tmpy1)||(cury>tmpy2)){
  tmpcurnode.style.visibility="hidden";
  }
}
setTimeout("runhidectrl();",100);
}
//-->
</script>
Avatar billede kovalt Nybegynder
03. april 2006 - 23:38 #9
det ser super spændende ud....

er på vej i seng så jeg kigger på det i morgen... tak for svar.
Avatar billede mclemens Nybegynder
03. april 2006 - 23:45 #10
tak for svar.>
- ligger lige et ;)
... hvis det virker :P
Avatar billede roenving Novice
03. april 2006 - 23:57 #11
Tjah, du lægger vel et, du ligger vel ikke på det ?-)
Avatar billede mclemens Nybegynder
04. april 2006 - 00:03 #12
- det må jeg lige få rettet :D
Avatar billede mclemens Nybegynder
04. april 2006 - 18:31 #13
<body onclick="alert(curx);">
bør nok også være <body> :P
Avatar billede mclemens Nybegynder
04. april 2006 - 18:34 #14
hideshowdiv('abc',1) kan også forkortes til hideshowdiv('abc')
med function hideshowdiv skiftet til:

function hideshowdiv(tmpid){
if(tmpid=document.getElementById(tmpid)){
  tmpcurnode=tmpid;
  tmpid.style.visibility='visible';
  tmpy1=tmpid.offsetTop;
  tmpx1=tmpid.offsetLeft;
  tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
  tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
}
}
Avatar billede mclemens Nybegynder
04. april 2006 - 19:19 #15
var lige ved at udvide scriptet lidt...
til at kunne fungere som en dropdown menu samtidig...
ser nu der er lidt problemer med relative placeringer...
kigger på det :P
Avatar billede mclemens Nybegynder
04. april 2006 - 19:47 #16
har fundet ud af hvordan jeg løser
den skal bare løbe baglæns i dom'en...
kommer med ny udgave om lidt samt forklaring...
Avatar billede mclemens Nybegynder
04. april 2006 - 20:14 #17
sådan... forklaring kommer om en lille
½-1 time... skal lige have en lille pause :P

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

<script type="text/javascript">
<!--

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){
tmpy=event.clientY;
tmpx=event.clientX;
}else{
tmpy=e.pageY;
tmpx=e.pageX;
}
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){
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;
  tmpy2b=xtop+tmpcur.offsetHeight;
  tmpx2b=xleft+tmpcur.offsetWidth;

  tmpid.style.top=xtop+ptop+"px";
  tmpid.style.left=xleft+pleft+"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>tmpy2b)){
    tmpcurnode.style.visibility="hidden";
  }
  }
}
setTimeout("runhidectrl();",100);
}
//-->
</script>

</head>


<body onclick="alert(curx+'<'+tmpx1b);">

<div style="width:770px;margin:0px auto;position:relative;background-color:blue;">
<div style="float:left;width:200px;margin:0px auto;background-color:yellow;">
  <img src="1.jpg" width="100" height="100" onmouseover="hideshowdiv('menu1',this,0,0)">
</div>
<div style="float:left;width:200px;margin:0px auto;background-color:yellow;">
  <img src="1.jpg" width="100" height="100" onmouseover="hideshowdiv('menu2',this,0,50)">
</div>
</div>



<div id="menu1" style="visibility:hidden;position:absolute;top:0px;left:0px;background-color:green;"><br>
<img src="1.jpg" width="100" height="100">
</div>

<div id="menu2" style="visibility:hidden;position:absolute;top:0px;left:0px;background-color:green;"><br>
<img src="1.jpg" width="100" height="100">
</div>

</body></html>
Avatar billede mclemens Nybegynder
04. april 2006 - 21:00 #18
kovalt> klar til forklaring?
... der er også en rettelse til ovenstående script der gør at (hvis det f.eks. er menuer så dukker de op lige under den ting man har sat onmouseover'en på)...
Avatar billede mclemens Nybegynder
05. april 2006 - 21:17 #19
Forklaringen ligger også inde i denne tråd sammen med udvidelsen til ovenstående script... så den bruges til dropdown menuer samtidig :P
http://www.eksperten.dk/spm/700575#rid6192117
Avatar billede mclemens Nybegynder
05. april 2006 - 21:19 #20
Forklaringen ligger også inde ... = Forklaringen ligger inde ...
(der er jo ikke grund til at poste den herinde også den er jo ret lang)

... skal der bruges lidt rettelse ?
eller virker scriptet som det er ?
Avatar billede kovalt Nybegynder
06. april 2006 - 10:37 #21
det fungerer helt perfekt....

Burde jeg ikke bare kunne sætte dette:

border-color:#000000; border-width:1px;

på yderste div såfremt jeg gerne vil have en ramme på min dropdown.
Avatar billede mclemens Nybegynder
06. april 2006 - 10:43 #22
skulle der ikke være problemer i...
Avatar billede mclemens Nybegynder
06. april 2006 - 10:55 #23
poster lige det mest optimale script p.t.:
(der var åbenbart lidt problemer i scriptet tidligere :P )

onmouseover="mychvar=0;" skal sættes i evt. iframes :)
for at sørge for at menuen forsvinder og her er et par eksempler på onmouseover's

hideshowdiv('menu1',this,0,0) <- for placering lige ovenpå objektet
hideshowdiv('menu1',this,'d','d') <- for placering lige under objektet
hideshowdiv('menu1',this,100,200) <- for placering 100px mod højre og 200 pixels nede i forhold til objektet
hideshowdiv('menu1',this,-100,-200) <- for placering 100px mod venstre og 200 pixels oppe i forhold til objektet


<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>
Avatar billede kovalt Nybegynder
06. april 2006 - 11:38 #24
jeg synes dog ikke jeg kan få det med rammen til at fungere
Avatar billede mclemens Nybegynder
06. april 2006 - 11:38 #25
Burde jeg ikke bare kunne sætte dette:
border-color:#000000; border-width:1px;
på yderste div såfremt jeg gerne vil have en ramme på min dropdown.

... misforstod tror jeg... rammer skal desværre sættes på de div's der dukker op, men du kan jo sætte class="pupmenu" og i css definere:

.popmenu{border:1px solid #000000;}

(og alt andet style selvfølgeig også ;) ... hvis der er noget speciel fra menu til menu så giv dem et id hver især også og definer det der afviger fra den generalle class defineringen med id defineringer)
Avatar billede mclemens Nybegynder
06. april 2006 - 11:39 #26
hov update :P
Avatar billede kovalt Nybegynder
06. april 2006 - 11:44 #27
kunne man få div til at forsvinde igen med onClick
Avatar billede mclemens Nybegynder
06. april 2006 - 11:44 #28
jeg synes dog ikke jeg kan få det med rammen til at fungere>
- et eksempel eller ok  med forklaringen i 11:38:55
Avatar billede mclemens Nybegynder
06. april 2006 - 11:47 #29
kunne man få div til at forsvinde igen med onClick>
yes... kigger på det men først: skal den så kun åbne og lukke ved click?
- eller skal den stadig åbne ved mouseover?
Avatar billede kovalt Nybegynder
06. april 2006 - 11:47 #30
det fungerer fint med dig eksempel med rammen
Avatar billede kovalt Nybegynder
06. april 2006 - 11:48 #31
jeg har prøvet med menu1.style.visibility='hidden';

men det dutter ikke
Avatar billede mclemens Nybegynder
06. april 2006 - 11:51 #32
mener du når man klikker på et af linksene i menuen?
Avatar billede kovalt Nybegynder
06. april 2006 - 11:52 #33
jeps
Avatar billede mclemens Nybegynder
06. april 2006 - 11:54 #34
<div id="menu1" style="visibility:hidden;position:absolute;top:0px;left:0px;background-color:green;"><br>
<a href="#" onclick="this.offsetParent.style.visibility='hidden';"><img src="1.jpg" width="100" height="100"></a>
</div>
Avatar billede mclemens Nybegynder
06. april 2006 - 11:55 #35
eller: (det er ikke altid du kan bruge den anden... det kommer an på designet)

<div id="menu1" style="visibility:hidden;position:absolute;top:0px;left:0px;background-color:green;"><br>
<a href="#" onclick="document.getElementById('menu1').style.visibility='hidden';"><img src="1.jpg" width="100" height="100"></a>
</div>
Avatar billede kovalt Nybegynder
06. april 2006 - 11:56 #36
nydeligt.... 1000 tak for hjælpen
Avatar billede kovalt Nybegynder
06. april 2006 - 11:56 #37
offsetParent - hvor er dens rolle i DOM
Avatar billede mclemens Nybegynder
06. april 2006 - 12:05 #38
den snupper det object der ligger lige over det nuværende object i dette tilfælde den over a href'en
Avatar billede mclemens Nybegynder
06. april 2006 - 12:09 #39
... så hvis a href'en ligger i en under div under menu div 'en virker den første onclick med offsetParent ikke... så skal der to gange offsetParent til før den virker :/
Avatar billede mclemens Nybegynder
06. april 2006 - 12:09 #40
- takker for point :)
Avatar billede kovalt Nybegynder
06. april 2006 - 12:13 #41
og tak for hæ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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
IT-JOB

Akademikernes A-kasse

Data Engineer til Akademikernes A-kasse

DHI A/S

Senior Backend Developer

Styrelsen for Grøn Arealomlægning og Vandmiljø

Teamleder til Application Management

IT-Universitetet i København

CIO

Netcompany A/S

Microsoft Operations Engineer
Seneste spørgsmål Seneste aktivitet
I dag 09:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
I går 18:51 Pausepil på youtube i chrome Af valby i Browsere
I går 11:42 Mail med endelsen ".lat" Af ErikHg i E-mail
21/0511:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
21/0511:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
White papers
Flere white papers »