Layer/instruktionspopop eller lign!

http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

Hvad med den her??

Den er let at bruge og virker i alle browsere...

http://www.bosrup.com/web/overlib/

Rt eks.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<script language=\"JavaScript\">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body bgcolor=\"#FFFFFF\" text=\"#000000\" onMouseOver=\"MM_openBrWindow(\'test.htm\',\'\',\'width=100,height=100\')\">
Med musen over &gt; Popup vindue
</body>
</html>

Når musen kommer over teksten, popper der et nyt vindue op med indholdet af index.htm i størrelsen 100x100 pixels

//Beach

Og endnu et eks. men denne gang med layers:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<script language=\"JavaScript\">
<!--


function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body bgcolor=\"#FFFFFF\" text=\"#000000\" onMouseOver=\"MM_openBrWindow(\'test.htm\',\'\',\'width=100,height=100\')\">
<div id=\"Layer1\" style=\"position:absolute; left:28px; top:142px; width:226px; height:79px; z-index:1; visibility: hidden\">S&aring;dan
  bruger du dette site</div>
<p>Show layer kan ogs&aring; bruges</p>
</body>
</html>

//Beach

på http://www.kubus.org under netværksfordele kommer der nogle gule layers frem, det er sådan nogle jeg mener!

Beach - der bliver ved med at komme nye frem når jeg følger dit eksempel!

<ole>
Hvor kommer de gule layers frem....?!?!?!
/mvh
</bole>

Ole det er simple show/hide layers i venstre side.

Klik på netværksfordele og køre musen over linksene

Tilføj lige så mange du lyster :-)

<html>
<head>
    <title>Untitled</title>     
<script language=\"javascript\">   
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

function over(id){
if (ns4){
document.layers[id].visibility = \"show\"
}else if (ns6) {
document.getElementById(id).style.visibility = \"visible\";
} else if (ie5) {
document.getElementById(id).style.visibility = \"visible\";
}else if (ie4) {
document.all[id].style.visibility = \"visible\";
    } 
}

function ud(id){
if (ns4){
document.layers[id].visibility = \"hide\"
}else if (ns6) {
document.getElementById(id).style.visibility = \"hidden\";
} else if (ie5) {
document.getElementById(id).style.visibility = \"hidden\";
}else if (ie4) {
document.all[id].style.visibility = \"hidden\";
    } 
}

</script>
</head>

<body>
<a href=\"#\" onMouseover=\"over(\'lag\')\" onMouseout=\"ud(\'lag\')\">kuk</a>

<div id=\"lag\" name=\"lag\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

</body>
</html>

nikolajdu - hvordan kan man selv lave sådan nogle?

Den her er godt nok dreamweaver, men den virker:-)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<script language=\"JavaScript\">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName==\"Netscape\")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(\"?\"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v==\'show\')?\'visible\':(v=\'hide\')?\'hidden\':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor=\"#FFFFFF\" text=\"#000000\">
<div id=\"link1\" style=\"position:absolute; left:231px; top:29px; width:25px; height:29px; z-index:1; background-color: #333333; layer-background-color: #333333; border: 1px none #000000; visibility: hidden\"></div>
<div id=\"link2\" style=\"position:absolute; left:233px; top:86px; width:30px; height:24px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; visibility: hidden\"></div>
<div id=\"link3\" style=\"position:absolute; left:229px; top:133px; width:27px; height:27px; z-index:3; background-color: #99CC33; layer-background-color: #99CC33; border: 1px none #000000; visibility: hidden\"></div>
<p><a href=\"#\" onMouseOver=\"MM_showHideLayers(\'link1\',\'\',\'show\')\" onMouseOut=\"MM_showHideLayers(\'link1\',\'\',\'hide\')\">Link
  1</a></p>
<p><a href=\"#\" onMouseOver=\"MM_showHideLayers(\'link2\',\'\',\'show\')\" onMouseOut=\"MM_showHideLayers(\'link2\',\'\',\'hide\')\">Link
  2</a></p>
<p><a href=\"#\" onMouseOver=\"MM_showHideLayers(\'link3\',\'\',\'show\')\" onMouseOut=\"MM_showHideLayers(\'link3\',\'\',\'hide\')\">Link
  3</a></p>
<p>&nbsp;</p>
</body>
</html>

ok!

<a href=\"#\" onMouseover=\"over(\'lag\')\" onMouseout=\"ud(\'lag\')\">kuk</a>
Du skifter bare name ud så de er ens begge steder:

<div id=\"lag\" name=\"lag\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

og så en mere

<a href=\"#\" onMouseover=\"over(\'lag2\')\" onMouseout=\"ud(\'lag\')\">kuk</a>

<div id=\"lag2\" name=\"lag\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

Og så virker det crossbrowser :-)

Skal selvfølgelig lige også rettes... :-)


<a href=\"#\" onMouseover=\"over(\'lag2\')\" onMouseout=\"ud(\'lag\')\">kuk</a>

<div id=\"lag2\" name=\"lag\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

Fejl igen glemte den sidste. bahh-....

<a href=\"#\" onMouseover=\"over(\'lag2\')\" onMouseout=\"ud(\'lag\')\">kuk</a>

<div id=\"lag2\" name=\"lag2\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

Nejda....

<a href=\"#\" onMouseover=\"over(\'lag2\')\" onMouseout=\"ud(\'lag2\')\">kuk</a>

<div id=\"lag2\" name=\"lag\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

Hvad sker der???

Anyway 4 alle steder hvor der står \"lag\" skal være ens

lag1
lag2
lag3

skal \"ud(\'lag\')\" være det samme i alle sammen og så skal onMouseover=\"over(\'lag2\')\" skiftes ud hver gang man vil have et nyt lag?

Hvordan får jeg det til at hoppe ud af min menu, sådan så man kan se laget i andre frames end det hvor linket er?

ok forstår nu! med lag, lag1 ...

Hvordan får jeg det til at hoppe ud af min menu, sådan så man kan se laget i andre frames end det hvor linket er?

Og hvordan giver jeg den en baggrundsfarve? er det i div?

Læg den her i den frame hvor det skal vises:

<div id=\"lag2\" name=\"lag\" style=\"position: absolute; left:50; top:50; width: 200; height:100; z-index: 3; visibility: hidden\">Denne tekst vises n&aring;r der klikkes</div>

Og så skal scriptet ændres til:

function over(id){
if (ns4){
parent.HOVED_RAMME_NAVN.document.layers[id].visibility = \"show\"
}else if (ns6) {
parent.HOVED_RAMME_NAVN.document.getElementById(id).style.visibility = \"visible\";
} else if (ie5) {
parent.HOVED_RAMME_NAVN.document.getElementById(id).style.visibility = \"visible\";
}else if (ie4) {
parent.HOVED_RAMME_NAVN.document.all[id].style.visibility = \"visible\";
    } 
}

Byt så \"HOVED_RAMME_NAVN\" ud med navnet på netop din ramme.

OK, nu har jeg fået baggrundsfarve - hvad hedder borderkommandoen i style - jeg syntes ikke det virker nr jeg skriver border: 1px;

I IE4+: background-color:#ff0000;
I NS4.x: layer-background-color:#ff0000;

Skriv dem begge.

Kan man overhovedet lave border på layers?

Du kan smide en tabel ind i layeret og give den en border.

jeg syntes ikke rigtig det virker når jeg ligger det i en anden ramme!

Kan du smide et link??

Hvis du vil nøjes med den helt simple, kan du benytte den teknik, som Eksperten.dk bruger på oversigtssider (og i kolonnen med seneste spørgsmål:

<A ... title=\"Tryk her for at komme videre\">

Det genererer et ToolTip (en gul boks, medmindre brugeren har lavet om på sin Windows-opsætning på lige dette punkt).

hth
jes

nikolajdu - tusind tak for hjælpen, jeg prøver lige at rode med det selv!

oki doki :-)