Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Cookies für bewegbares Bild
#1 Cookies für bewegbares Bild von Luna42
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?
#2 RE: Cookies für bewegbares Bild von florian-zier
09.11.2008 17:52
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>
<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:
<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>
.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>
Der Code für das Bild kommt zwischen die Body-Tags:
<img src="http://files.homepagemodules.de/b144096/f20t16p17n1.gif" id="Tannenbaum" class="drag">
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";
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?