Tutorial: Popup Box
1. Head bearbeiten
Geht auf eurer Jimdo Page in die Einstellungen und dort auf „Head bearbeiten“. Hier fügt ihr folgenden Code ein und speichert das ganze ab:
<script type=“text/javascript“>
//<![CDATA[
/******************************************
* Popup Box- By Jim Silver @ jimsilver47@yahoo.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for ie4+ and NS6////
/////////////////////////////////
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+“px“
crossobj.style.top=tempy+e.clientY-offsety+“px“
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById(„showimage“) : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? „html“ : document.compatMode && document.compatMode!=“BackCompat“? „documentElement“ : „body“
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!=“dragbar“){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id==“dragbar“){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function(„dragapproved=false“)
////drag drop functions end here//////
function hidebox(){
crossobj=ns6? document.getElementById(„showimage“) : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility=“hidden“
else if (ns4)
document.showimage.visibility=“hide“
}
//]]>
</script>
2. Objekt einfügen
Fügt den folgenden Code in ein neues HTML-Objekt auf eurer Seite ein. In der Sidebar, wenn das Fenster auf jeder Unterseite erscheinen soll, oder im normalen Content-Bereich, wenn die Popup-Box nur auf dieser einen Seite erscheinen soll.
<div id=“showimage“ style=“position:absolute;width:210px;left:45%;top:200px“>
<table border=“0″ width=“210″ bgcolor=“#303030″ cellspacing=“0″ cellpadding=“2″><tr><td width=“100%“><table border=“0″ width=“100%“ cellspacing=“0″ cellpadding=“0″><tr><td id=“dragbar“ style=“cursor:hand; cursor:pointer“ width=“100%“ onmousedown=“initializedrag(event)“><layer width=“100%“ onmouseover=“dragswitch=1;if (ns4) drag_dropns(showimage)“ onmouseout=“dragswitch=0″><ilayer width=“100%“ onselectstart=“return false“><font face=“Verdana“ color=“#FFFFFF“><strong><small>TITEL</small></strong></font></ilayer></layer></td><td style=“cursor:hand“><a href=“#“ style=“text-decoration:none; color: white;“ onclick=“hidebox();return false“><b>[x]</b></a></td></tr><tr><td width=“100%“ bgcolor=“#FFFFFF“ style=“padding:4px“ colspan=“2″>
INHALT
</td></tr></table></td></tr></table></div>
3. Einstellungen
width: breite der Popup-box
TITEL: Wird als Fenstertitel angezeigt
left:45%: Abstand vom linken Bildschirmrand. Soll die Box in der Mitte stehen sind Prozentangaben zwischen 40% und 50% gut.
top:200px: Ein Festwert in Pixel als Abstand von oben. Auch % möglich
INHALT: Hier fügt ihr euren HTML-Inhalt ein. Wenn ihr nur einen Text einfügen wollt, könnt ihr auch ein neues Text-Objekt auf eurer Seite erstellen, dort alles richtig formatieren, auf HTML klicken, den HTML-Code kopieren und an diese Stelle im Popup-Objekt einfügen. Oder halt einen eigenen HTML-Code schreiben.
4. Optionale Einstellungen
Ihr könnt auch noch weitere Einstellungen im Code ausprobieren, wie z.B. die Farben verändern. Wer weiß wie es geht kann einfach einmal etwas herumexperementieren.
#303030: Rahmenfarbe. Hier könnt ihr einen anderen generieren.
#FFFFFF: Farbe des Fenstertitels
#FFFFFF: Hintergrundfarbe des Fensters
Tutorial: Link zu bestimmter Seitenposition
1. Link erstellen
Erstellt ein neues HTML-Objekt und fügt folgenden Code ein:
<a href=“#linkname“> Linktext </a>
linkname: Hier könnt ihr jeder Position einen eigenen Namen geben
Linktext: Dieser Text wird angezeigt
Tipp: Wenn ihr das „linkname“ weglasst, und nur das „#“ stehen lasst, so verlinkt ihr wieder ganz noch oben zum Seitenanfang. Schritt 2 und 3 müsst ihr dann natürlich auslassen.
2. Ziel einfügen
Über der Stelle, an welche verlinkt werden soll, fügt ihr folgenden Code in ein neues HTML/Widget Modul ein:
<a name=“linkname“>
linkname ist der oben verwendete Name der Position.
Fertig.
3. Von Extern direkt zur Position verlinken:
Wen ihr den Link zu der Seitenposition direkt verschicken oder irgendwo angeben wollt, dann sieht dieser so aus:
http://url/#linkname
url: Der Link zur Seite, auf der sich das Ziel aus Schritt 2 befindet
linkname: Der Linkname von oben.
Tutorial: Werbelink
1. Grafiken hochladen
Zuerst müsst ihr eure Grafik mit dem Werbetext hochladen. Dazu sind zwei Grafiken notwendig: Eine, die standardmäßig angezeigt wird und eine, die beim Überfahren mit der Maus die erste ablöst. Dazu erstellt ihr eine Versteckte Seite auf eurer Jimdo-Page und ladet dort die Bilder hoch. Bei mir waren es dann folgende 2 Dateien:
Angezeigte Grafik: | Mouseover Grafik: | |
Größenunterschiede wie bei mir machen nichts aus, die Grafik hat dann einen „Aufpopp“-Effekt. Grundfarben und Aufbau sollten jedoch gleich/ähnlich sein.
2. Code einfügen
Jetzt müsst ihr den unten stehenden Code auf eure Page in ein Widget/HTML-Modul einfügen. Das macht ihr entweder in der Sidebar, wenn der Werbelink auf jeder Unterseite erscheinen soll, oder ganz unten auf der gewünschten Seite, falls er nur auf dieser einen Seite erscheinen soll.
<div class=“n“>
<div style=“position: fixed; bottom: 0; right: 20px;“>
<a href=“http://Link“><img src=“Bild1.jpg“ onmouseover=“this.src=’Bild2′“
onmouseout=“this.src=’Bild1′“ alt=““ /></a>
</div>
</div>
3. Folgende Sachen müsst ihr im Code anpassen:
http://Link
Die Zieladresse, hierhin wird verlinkt.
Bild1
Auf der versteckten Seite (Ansichts-Modus eurer Page): Rechtsklick auf eure Grafik, Eigenschaften und die Adresse rauskopieren. Die kommt hier rein.
Bild2
Siehe Bild1, nur dieses mal das Mouseoverbild
bottom: 0; right: 20px;
Das könnt ihr einfach so lassen oder euren Wünschen nach anpassen:
bottom: 0; ist der Abstand vom Rechten Bildschirmrand in Pixel (px) Ihr könnt „bottom“ auch durch „top“ ersetzen, dann ist der Werbelink eben oben.
right: 20px; ist der Abstand vom rechten Bildschirmrand. Wollt ihr das ganze links haben, einfach „right“ durch „left“ ersetzen.