| Autor | Zpráva | ||
|---|---|---|---|
| JardaB Profil |
#1 · Zasláno: 7. 2. 2017, 15:13:07
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 |
#2 · Zasláno: 7. 2. 2017, 18:15:50
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 |
#3 · Zasláno: 7. 2. 2017, 19:25:37
Ta css vlastnost má být string.
<img onmouseover="document.getElementById('ramecek').style.backgroundImage = 'url(\'ramecek1.png\')'" src="ramecek1.png" alt="test"> |
||
| JardaB Profil |
#4 · Zasláno: 8. 2. 2017, 09:26:30
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"> |
||
|
Časová prodleva: 6 let
|
|||
0