Avatar billede johnny_michaelsen Nybegynder
04. februar 2005 - 16:50 Der er 3 kommentarer

onClick sammen med onMouseOver

Hey eksperter

Jeg sidder og roder lidt med nogle layers, som ikke helt vil som jeg vil.

Jeg har bygget en hjemmeside med en masse layers. Og grund ideen var som følger:

Et tekstlink med onMouseOver og onMouseOut til layer1 og onClick til layer2.

Måden det gerne skulle fungere på er:

Et tekstlink med onMouseOver og onMouseOut til layer1 og onClick til layer1 og layer2.

Det vil sige, at når popup(layer2) er vist, skal mit mouseoverlayer(layer1) også være vist.

Jeg har følgende javascript til at vise og gemme mine popups:

--------------------------------------------------------------

show = 0
function vis(i){
if (show>0) gem(show)
show = i

if (document.layers)
  document.layers["image"+i].visibility='show';
else if (document.all)
  document.all["image"+i].style.visibility='visible';
else if (document.getElementById)
  document.getElementById("image"+i).style.visibility='visible';
}
function gem(i){
if (document.layers)
  document.layers["image"+i].visibility='hide';
else if (document.all)
  document.all["image"+i].style.visibility='hidden';
else if (document.getElementById)
  document.getElementById("image"+i).style.visibility='hidden';
}

----------------------------------------------------------------

Alle ideer er meget velkomne, har prøvet lidt af hvert efter hånden.

/Johnny
Avatar billede roenving Novice
05. februar 2005 - 02:09 #1
Hvordan skal du bruge det ?-)

-- men prøv f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/588022">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#minDiv11{position:absolute;top:75px;left:75px;width:100px;height:100px;display:none;background:yellow;}
#minDiv21{position:absolute;top:175px;left:175px;width:100px;height:100px;display:none;background:orange;}
#minDiv12{position:absolute;top:275px;left:275px;width:100px;height:100px;display:none;background:yellow;}
#minDiv22{position:absolute;top:375px;left:375px;width:100px;height:100px;display:none;background:orange;}
#minDiv13{position:absolute;top:475px;left:475px;width:100px;height:100px;display:none;background:yellow;}
#minDiv23{position:absolute;top:575px;left:575px;width:100px;height:100px;display:none;background:orange;}
</style>
<script language="javascript" type="text/javascript">
var actShow = null;
var actShow1 = null;
function vis(id,state,click){
  if(!click){
    if(actShow)
      actShow.style.display = 'none';
    actShow = document.getElementById(id);
    actShow.style.display = state;
    if(actShow1)
      actShow1.style.display = 'none';
  }else{
    actShow1 = document.getElementById(id);
    actShow1.style.display = 'block';
  }
/*  else if(actShow&&!click)
    actShow.style.display = 'none';
  else if(actShow1&&!click)
    actShow1.style.display = 'none';*/
  return false;
}
</script>
</head>

<body onresize onload>
<a href="#" style="text-decoration:none;" onmouseover="vis('minDiv11','block',false);" onmouseout="vis('minDiv11','none',false);" onclick="vis('minDiv21','block',true);">Link</a><br>
<a href="#" style="text-decoration:none;" onmouseover="vis('minDiv12','block',false);" onmouseout="vis('minDiv12','none',false);" onclick="vis('minDiv22','block',true);">Link</a><br>
<a href="#" style="text-decoration:none;" onmouseover="vis('minDiv13','block',false);" onmouseout="vis('minDiv13','none',false);" onclick="vis('minDiv23','block',true);">Link</a><br>

<div id="minDiv11">En div-tekst</div>
<div id="minDiv21">Den anden div</div>
<div id="minDiv12">En div-tekst</div>
<div id="minDiv22">Den anden div</div>
<div id="minDiv13">En div-tekst</div>
<div id="minDiv23">Den anden div</div>
</body>

</html>
Avatar billede johnny_michaelsen Nybegynder
07. februar 2005 - 10:11 #2
Dit eksempel virker fint.

Skal dog have de to layers til at forblive synlige ved onMouseOut, for derefter at lukke begge layers ved et klik på et "lukke-link".

Kan det lade sig at gøre??

/Johnny
Avatar billede roenving Novice
07. februar 2005 - 18:23 #3
-- alt kan lade sig gøre, hvis ikke det er umuligt, og det er dette ikke !-)

-- jeg har dog ikke mulighed for at sætte mig ind i det nu og lave et eksempel, men en kombination med dette, jeg lavede i anden anledning vil nok kunne gøre det !o]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body{font-family:verdana,arial,sans-serif;font-size:small;}
</style>

<script type="text/javascript">
var alleVist = false;
function visTekst(id){
  var divs = document.getElementsByTagName('DIV');
  var vis = (id=='')?false:document.getElementById(id).style.display != 'block' || alleVist;
  var alle = id==''&&!alleVist;
  alleVist = alle;
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('Tekst') == 0)
      divs[i].style.display = (alle)?'block':'none';
  }
  if(id!='')document.getElementById(id).style.display = (vis)?'block':'none';
  document.getElementById('Tekst0').style.display = (vis||!vis&&alleVist)?'none':'block';
 
}
</script>
<title>Vis og skjul tekst-afsnit</title>
</head>

<body>

<a href="#" onclick="visTekst('Tekst1');return false;">Tekst 1</a><br>
<a href="#" onclick="visTekst('Tekst2');return false;">Tekst 2</a><br>
<a href="#" onclick="visTekst('Tekst3');return false;">Tekst 3</a><br>
<a href="#" onclick="visTekst('Tekst4');return false;">Tekst 4</a><br>
<a href="#" onclick="visTekst('');return false;">Vis alle</a><br><br>

<div id="Tekst0" style="display:block;">
Ved at klikke på links får du forskellige dele af dokumentet at se !-)<br><br>
Det blev den lidt avancerede model, så funktionaliteten er fuldt udviklet ...<br>
Bemærk specielt, at jeg i funktionen benytter at id starter med 'Tekst', så hvis du bruger et andet navngivningsskema, skal der også ændres i funktionen !o]

</div>
<div id="Tekst1" style="display:none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.
</div>
<div id="Tekst2" style="display:none;">
Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros.
</div>
<div id="Tekst3" style="display:none;">
Nunc dolor. Nulla id purus vitae lacus interdum blandit. Donec lorem ante, rutrum eget, nonummy quis, luctus vel, eros. Quisque porttitor felis malesuada elit. Aliquam pretium purus vitae nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem. In mattis ipsum id dolor. Vivamus quis neque. Etiam vitae velit. Phasellus interdum, eros sit amet porta rutrum, mi neque ornare diam, et nonummy ipsum eros a dolor. Maecenas ut ligula. Vivamus adipiscing dignissim neque. Cras sit amet sapien.
</div>
<div id="Tekst4" style="display:none;">
Proin accumsan consequat felis. Nunc pellentesque, nisl vestibulum iaculis rhoncus, mauris enim luctus neque, quis auctor dolor sapien et massa. Donec in lorem vel pede mollis condimentum. Mauris libero. Praesent imperdiet. Nam porttitor nisl ac eros. Nulla sed metus. Duis id quam. Donec id augue. In enim ante, consectetuer in, cursus vitae, tristique sit amet, ipsum. Mauris ullamcorper porta nisl. Morbi pharetra. Proin commodo. Sed facilisis vehicula wisi. Ut malesuada. In hac habitasse platea dictumst. Vivamus auctor. Pellentesque quis massa id nunc ornare varius. Aliquam erat volutpat.
</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