Home » Jimdo Tutorials » Jimdo Tutorial Skripts-verschiedenes

Jimdo Tutorial Skripts-verschiedenes

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.