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?
  1. <a href="#" onclick="dokument.getElementById('keret').innerHtml = '<img src=nyito.jpg>'"><img src=kisnyito.jpg></a>  
  2. <br><br>  
  3. <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.:
  1. <script type="text/javascript">  
  2. function beillesztes() {  
  3.     var kep = document.createElement('img');   
  4.     kep.setAttribute('src', 'nyito.jpg');  
  5.     document.getElementById('keret').appendChild(kep);  
  6. }  
  7. </script>  
HTML:
  1. <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.
  1. function beillesztes() {  
  2.     var keret = document.getElementById('keret');  
  3.           
  4.     if (keret.childNodes.length && keret.childNodes[0].tagName.toLowerCase() == 'img') {  
  5.         keret.childNodes[0].setAttribute('src', 'nyito.jpg');  
  6.     } else {  
  7.         var kep = document.createElement('img');  
  8.         kep.setAttribute('src', 'nyito.jpg');  
  9.         keret.appendChild(kep);  
  10.     }  
  11. }  
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!