nicht angemeldet
Image dynamisch mit Javascript in <a> Tag einfügen
0 0 0 
Der Martin
0
Image dynamisch mit Javascript in <a> Tag einfügen
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"> </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"> </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"> </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()}
-
Hi,
erstmal brauchst du hier nicht den ganzen Quelltext schrieben, wenn es nur um ein paar Zeilen geht und weiter hast du da auch ein paar denkfehler gemacht:
var objSlideStoppImage = document.createElement("img");
switchanchor.removeChild(switchanchor.firstChild);ist ok du erzeugst einen neuen img-Knoten im Dokument und speicherst ihn in der vorranstehenden Variable, außerdem entfernst du den alten Inhalt...
switchanchor.appendChild(document.createElement("img"));das ist doof, jetzt setzt du in switchanchor einem neuen img-Knoten, und zwar nicht den den du vorher definiert hast und der in der Variablen objSlideStoppImage steht!
switchanchor.setAttribute('src', slidestopimage);das ist der grund dafür, das du das src-Attribut in dem a-Element hast, du gibst nämlich dem anchor und nicht dem img das Attribut!
besser solltest du den Block also so schreiben:
var objSlideStoppImage = document.createElement("img"); objSlideStoppImage.setAttribute('src', slidestopimage); switchanchor.removeChild(switchanchor.firstChild); switchanchor.appendChild(objSlideStoppImage);das ganze natürlich überall da wo du diese Struktur verändert hast :)
Mfg nemoinho
-
Hallo nemoinho,
danke für die schnelle Hilfe.
Jetzt funktioniert es.Hab wieder in Sachen Javascript was dazu gelernt.
Best regards Uwanius
-
Lieber Uwanius,
Hab wieder in Sachen Javascript was dazu gelernt.
wenn Du da noch mehr dazulernen willst, dann schau mal in den kleinen Lehrgang hinein! [Lehrgang: Fader-Framework]
Der macht nämlich auch so ziemlich das, was Du benötigst.Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
Hallo,
switchanchor.setAttribute('src', slidestopimage);
das ist der grund dafür, das du das src-Attribut in dem a-Element hast, du gibst nämlich dem anchor und nicht dem img das Attribut!richtig, davon abgesehen fehlt noch das alt-Attribut für das Bild. Und anstatt setAttribute() zu bemühen, ist es meist günstiger, direkt auf die Objekteigenschaften zuzugreifen:
switchanchor.src = slidestopimage;
Das kapiert dann nämlich auch der IE zuverlässig, der mit der anderen Methode gelegentlich seine Probleme hat.
Grundsätzlich frage ich mich aber: Warum so umständlich? Warum ein Element mit viel Aufwand aus dem DOM löschen, um dann ein gleichartiges wieder einzubauen? Ich würde stattdessen dem Bild, das ich austauschen möchte, im Quellcode eine ID geben, das Bild im Javascript über diese ID auswählen und einfach seine src-Eigenschaft ändern.
HTML:
<img id="startstop" src="bild.jpg" alt="Slideshow starten/stoppen" onclick="toggle();">
JS:
function toggle()
{ // hier zunächst feststellen, ob starten oder stoppen
// ...
document.getElementById("startstop").src = neuerWert;
}Bei der Gelegenheit habe ich auch gleich den Link entsorgt. Er ist hier nicht sinnvoll, da er keine Ressource verlinkt. Ein einfacher onclick-Handler auf dem Bild ist da eher angebracht.
So long,
Martin--
Most experts agree: Any feature of a program that you can't turn off if you want to, is a bug.
Except with Microsoft, where it is just the other way round.-
Hi,
nochmal zur Ergänzung:
Ich würde stattdessen dem Bild, das ich austauschen möchte, im Quellcode eine ID geben, das Bild im Javascript über diese ID auswählen und einfach seine src-Eigenschaft ändern.
Oder noch einfacher: Im onclick-Handler gleich eine Referenz auf das Bildobjekt mitgeben. Dann brauche ich weder die ID, noch die Suche im DOM mit getElementById(). Ungefähr so:
HTML:
<img src="bild.jpg" alt="Slideshow starten/stoppen" onclick="toggle(this);">
JS:
function toggle(img)
{ // hier zunächst feststellen, ob starten oder stoppen
// ...
img.src = neuerWert;
}Ciao,
Martin--
Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.
Heißes Wasser kann man immer gebrauchen.
-
-
-
var objSlideStartImage = document.createElement("img");
hier erstellst du ein img-Objekt, das du aber nie verwendest
switchanchor.removeChild(switchanchor.firstChild);
hier entfernst du ganz richtig das 1. Kindelement des Link
switchanchor.appendChild(document.createElement("img"));
hier setzt du ein völlig neues img-Element (nicht etwa das gerade geschaffene) in den Link
switchanchor.setAttribute('src', slidestartimage);
hier weist du dem Link das Attribut src zu, statt seinem Kindelement, außerdem über setAttribute, wovon abzuraten ist