Bild als Link in Javascript

[simon]

Hi,
kann mit vielleicht jemand sagen wie ich bei dieser Funktion dem delete Link (bei dem jetzt "kick" steht ein Bild zuweisen kann? Ich such jetzt sicher schon seit einer Stunde aber ich bekomms einfach nicht hin.

function addli(){  
var bereich=document.getElementById('emails');  
var lnks=bereich.getElementsByTagName('a');  
var nr=lnks[lnks.length-1].innerHTML.split(' ')[1];  
var li=document.createElement('li');  
var input=document.createElement('input');  
li.appendChild(input);  
var lnk=document.createElement('a');  
lnk.href='#';  
lnk.appendChild(document.createTextNode('kick '+(Number(nr)+1)));  
lnk.onclick=function(){killli(this);return false;};  
li.appendChild(document.createTextNode(' '));  
li.appendChild(lnk);  
bereich.appendChild(li);  
} 

MfG
Simon

[Edgar Ehritt]

Hallo Simon,

function addli(){
var bereich=document.getElementById('emails');
var lnks=bereich.getElementsByTagName('a');
var nr=lnks[lnks.length-1].innerHTML.split(' ')[1];
var li=document.createElement('li');
var input=document.createElement('input');

var img=new Image(/* länge, breite */);
   img.src='/pfad/zum/bild.jpg'

li.appendChild(input);
var lnk=document.createElement('a');
lnk.href='#';
lnk.appendChild(document.createTextNode('kick '+(Number(nr)+1)));

lnk.appendChild(img);

lnk.onclick=function(){killli(this);return false;};
li.appendChild(document.createTextNode(' '));
li.appendChild(lnk);
bereich.appendChild(li);
}

vgl.: http://de.selfhtml.org/javascript/objekte/images.htm#src

Gruß aus Berlin!
eddi

[Simon]

Perfekt danke.
eine kleine Frage hätte ich da noch. Kann ich auch eine Maximale Anzahl Inputs festlegen. Dass heißt dass mann mit dieser Funktion nur 5 Inputs mehr anzeigen kann?

Hier noch mal die Funktion:

function addli(){  
var bereich=document.getElementById('emails');  
var lnks=bereich.getElementsByTagName('a');  
var nr=lnks[lnks.length-1].innerHTML.split(' ')[1];  
var li=document.createElement('li');  
var input=document.createElement('input');  
var img=new Image(22, 22);  
   img.src='../img/cancel_48.png'  
   img.setAttribute("class","add_email");  
li.appendChild(input);  
var lnk=document.createElement('a');  
lnk.href='#';  
lnk.appendChild(img);  
lnk.onclick=function(){killli(this);return false;};  
li.appendChild(document.createTextNode(''));  
li.appendChild(lnk);  
bereich.appendChild(li);  
}

[Edgar Ehritt]

Kann ich auch eine Maximale Anzahl Inputs festlegen.

Ja:

var zaehler=0  
  
fuction addli(){  
   zaehler++;  
   if(zaehler>4){  
       return false;  
   }  
   /* weitere Verarbeitung */  
}

Gruß aus Berlin!
eddi

[Simon]

var zaehler=0

fuction addli(){
   zaehler++;
   if(zaehler>4){
       return false;
   }
   /* weitere Verarbeitung */
}

  
Danke, funktioniert ansich perfekt, aber nur beim ersten mal.  
Wenn ich aber zu oft auf den "hinzufügen" Button klicke macht es Probleme.  
Ich hab mir gedacht bei der "entfernen" Funktion einfach "zaehler--" zu machen nur haut das irgendwie nicht so hin.  
  
Hier mal wie ichs gemacht habe:  
~~~javascript
var zaehler=0  
function addli(){  
zaehler++;  
   if(zaehler>4){  
       return false;  
   }  
var bereich=document.getElementById('emails');  
var lnks=bereich.getElementsByTagName('a');  
var nr=lnks[lnks.length-1].innerHTML.split(' ')[1];  
var li=document.createElement('li');  
var input=document.createElement('input');  
var img=new Image(22, 22);  
   img.src='../img/cancel_48.png'  
   img.setAttribute("class","add_email");  
li.appendChild(input);  
var lnk=document.createElement('a');  
lnk.href='#';  
lnk.appendChild(img);  
lnk.onclick=function(){killli(this);return false;};  
li.appendChild(document.createTextNode(''));  
li.appendChild(lnk);  
bereich.appendChild(li);  
document.write(zahler);  
}  
  
function killli(lnk){  
zaehler--;  
lnk.parentNode.parentNode.removeChild(lnk.parentNode);  
}

lg SImon

[ChrisB]

Hi,

Danke, funktioniert ansich perfekt, aber nur beim ersten mal.
Wenn ich aber zu oft auf den "hinzufügen" Button klicke macht es Probleme.

Dann beschreibe diese Probleme bitte.

Dein "haut nicht hin" ist analog zu "funzt nich", und damit wertlos.

MfG ChrisB

[Simon]

Hab das Problem bereits gelöst.
Hier mal das Endresultat:

var zaehler=0  
function addli(){  
   if(zaehler>2){  
       return false;  
   }  
   zaehler++;  
var bereich=document.getElementById('emails');  
var lnks=bereich.getElementsByTagName('a');  
var nr=lnks[lnks.length-1].innerHTML.split(' ')[1];  
var li=document.createElement('li');  
var input=document.createElement('input');  
var img=new Image(22, 22);  
   img.src='../img/cancel_48.png'  
   img.setAttribute("class","add_email");  
li.appendChild(input);  
var lnk=document.createElement('a');  
lnk.href='#';  
lnk.appendChild(img);  
lnk.onclick=function(){killli(this);return false;};  
li.appendChild(document.createTextNode(''));  
li.appendChild(lnk);  
bereich.appendChild(li);  
}  
  
function killli(lnk){  
zaehler--;  
lnk.parentNode.parentNode.removeChild(lnk.parentNode);  
} 

LG Simon

[ChrisB]

Hi,

var img=new Image(/* länge, breite */);
   img.src='/pfad/zum/bild.jpg'

lnk.appendChild(img);

Würde mich doch stark wundern, wenn das funktionieren sollte.

Du hast ein Image-Objekt in JavaScript erstellt - das ist aber nicht gleichwertig mit einem HTML IMG-Objekt. Das würde man mittels document.createElement("img") erzeugen.

MfG ChrisB

[molily]

var img=new Image(/* länge, breite */);
   lnk.appendChild(img);

Würde mich doch stark wundern, wenn das funktionieren sollte.

Tuts aber in allen aktuellen Browsern.

das ist aber nicht gleichwertig mit einem HTML IMG-Objekt

In dieser Hinsicht schon. Die Browser behandeln HTMLImageElement aus dem HTML-DOM und Image aus Netscape JS (DOM 0) in vieler Hinsicht gleich.

Mathias

[Edgar Ehritt]

Hallo ChrisB,

Du hast ein Image-Objekt in JavaScript erstellt - das ist aber nicht gleichwertig mit einem HTML IMG-Objekt. Das würde man mittels document.createElement("img") erzeugen.

dass es je nach Implementierung (Konqueror und IE 6 behandeln die beiden Objekte unterschiedlich) keine Gleichwertigkeit gibt, behindert die Funktionalität nicht:

<html>  
    <head>  
        <script type="text/javascript">
~~~~~~javascript
  
		function imglist(){  
			var img1=new Image();  
			var img2=document.createElement('img');  
			var tab =document.getElementsByTagName('tbody')[1];  
			var tr  ={};  
			var td  ={};  
			var t   ={};  
  
			for(var i in img1){  
				tr=document.createElement('tr');  
				td=document.createElement('td');  
				td.appendChild(document.createTextNode(i));  
				tr.appendChild(td);  
				td=document.createElement('td');  
				td.appendChild(document.createTextNode(img1[i]));  
				tr.appendChild(td);  
				tab.appendChild(tr);  
			}  
			tab=document.getElementsByTagName('tbody')[2];  
			for(var i in img2){  
				tr=document.createElement('tr');  
				td=document.createElement('td');  
				td.appendChild(document.createTextNode(i));  
				tr.appendChild(td);  
				td=document.createElement('td');  
				td.appendChild(document.createTextNode(img1[i]));  
				tr.appendChild(td);  
				tab.appendChild(tr);  
			}  
		}

~~~html </script>
    </head>
    <body onload="imglist()">
<table>
<tr>
<td><table border="1"><tr><th colspan="2">new Image();</th></tr></table></td>
<td><table border="1"><tr><th colspan="2">document.createElement('img');</th></tr></table></td>
</tr>
</table>
    </body>
</html>

  
  
Gruß aus Berlin!  
eddi  

-- 
“Um etwas zu erschaffen mit gutem Erfolg, muß man aufhören das zu sein, was man ist; um ganz das zu werden, was man hervorbringen will.”