Autor Zpráva
JardaB
Profil
Ahoj,

v javascritpu nejsem moc sběhlý a potřebuji vyřešit následující věc:

Budu mít předem definovaný div #obrazek ve kterém budu na pozadí zobrazovat fotografii, příp pomocí <img src..

Dále budu mít pod tímto div seznam desítek rámečků v PNG formátu.
Potřebuji nějak pomocí javascriptu docílit toho, aby když přejedu myší přes obrázek rámečku, aby se tento zobrazil přes fotografii (jako další vrstva) v definovaném div #obrazek. Ve výsledku tak dostanu náhled jak bude vypadat případná aplikace rámečku na fotografii. Grafika rámečků bude obsahovat grafiku a průhledné pozadí, tedy bych měl dostat náhled výsledné grafiky obrazek + ramecek
Lze tohle vyřešit javascriptem?

<div id="obrazek"> // kde nadefinuji obrazek na pozadí
</div>

příp.

<div id="obrazek">
<img src="obrazek.jpg" alt="1">
</div>

// dále výčet jednotlivých rámečků
<img src="ramecek1.png" alt="r1">
<img src="ramecek2.png" alt="r2">
<img src="ramecek3.png" alt="r3">
atd..
JardaB
Profil
Zkoušel jsem něco jako tohle:

<div id="obrazek">
  <div id="ramecek" class="fram">
  </div>
</div>
 <br>
 
 <img onmouseover="document.getElementById('ramecek').style.backgroundImage = url('ramecek1.png')" src="ramecek1.png" alt="test"> 
 <img onmouseover="document.getElementById('ramecek').style.backgroundImage = url('ramecek2.png')" src="ramecek2.png" alt="test"> 

ale hlásí mi to že url objekt není definován...
Keeehi
Profil
Ta css vlastnost má být string.
<img onmouseover="document.getElementById('ramecek').style.backgroundImage = 'url(\'ramecek1.png\')'" src="ramecek1.png" alt="test">
JardaB
Profil
Již včera mi to došlo.... nevěděl jsem totiž jak zapsat právě tohle 'url(\'ramecek1.png\')'

fungovalo mi i tohle, ale ten tvůj zápis je jistě tak jak má být a ihned vyzkouším..

<img onmouseover="document.getElementById('ramecek').style.backgroundImage = 'url(ramecek1.png)'" src="ramecek1.png" alt="test">

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: