Avatar billede fætterguf Nybegynder
24. august 2000 - 20:39 Der er 5 kommentarer og
1 løsning

Pop-up layer

Jeg har snuppet dette lille script, men vil gerne tilføje lidt funktionalitet:

<style type=\"text/css\"><!--
.myStyle {
    position: absolute;
    visibility: hidden;
}
//--></style>

<span id=\"text1\" class=\"myStyle\">
<table bgcolor=\"#ffffcc\"><tr><td>
Heres<br>some<br><b>bold<br>text</b><br>in<br>a<br>layer
</td></tr></table>
</span>

<span id=\"text2\" class=\"myStyle\">
<table bgcolor=\"#ffffcc\"><tr><td>
Heres<br>some<br><i>italic<br>text</i><br>in<br>a<br>layer
</td></tr></table>
</span>

<span id=\"text3\" class=\"myStyle\">
<table bgcolor=\"#ffffcc\"><tr><td>
Heres<br>some<br><font
color=\"#ff0000\">red<br>text</font><br>in<br>a<br>layer
</td></tr></table>
</span>

<script language=\"JavaScript\"><!--
function show(object,e) {
    if (e != \'\') {
        if (document.all) {
            x = e.clientX;
            y = e.clientY;
        }
        if (document.layers) {
            x = e.pageX;
            y = e.pageY;
        }
    }

    if (document.layers && document.layers[object] != null) {
        document.layers[object].left = x;
        document.layers[object].top = y;
    }
    else if (document.all) {
        document.all[object].style.posLeft = x;
        document.all[object].style.posTop = y;
    }

    if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = \'visible\';
    else if (document.all)
        document.all[object].style.visibility = \'visible\';
}

function hide(object) {
    if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = \'hidden\';
    else if (document.all)
        document.all[object].style.visibility = \'hidden\';
}
//--></script>

<table><tr>

<td>
<a href=\"#\" onMouseOver=\"if (window.event || document.layers) show(\'text1\',event)\" onMouseOut=\"hide(\'text1\')\">Reveal layer 1</a>
</td>

<td>
<a href=\"#\" onMouseOver=\"if (window.event || document.layers) show(\'text2\',event)\" onMouseOut=\"hide(\'text2\')\">Reveal layer 2</a>
</td>

<td>
<a href=\"#\" onMouseOver=\"if (window.event || document.layers) show(\'text3\',event)\" onMouseOut=\"hide(\'text3\')\">Reveal layer 3</a>
</td>

</tr></table>


Scriptet viser et lag, når man kører musen over et link, og fjerner det igen når musen forsvinder. Hvem kan hjælpe med at lave scriptet om, så laget bliver fremme når man kører musen fra linket over på laget, og først forsvinder når musen kører væk fra laget. Lidt a\'lá en \"højrekliks-menu\"
Avatar billede olebole Juniormester
25. august 2000 - 05:27 #1
<ole>
Du løber ind i problemer med at lave mouseover / -out på lag  :o(
Hvis du til gengæld lægger dine links klods op af dine tænde/slukke-lag - så der ikke er \'luft\' imellem (brug billeder som tænde-links) - kan du lægge et lag med en klar gif nedenunder det hele. På den gif kan du så lave en mouseover, der slukker lagene.
Altså tænde lag på menupunktet og slukke på \'baggrunds\' gif\'en. Manon har vist et glimrende eksempel, du kan arbejde videre med her:
    http://www.eksperten.dk/spm/23545
Det har jeg gjort - og har lige lavet en hierakisk menu, der kan komme glidende ind fra venstre. Ikke nok med det, men den klasker HierMenues et pænt stykke op ad væggen - rent funktions mæssigt!
/Vh
</bole>
Avatar billede olebole Juniormester
25. august 2000 - 07:26 #2
Jeg fandt lige en versin af manon\'s script, jeg barberede lidt ned. Jeg har lige lagt en gul baggrundsfarve på \'slukkelaget\', så du bedre kan se, hvad der foregår:

<html>
<head>
<title>testside</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<script language=\"JavaScript\">
<!--
function MM_findObj(n, d) { //v3.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); 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 link=\"#FFFFFF\" vlink=\"#CCCCCC\" alink=\"#660000\" bgcolor=\"#FFFFFF\">
<div id=\"menu\" style=\"position:absolute; width:90; height:20; z-index:2; background-color: #006600; layer-background-color: #006600; border: 1px none #000000; left: 100; top: 100\"><font color=\"#FFFFFF\"><a href=\"#\" onMouseOver=\"MM_showHideLayers(\'menuemner\',\'\',\'show\');MM_showHideLayers(\'slukkelag\',\'\',\'show\')\">Main
  Link 1</a></font></div>
<div id=\"menuemner\" style=\"position:absolute; width:90; height:90; z-index:3; background-color: #009900; layer-background-color: #009900; border: 1px none #000000; left: 100; top: 120; visibility: hidden\">
  <font color=\"#FFFFFF\"><a href=\"#\">side1</a><br>
  <a href=\"#\">side2</a><br>
  <a href=\"#\">side3</a><br>
  <a href=\"#\">side4</a><br>
  <a href=\"#\">side5</a><br>
  <a href=\"#\">side6</a></font></div>
<p>&nbsp;</p>
<div id=\"slukkelag\" style=\"position:absolute; width:145px; height:145px; z-index:1; background-color: yellow; layer-background-color: yellow; left: 82px; top: 89px; visibility: hidden;\"><a href=\"#\" onMouseOver=\"MM_showHideLayers(\'menuemner\',\'\',\'hide\');MM_showHideLayers(\'slukkelag\',\'\',\'hide\')\"><img src=\"transperant.gif\" width=\"124\" height=\"127\" border=\"0\"></a></div>
</html>

/Vh
Avatar billede olebole Juniormester
30. august 2000 - 04:03 #3
Hva\' så Guf...kan du bruge det?
Avatar billede fætterguf Nybegynder
01. september 2000 - 15:07 #4
Næ! :o)

men det gav mig en idé, så du får point alligevel.
Avatar billede fætterguf Nybegynder
01. september 2000 - 15:09 #5
Jeg HADER Dreamweaver Javascript.....det er så pisse universelt, men fylder af helvede til,.....men idéen med et ekstra lag med en grafik er jo fin nok.
Avatar billede olebole Juniormester
01. september 2000 - 15:38 #6
Hvis du har skrevet noget mere kompakt, er det noget møj, der kun virker i den ene browser. Det er tværtimod ULTRA kompakt lige bortset fra funktionsnavnene, der kunne være kortere.
Skal det være X-browser KAN det ikke gøres mere kompakt - og du skodder vel ikke så meget som programmør, at du ikke script\'er X-browser, vel?  ;o))
/Vh
PS: Tak for points.
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