Uwanius: Image dynamisch mit Javascript in <a> Tag einfügen

Beitrag lesen

SELF-Forum

Image dynamisch mit Javascript in <a> Tag einfügen

Uwanius
– Informationen zu den Bewertungsregeln

Hallo erstmal,

ich tüfftle schon seit 2 Tagen an folgendem Problem herum.

Ich habe ein fertiges Script (slide.js) welches innerhalb eines bestimmten
<a> Tags (<a href="javascript:slideSwitch()" id="slideanchor">&nbsp;</a>, dynamisch durch document.createTextNode() einen Text ("Slideshow starten") einfügt. Nachdem der Link bzw. slideSwitch aufgerufen wird, wird der "Slideshow starten" Text durch einen anderen ("Slideshow stoppen") ausgetauscht und eine Slideshow der Bildergalerie beginnt.
Nach Klick auf "Slideshow stoppen" stoppt die Slideshow und der Text wird wieder zu "Slideshow starten".

Soweit so gut funzt auch alles:
Bilder Slideshow

Nun wollte ich anstatt des Texts ein Image bzw. zwei, per Javascript einfügen.

Das sollte eigentlich mit:
(document.createElement("img") und
setAttribute('src', VARIABLE)

funktionieren HAB ICH GEDACHT.

Aber als Ergebnis kommt heraus:

<a href="javascript:slideSwitch()" id="slideanchor" scr="http://irgendein_bild.gif"><img/></a>

Richtig wäre aber:

<a href="javascript:slideSwitch()" id="slideanchor"><img scr="http://irgendein_bild.gif"/></a>

Was habe ich falsch gemacht in den Zeilen 75 bis 93 und 103 bis 123?
(die Variablen befinden sich in den Zeilen 27 bis 33)

QUELLCODE:

/////////////////////////////////////////////////////////////////////////////  
//  
// Slideshow script for Pixlie 1.x  
//  
// (c) 2007 murki  
//  
//=d====================== Installationsanleitung ==========================  
// - Auf Nutzerseite müssen Cookies akzeptiert werden und JavaScript muss aktiviert sein  
// - Folgende Zeile (natürlich ohne führende "//") irgendwo zwischen <head> und </head> in die bildvorschau.html einfügen  
//   <script src="system/slide.js" type="text/javascript" language="JavaScript"></script> - es sollte aber unbedingt die  
//   letzte eingebundene JavScript-Datei sein.  
// - Folgende Zeile innerhalb des body platzieren, wo die Start- / Stoplinks erscheinen sollen  
//   <a href="javascript:slideSwitch()" id="slideanchor">&nbsp;</a>  
//  
//*e********************* Installation instructions ************************  
// - Client must accept cookies and JavaScript has to be enabled  
// - Insert the following line into the bildvorschau.html somewhere between <head> and </head> (without leading "//" of course):  
//   <script src="system/slide.js" type="text/javascript" language="JavaScript"></script> - it should be the last of all  
//   included JavScript files  
// - Insert the following line somewhere in the body, where the activation / deactivation links should occure again without //  
//   <a href="javascript:slideSwitch()" id="slideanchor">&nbsp;</a>  
//  
/////////////////////////////////////////////////////////////////////////////  
  
//= text des Links zum Starten der Slideshow  
//* text for link stopping sliedeshow  
var slidestoptext="Slideshow || stoppen";  
//text for link starting slideshow  
var slidestarttext="Slideshow » starten";  
//image for link stopping slideshow  
var slidestopimage = "http://www.drivescout24.de/pixlie/system/slide_stop.gif";  
//* image for link starting sliedeshow  
var slidestartimage = "http://www.drivescout24.de/pixlie/system/slide_play.gif";  
//= Zeit pro Bild in Millisekunden (1000 Millisekunden = 1 Sekunde)  
//* time in milli secs (1000msec = 1 second)  
var slidetime=5000;  
  
//= id des Vorschaubildes  
//* id of preview image  
var imageId = 'pixlie-vorschaubild';  
  
  
  
  
  
var image;  
  
//  
//= Initialisierung - Vorschaubild und Linkpositionen suchen  
//* Initialize script - find image and anchor positions, test for cookies  
//  
function initSlide()  
{  
  if (window.initImage)  
  {  
   //= PixlieFader des moonlight-Templates initialisieren  
   //* run init of pixliefader from moonlight template  
   initImage();  
  }  
  
  if (window.initLightbox)  
  {  
   //= Lightbox initialisieren (http://www.huddletogether.com/projects/lightbox2/)  
   //* initialize Lightbox (http://www.huddletogether.com/projects/lightbox2/)  
   initLightbox();  
  }  
  
  image = document.getElementById(imageId);  
  
  if (!document.cookie)  
  {  
    document.cookie="slideshow=false";  
  }  
  
  if (document.cookie)  
  {  
    switchanchor=document.getElementById("slideanchor");  
    if (document.cookie=="slideshow=true")  
    {  
 var objSlideStoppImage = document.createElement("img");  
      switchanchor.removeChild(switchanchor.firstChild);  
   switchanchor.appendChild(document.createElement("img"));  
   switchanchor.setAttribute('src', slidestopimage);  
   // bei Textlink folgender Aufruf anstatt document.createElement("img") und setAttribute('src', slidestopimage):  
   //switchanchor.appendChild(document.createTextNode(slidestoptext));  
      window.setTimeout("slideNext()",slidetime);  
    } else {  
 var objSlideStartImage = document.createElement("img");  
      switchanchor.removeChild(switchanchor.firstChild);  
      switchanchor.appendChild(document.createElement("img"));  
   switchanchor.setAttribute('src', slidestartimage);  
   // bei Textlink folgender Aufruf anstatt document.createElement("img") und setAttribute('src', slidestopimage):  
   //switchanchor.appendChild(document.createTextNode(slidestarttext));  
    }  
  }  
  
}  
  
//  
//= (de-)aktivieren der SlideShow  
//* Enables / disables slideshow  
//  
function slideSwitch()  
{  
  switchanchor=document.getElementById("slideanchor");  
  if (document.cookie=="slideshow=true")  
  {  
 var objSlideStartImage = document.createElement("img");  
    switchanchor.removeChild(switchanchor.firstChild);  
    switchanchor.appendChild(document.createElement("img"));  
 switchanchor.setAttribute('src', slidestartimage);  
 // bei Textlink folgender Aufruf anstatt document.createElement("img") und setAttribute('src', slidestopimage):  
   //switchanchor.appendChild(document.createTextNode(slidestarttext));  
    document.cookie="slideshow=false";  
  } else {  
 var objSlideStoppImage = document.createElement("img");  
    switchanchor.removeChild(switchanchor.firstChild);  
    switchanchor.appendChild(document.createElement("img"));  
 switchanchor.setAttribute('src', slidestopimage);  
 // bei Textlink folgender Aufruf anstatt document.createElement("img") und setAttribute('src', slidestopimage):  
   //switchanchor.appendChild(document.createTextNode(slidestoptext));  
    document.cookie="slideshow=true";  
    window.setTimeout("slideNext()",slidetime);  
  }  
}  
  
//  
//= Wechsel zum nächsten Bild durch simulierten Klick aufs Bild  
//* Time has elpased - jump to next by iniating a click on the preview image  
//  
function slideNext()  
{  
  if (document.cookie=="slideshow=true")  
  {  
    node=image;  
    while ((node.parentNode) && (node.nodeName!='A'))  
    {  
      if (node.nodeName!='A')  
      {  
        node=node.parentNode;  
      }  
    }  
  
    if (node.nodeName=='A')  
    {  
      if (node.href.indexOf('javascript')>-1)  
      {  
        eval(node.href);  
      } else {  
        window.location=node.href;  
      }  
    } else {  
    }  
  
  }  
}  
  
  
  
window.onload = function() {initSlide()}
Beitrag melden
–
Informationen zu den Bewertungsregeln