ugrás a tartalomhoz

innerHtml-lel img hozzáadás

dardos · 2008. Jún. 6. (P), 19.12
Hi!

Ilyesmit szeretnék innerHtml-lel, vagyis külső linkkel a táblázat egyik cellájába betenni egy képet onclick-re, de nem működik. tudna valaki segíteni?

<a href="#" onclick="dokument.getElementById('keret').innerHtml = '<img src=nyito.jpg>'"><img src=kisnyito.jpg></a>
<br><br>
<table width=50% height=50% border=1><tr><td id="keret" align=center valign=center></td></tr></table>
‹ jQuery harmonika keszitese CSS - háttér linkelés ›
 ■
1

valid

Drawain · 2008. Jún. 6. (P), 20.00
Először is legyen valid a html, mert iszonyatosan néz ki...
(img tagek lezáratlanul; align, valign =center helyett ="center", ugyanez a width, height-nél; valign legyen middle center helyett, ha már nem css-t akarsz használni, stb, stb...)

Másodszor a dokument.getElementById('keret')-ben a dokument legyen document és akkor lassan visszatérhetünk a problémára. Ja és legyél szíves a kódformázót használni...
2

nem innerHtml

Csorba Norbert · 2008. Jún. 6. (P), 20.17
Talán egy kicsit szebb megoldás, ha létrehozol egy új img elemet JavaScript-el, melynek beállítod az src attribútumát és ezt hozzáfűzöd az adott azonosítójú DOM csomóponthoz.

Függvény pl.:

<script type="text/javascript">
function beillesztes() {
	var kep = document.createElement('img'); 
	kep.setAttribute('src', 'nyito.jpg');
	document.getElementById('keret').appendChild(kep);
}
</script>
HTML:

<a href="#" onclick="beillesztes()">Klikk</a>
3

köszi

dardos · 2008. Jún. 6. (P), 20.26
Ez fantasztikusan működik. Köszönöm a kioktatást, és a megoldást! Mindkettőnek nagy hasznát veszem.
4

kiegészítés

dardos · 2008. Jún. 7. (Szo), 00.35
És azt hogyan kell az elejére beszúrni, hogy ha már van valamilyen .jpg a 'keret'-ben, akkor azt törölje ki, és csak utána tegye be az újat, ha meg üres, akkor menjen a beszúrás?
5

childNodes

Csorba Norbert · 2008. Jún. 7. (Szo), 05.15
ha már van valamilyen .jpg a 'keret'-ben

Nem a jpg van a 'keret'-ben, hanem az img elem és annak egy tulajdonságának van csak beállítva a jpg.
Ha a 'keret'-ben biztosan csak egy kép lehet, akkor lekérdezed, hogy a 'keret'-nek van-e gyereke és attól függően módosítod az src attribútumot, vagy ha nincs gyereke, akkor hozzáfűzöl egy img elemet. De az is lehet egy módja, ha más is szerepelhet gyerekként, hogy removeChild()-al eltávolítod a gyerek csomópontot, bármi is az és utánna szúrod be az img-t.

function beillesztes() {
	var keret = document.getElementById('keret');
		
	if (keret.childNodes.length && keret.childNodes[0].tagName.toLowerCase() == 'img') {
		keret.childNodes[0].setAttribute('src', 'nyito.jpg');
	} else {
		var kep = document.createElement('img');
		kep.setAttribute('src', 'nyito.jpg');
		keret.appendChild(kep);
	}
}
Egy kis tanulni való:
DOM objects and methods, w3schools, Mozilla DOM docs vagy ha könyvet szeretnél magyar nyelven, akkor szerintem Kolman Nándor - Ajax a JavaScript ereje című könyvből is megtanulhatod a DOM használatát.

Már szerintem egyedül is el tudsz indulni az úton és kísérletezgess :)
6

köszi

dardos · 2008. Jún. 7. (Szo), 16.51
Köszönöm!