Cookies für bewegbares Bild

Florians Forum � Webmaster � Ideen f�r Skripte und sonstige Quellcodes � Cookies für bewegbares Bild

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Cookies für bewegbares Bild datum

09.11.2008 07:14

Ich hoffe, dass ist hier richtig. Ich such nämlich Hilfe zu dem Code.

Also das ist der Code (ohne Cookies):

<html>
<head>
<style type="text/css">

.drag{
position:relative;
cursor:hand;
z-index: 100;
}

</style>

<script type="text/javascript">

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()

</script>
</head>
<body>
<img src="http://files.homepagemodules.de/b144096/f20t16p17n1.gif" class="drag"><br>
</body>
</html>

Damit will ich einen Weihnachtsbaum in mein Forum einfügen. Soweit funktioniert das auch, aber der Weihnachtsbaum bleibt nicht da, wo man ihn zuletzt abgestellt hat, wenn man die Seite neu läd. Daher bräuchte ich Cookies. Kann mir das wer aushelfen?

Antworten

#2 | RE: Cookies für bewegbares Bild datum

09.11.2008 17:52 (zuletzt bearbeitet: 09.11.2008 17:57)

Luna42,
das Problem sollte gel�st sein!

Hier ist der fertige Quellcode f�r eine eigene Website:

<html>
<head>
<title>Tannenbaum</title>
<style type="text/css">
.drag{
position:absolute;
cursor:pointer;
z-index: 100;
}
</style>
<script type="text/javascript">
window.onload = function() {
MovePics();
}
function MovePics() {
var PicID = "Tannenbaum";
var CookieName = "picCoords";
var expDays = 365;
var dx = "0px";
var dy = "0px";

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown = this.drag;
document.onmouseup = function(){this.dragapproved = 0;}

// Cookie auslesen:
if (document.cookie && document.cookie.indexOf(CookieName) != -1) {
var content = document.cookie;
var content = content.substring(content.indexOf(CookieName), content.length);
var Wertstart = content.indexOf("=") + 1;
var Wertende = content.indexOf(";");
if (Wertende == -1) {
Wertende = content.length;
}
var Wert = content.substring(Wertstart, Wertende);
dx = Wert.substring(0, Wert.indexOf("|"));
dy = Wert.substring(Wert.indexOf("|")+1, Wert.length);
document.getElementById(PicID).style.left = dx;
document.getElementById(PicID).style.top = dy;
}
else {
document.getElementById(PicID).style.left = dx;
document.getElementById(PicID).style.top = dy;
}

},
drag:function(e){
var evtobj = window.event? window.event : e;
this.targetobj = window.event? event.srcElement : e.target;
if (this.targetobj.className == "drag"){
this.dragapproved = 1;
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left = 0;}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top = 0;}
this.offsetx = parseInt(this.targetobj.style.left);
this.offsety = parseInt(this.targetobj.style.top);
this.x = evtobj.clientX;
this.y = evtobj.clientY;
if (evtobj.preventDefault) {
evtobj.preventDefault();
}
document.onmousemove = dragobject.moveit;
}
},
moveit:function(e){
var evtobj=window.event? window.event : e;
if (this.dragapproved == 1){
this.targetobj.style.left = this.offsetx + evtobj.clientX - this.x + "px";
this.targetobj.style.top = this.offsety + evtobj.clientY - this.y + "px";

// Cookie setzen:
var dx = this.targetobj.style.left;
var dy = this.targetobj.style.top;
var ablauf = new Date();
var expDate = new Date( ablauf.getTime() + (1000 * 60 * 60 * 24 * expDays) );
document.cookie = CookieName+"="+this.targetobj.style.left+"|"+this.targetobj.style.top+"; path=/;expires=" + expDate.toGMTString() + ";";

return false;
}
}
}
dragobject.initialize();
}
</script>
</head>
<body>
<img src="http://files.homepagemodules.de/b144096/f20t16p17n1.gif" id="Tannenbaum" class="drag">
</body>
</html>

Um es im Forum einzubauen, muss das Template-Element Obere Leiste angepasst werden.
F�ge den Style und das Skript zwischen den Head-Tags ein:

Der Code f�r das Bild kommt zwischen die Body-Tags:

Ich habe noch kleine Ver�nderungen am Skript durchgef�hrt.
Haupts�chlich bestehen diese aus der Erg�nzung von fehlenden Semikolons.
Au�erdem musste ich dem Bild noch eine ID vergeben, um darauf zugreifen zu k�nnen.
Schlie�lich k�nnen nun auch einige eigene Anpassungen getroffen werden.

Diese Einstellungen k�nnen editiert werden:

var PicID = "Tannenbaum";
var CookieName = "picCoords";
var expDays = 365;
var dx = "0px";
var dy = "0px";

PicID: Die ID des Bildes. (im IMG-Tag vergeben)
CookieName: Der Name des zu setzenden Cookies.
expDays: Anzahl der Tage, die das Cookie aktiviert bleibt.
dx/dy: Horizontale/Vertikale Koordinaten, auf welche das Bild standardm��ig gesetzt wird, falls (noch) kein Cookie vorhanden ist.

Ich w�nsche dir noch viel Spa� beim ausprobieren und hoffe, dass ich alles ber�cksichtigt habe!

P.S.: D�rfte ich evtl. bei Bedarf das Skript mit Bild hier im Forum einbauen?

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: Cookies für bewegbares Bild datum

09.11.2008 18:00

Echt super! Klappt alles! Vielen vielen Dank! Und natürlich kannst du das Script gerne auch benutzen.

Antworten

Radioscript � � Link Button

�hnliche Themen

Antworten

Letzter Beitrag

Bilder vergrößern mit jQuery
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 9 30.06.2015 23:48
florian-zier • Zugriffe: 1307
Bilder verkleinern und Verlinken auf Vollbild
Erstellt im Forum Funktionen & Template von toggodamian 1 12.03.2014 20:35
florian-zier • Zugriffe: 521
Super Zoom für Bilder - Mit Klick
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 6 01.04.2013 17:59
Wolfgang • Zugriffe: 1720
ausblendbare Infomeldung (mittels Cookies)
Erstellt im Forum Homepage & Anderes von florian-zier 0 30.12.2011 09:54
florian-zier • Zugriffe: 579
Div durch Link mit Cookie ausblenden
Erstellt im Forum Homepage & Anderes von toggodamian 4 13.10.2011 23:32
toggodamian • Zugriffe: 906
Spoiler mit Cookies
Erstellt im Forum Funktionen & Template von Wolfgang 7 24.05.2011 16:11
florian-zier • Zugriffe: 1144
Verzögertes Laden der Startseite durch schlechten Bilder-Server
Erstellt im Forum Funktionen & Template von Wolfgang 1 24.05.2009 19:39
florian-zier • Zugriffe: 531
Bilder Upload
Erstellt im Forum Sonstiges von Emanuel 2 09.12.2008 00:05
Emanuel • Zugriffe: 635

Bitte geben Sie einen Grund f�r die Verwarnung an