NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

 

Layer Fenster


Hier mal 3 Beispiele von Skripten für einen “Layer”

1) ein Layer der in diesem Beispiel 10 Sekunden zu sehen ist und sich dann schließt

2) ein Layer der in diesem Beispiel mittels Klick geschlossen werden muss

3) ein Layer wie Beispiel 2) nur zentriert auf der Seite

4) ein Layer als jQuery-Skript

Seite erneut laden

 

1. Beispiel:

bitte guckt auch hier:

http://www.jswelt.de/index.php?opencat=JavaScripts&artid=1007495790

Zieht Euch ein Textfeld auf und demarkiert dieses. Dann markiert das Textfeld wieder mittels einfachem Klick und klickt im Fenster “Text-Eigenschaften” auf den Button “HTML”. Bearbeitet den Code unten mit Eurem Text und Euren Links und fügt diesen Code dann in die Objekt-HTML “vor dem Tag” (NOF 11 “vorher”) ein. Meine persönlichen Änderungen habe ich im Code unten fett markiert. Auf Eurer “Startseite” (Home) müsstet Ihr die relative Pfadangabe zum Bild nur mit einem Punkt schreiben, also ./ anstatt ../

<style type="text/css">
<!--
#sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;}
-->
</style>
<SCRIPT LANGUAGE="JavaScript1.2">

/*
DHTML Ad Box (By Matt Gabbert- tax@nolag.com, http://www.nolag.com)
*/

adTime=10;  // Hier könnt Ihr die Zeit der Anzeige (in Sekunden) ändern
chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime)

var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
adCount=0;
function initAd(){
if(!ns && !ie && !w3) return;
if(ie)adDiv=eval('document.all.sponsorAdDiv.style');
else if(ns)adDiv=eval('document.layers["sponsorAdDiv"]');
else if(w3)adDiv=eval('document.getElementById("sponsorAdDiv").style');
randAd=Math.ceil(Math.random()*chanceAd);
        if (ie||w3)
        adDiv.visibility="visible";
        else
        adDiv.visibility ="show";
if(randAd==1) showAd();
}
function showAd(){
if(adCount<adTime*10){adCount+=1;
if (ie){documentWidth  =document.body.offsetWidth/2+document.body.scrollLeft-20;
documentHeight =document.body.offsetHeight/2+document.body.scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
adDiv.left=documentWidth-200;adDiv.top =documentHeight-200;
setTimeout("showAd()",100);}else closeAd();
}
function closeAd(){
if (ie||w3)
adDiv.display="none";
else
adDiv.visibility ="hide";
}
onload=initAd;
//End-->
</script>

<div id="sponsorAdDiv" style="visibility:hidden">

<!-- **unten könnt Ihr die Größe des Fensters und Eure Farben eintragen **-->
<table width="450" height="350" bgcolor="#555174"><tr><td>
<table width="445" height="345" bgcolor="#D0C6C6"><tr><td align="center"

valign="middle">

<!--*****EDIT THIS MESSAGE*****-->

<a href="http://www.nof-schule.de/forum/" target="_blank"><img border="0" src="../assets/images/NOF-Forum.jpg" width="245" height="120"></a><br><br>
<p style="margin-bottom: 0px;"><a href="http://www.nof-forum.de/" target="_blank">hier geht es zum NOF-Forum</a></p>
<br><br><br>
Dieses Fenster schließt sich in 10 Sekunden!

<!--*****EDIT THE ABOVE MESSAGE*****-->
</td></tr></table></td></tr></table>
</div>
 

... wollt Ihr das Bild und den Text nicht verlinken, würde der untere, zu editierende, Bereich so aussehen (ein <br> erzeugt einen Zeilenumbruch):

<!--*****EDIT THIS MESSAGE*****-->

<img border="0" src="../assets/images/DeinFoto.jpg"><br><br>
<br><br><br>
Deinen Text hier hinschreiben

<!--*****EDIT THE ABOVE MESSAGE*****-->

nach oben

 

2. Beispiel: bitte guckt auch hier für den gleichen Layer als 3. Besipiel, jedoch zentriert auf der Seite
nach oben

Ihr könnt den Code unten entweder in die “Layout-HTML” (nur auf dieser Seite) oder auch in die “Master-Rahmen-HTML” (alle Seiten mit dem gleichen Master-Rahmen-Namen) einfügen.


Klickt im “Eigenschafts-Fenster” des Layouts oder des Master-Rahmens auf den Button “HTML” und fügt den Code unten am “Ende des Haupttextes” ein, den Ihr natürlich an Eure Bedürfnisse anpassen müsst. In dem dort verwendetem “Iframe-Code” verweise ich auf eine Unterseite in meinem Projekt (fett markiert), die ich mir vorher angelegt habe. Auf Eurer “Startseite” (Home) müsstet Ihr die relative Pfadangabe zur “Unterseite” nur mit einem Punkt schreiben, also ./ anstatt ../

<div id="meinContainer" style="position: absolute; top:600px; left: 600px; width:300px; height:250px; border:3px solid #687796; background-color: #687796;">
<iframe src="../html/neue-seiten.html" frameborder="0" scrolling="no" width="300" height="230"></iframe>
<a href="javascript:;" style="cursor:pointer;" onclick="document.getElementById('meinContainer').style.display='none';"><p style="text-align: center; margin-top: 3px; margin-bottom: 1px;"><span style="font-size: 10px; color: rgb(255,255,255);">Fenster schließen</span></p></a>
</div>

... diese “Unterseite” (hier “neue-seiten.html” Bild unten) habe ich auf “ZeroMargins” gestellt und die Größe genau meiner Größe (width und height) aus meinem Skript (oben) angepasst. Ebenso habe ich auf dieser Seite die von mir im Skript angegebenen Farben eingestellt.

nach oben

Viel Erfolg!

zurück

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik