Puha, det blev langt... håber det går :P
Rettelser hvis menuen skal dukke op lige under billedet:
function hideshow skal erstattes med denne:
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;
if(pleft!="d"){
tmpid.style.top=xtop+ptop+"px";
tmpid.style.left=xleft+pleft+"px";
}else{
tmpid.style.top=tmpy2b+"px";
tmpid.style.left=xleft+"px";
}
tmpid.style.visibility='visible';
tmpy1=tmpid.offsetTop;
tmpx1=tmpid.offsetLeft;
tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
}
}
onmouseover skal efter rettelse se sådan ud:
onmouseover="hideshowdiv('menu1',this,0,0);"
^ for placerin ovenpå objektet der kaldte tingen frem
- (+1 / -1 eller mere istedet for første 0 rykker tingen ned / op i forhold til objektet der kaldte tingen frem)
- (+1 / -1 eller mere istedet for andet 0 rykker tingen højre / venstre i forhold til objektet der kaldte tingen frem)
onmouseover="hideshowdiv('menu1',this,'d','d');
^ for at dukke op lige under det objektet der kaldte tingen frem (i stil med dropdown menuer)
..........................................................................................
Her er forklaringen til det nye script (ovenstående rettelser er ikke med i det nedenstående)
<script type="text/javascript">
<!--
/* Kontrollerer hvilken browser det er */
/* Bruges til kontrol af positionen af musen */
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;
}
/*---------------------------------------------------------------------*/
/* Kontrol variabler til brug i scriptet */
tmpx1=0;
tmpx2=0;
tmpy1=0;
tmpx2=0;
tmpx1b=0;
tmpx2b=0;
tmpy1b=0;
tmpx2b=0;
tmpcurnode="";
/*---------------------------------------------------------------------*/
/* Funktion til placering af menuen der bliver synlig */
function hideshowdiv(tmpid,tmpcur,pleft,ptop){
/* Hvis der eksisterer en menu med det kaldte id (tmpid) køres funktionen */
if(tmpid=document.getElementById(tmpid)){
/* Hvis der har været en menu åben tidligere forsikrer vi os */
/* lige for at hvis den ikke er lukket så bliver den lukket */
if(tmpcurnode!="")tmpcurnode.style.visibility='hidden';
/* tmpcurnode bruges som holder til hvilken menu der er / eller sidst var åben */
tmpcurnode=tmpid;
/* Bruges til at fange den absolutte placering af det tag der aktiverede funktionen */
xleft=tmpcur.offsetLeft;
xtop=tmpcur.offsetTop;
tmpcur2=tmpcur;
while(tmpcur2=tmpcur2.offsetParent){
xleft=xleft+tmpcur2.offsetLeft;
xtop=xtop+tmpcur2.offsetTop;
}
/* Opbevarer den absolutte placering af det tag der aktiverede funktionen */
/* af hensyn til at kontrollere hvornår musen kommer uden til dette område */
tmpy1b=xtop;
tmpx1b=xleft;
tmpy2b=xtop+tmpcur.offsetHeight;
tmpx2b=xleft+tmpcur.offsetWidth;
/* Placerer det objekt der skal dukke frem ud for det objekt der lavede kaldet til menuen */
/* samt nogle pixel over/under til højre/venstre for afhængig af opkaldet til funktionen */
tmpid.style.top=xtop+ptop+"px";
tmpid.style.left=xleft+pleft+"px";
/* Fremviser objektet der skal vises samt opbevarer den absolutte placering af objektet */
/* af hensyn til at kontrollere hvornår musen kommer uden til dette område */
tmpid.style.visibility='visible';
tmpy1=tmpid.offsetTop;
tmpx1=tmpid.offsetLeft;
tmpy2=tmpid.offsetTop+tmpid.offsetHeight;
tmpx2=tmpid.offsetLeft+tmpid.offsetWidth;
}
}
/*---------------------------------------------------------------------*/
/* Aktiverer kontrol af musens position */
window.onload=runhidectrl;
/* Kontrollerer om musens position er uden for området til et object der */
/* vises og om musen også er uden til det object der kaldte menuen frem */
/* hvis det er tilfældet skjules det objekt der p.t. er synligt */
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";
}
}
}
/* Antal ms der skal gå mellem hver kontrol af om man er kommet uden til de */
/* nævnte områder ... jo lavere tal - desto hurtigere lukker menuen og modsat */
setTimeout("runhidectrl();",100);
}
....................................................
<img src="1.jpg" width="100" height="100" onmouseover="hideshowdiv('menu1',this,0,0);">
^ Denne vil fremvise et object med id="menu1" direkte ovenpå sig selv
<img src="1.jpg" width="100" height="100" onmouseover="hideshowdiv('menu1',this,0,50);">
^ Denne vil fremvise et object med id="menu1" 50px under sig selv
('menu1',---------------this,--------------0,-------------------------------50)
^object der skal vises, ^kontrol variabel, ^+/- antal px højre/venstre for ,^ +/- antal px under/over for
<div id="menu1" style="visibility:hidden;position:absolute;top:0px;left:0px;width:200px;">
<img src="1.jpg" width="100" height="100"><br>
</div>
^ objectet der vises/skjules behøver ikke være en div, kan være alle objekter med et id!
... objektets interne opbygning er irrelevant men style="visibility:hidden;position:absolute;top:0px;left:0px;" er vigtig ;)
