HpBk-TemplateWorld

Bilder im Gaestebuch

Bilder und Grußkarten im Gästebuch einfügen

Einleitung

Darauf haben wir alle schon so lange gewartet. Und jetzt ist es wahr geworden! o-4-n.de.tl hat ein Script entwickelt, mit dem ihr euren Besuchern die Möglichkeit geben könnt, ihren Gästebucheinträgen Bilder und Grußkarten hinzuzufügen. Das Script funktioniert einwandfrei und gibt es exklusiv hier auf TemplateWorld. Vielen Dank dafür!

Schwierigkeitsstufe: Anfänger

Das folgende Script muss in den Designeinstellungen unter "Text unter dem Design" eingefügt werden.

<script type="text/javascript">var name="G.ae.stebuch",entrys=[],tds=document.getElementsByTagName("td"),mes=document.getElementById("kommentartext"); function createImgBB(c){c=document.getElementById("o4ngbimgaddinp").value.toLowerCase();return c.indexOf("http://")!=-1?c.substr(c.length-4,4)==".jpg"||c.substr(c.length-4,4)==".gif"||c.substr(c.length-4,4)==".png"?(mes.value+="[img]"+c+"[/img]",mes.focus(),true):(alert("Falsches Bildformat! Nur: .jpg, .gif, .png"),document.getElementById("o4ngbimgaddinp").focus(),false):(alert("Falsche URL"),document.getElementById("o4ngbimgaddinp").focus(),false)} function greetingCard(c){mes.value+="[img]"+c+"[/img]";mes.focus();return false} function createTheImg(){var c,f,d,b,a,h,g=[];for(c=0;c<entrys.length;c++){h=entrys[c].childNodes;for(f=0;f<h.length;f++){a=h[f].nodeValue;if(h[f].nodeName=="IMG")d=document.createElement("img"),d.src=h[f].src,d.style.border="0",g.push(d);if(a){a.indexOf("[img]");for(a.indexOf("[/img]");a.length>0&&a.indexOf("[img]")!=-1&&a.indexOf("[/img]")!=-1; ) d=a.indexOf("[img]"),b=a.indexOf("[/img]"),d<b?d>0?(b=a.substr(0,d),b=document.createTextNode(b),g.push(b),a=a.substr(d,a.length-d)) : (d=a.substr(d+5,b-d- 5),a=a.substr(b+6,a.length-b+6),b=document.createElement("img"),b.style.border="none",b.style.margin="5px",b.style.maxWidth="300px",b.src=d,b.alt="Bild",d=document.createElement("p"),d.appendChild(b),g.push(d)):b==0?a=a.substr(b+6,a.length-6):a=a.substr(0,b)+a.substr(b+6,a.length-b-6);a.length>0&&(b=document.createTextNode(a),g.push(b))}}for(;entrys[c].childNodes.length>0;)entrys[c].removeChild(entrys[c].firstChild);for(f=0;f<g.length;f++)entrys[c].appendChild(g[f]);g=[]}} if(window.location.href.toLowerCase().indexOf(name.toLowerCase())!=-1){if(mes){var i,j=0,ntr=document.createElement("tr"),ntd1=document.createElement("td"),ntd2=document.createElement("td"),ninputtxt=document.createElement("input");ninputtxt.id="o4ngbimgaddinp";ninputtxt.placeholder="Bild URL";ninputtxt.type="text";ninputtxt.style.display="block";ninputtxt.style.width="310px";var ninputbut=document.createElement("input");ninputbut.id="o4ngbimgaddbut";ninputbut.value="Bild einfügen";ninputbut.type= "button";ninputbut.onclick=createImgBB;var ntxt=document.createTextNode("Bild einfügen:");ntd1.appendChild(ntxt);ntd2.appendChild(ninputtxt);ntd2.appendChild(ninputbut);ntr.appendChild(ntd1);ntr.appendChild(ntd2);mes.parentNode.parentNode.parentNode.insertBefore(ntr,mes.parentNode.parentNode)}else{var e=document.getElementById("o4ngkdiv");e&&e.parentNode.removeChild(e)}for(i=0;i<tds.length;i++)tds[i].width=="25%"&&tds[i].firstChild&&tds[i].firstChild.nodeValue=="Nachricht:"&&tds[i+1].width== "75%"&&i+1<tds.length&&(entrys[j]=tds[i+1],j++,i++);entrys.length>0&&createTheImg()};</script>

In der ersten Zeile findet ihr das Wort G.ae.stebuch. Dieses müsst ihr nur ändern, wenn euer Gästebuch in eurer URL anders heißt. Wenn mein Gästebuch zum Beispiel "meine-seite.de.tl/Grussbox.htm" heißt, muss ich auch Grussbox in diesen Code schreiben und nicht G.ae.stebuch. Aber bei den meisten Usern ist G.ae.stebuch eh als Standard-URL eingestellt.

Mit diesem Script können eure Besucher jetzt schon eigene Bilder in ihrem Gästebucheintrag einfügen. Es muss dazu lediglich eine Bild-URL angegeben werden. So sieht das Ganze dann aus:

Nun möchtet ihr eurem Gästebuch vielleicht noch eine Grußkartenfunktion hinzufügen? Kein Problem. Begebt euch dazu unter "Extras editieren" - "Gästebuch - Extra editieren" und fügt folgenden Code in das Feld "Text vor dem Gästebuch" ein.

<div id="o4ngkdiv">
<p>
<a href="javascript:void(0);" onclick="greetingCard(this.firstChild.src);"><img src="URL zu Grußkarte 1" alt="g1"></a>

<a href="javascript:void(0);" onclick="greetingCard(this.firstChild.src);"><img src="URL zu Grußkarte 2" alt="g2"></a>
</p>
</div>

Den HTML-Code könnt ihr weitestgehend selbst gestalten. Wichtig ist nur, dass ihr dem äußersten Element die grüne id zuweist. Andernfalls, wird das Javascript nicht ausgeführt! Am besten lasst ihr also das Braune div Element als Container.

Wenn ihr mehr als 2 Grußkarten einfügen wollt, dann kopiert einfach das Orangene.

Das Blaue müsst ihr jeweils mit der URL des entsprechenden Bildes ersetzen.

Natürlich könnt ihr das ganze auch beliebig per CSS gestalten.

Kommentare zu dieser Seite:

Kommentar von Magee( zakmageeweb.de ), 18.01.2013 um 09:54 (UTC):
I'm pretty pleased to find this website. I want to to thank you for ones time just for this fantastic read!! I definitely savored every little bit of it and i also have you saved as a favorite to check out new things in your site.

Kommentar von:	17.06.2012 um 10:30 (UTC)
dayclub Offline

Kommentar von:	10.06.2012 um 11:00 (UTC)
(gesperrter Nutzer)	KK Geht jedoch wenn ich die Seiten zurück gehe kommt ja http://www.Deineseite.deins/Gästebuch/index-1.htm u.s.w und ab daan geht es nichtmehr^^

Kommentar von:	06.06.2012 um 07:18 (UTC)
(gesperrter Nutzer)	Geht nicht^^

Kommentar von dr dre headphones( ), 20.03.2012 um 07:55 (UTC):
http://www.bebydrdre.com/new-heartbeats-by-lady-gaga-high-performance-in-ear-headphones-with-controltalk-white New Heartbeats by Lady Gaga High Performance In-Ear Headphones with ControlTalk White

Kommentar zu dieser Seite hinzufügen: