Změna obrázku po kliknutí na odkaz
Kliknete na odkaz, který změní nějaký obrázek na jiný.
Kompatibilita
| Současná verze eStránek: | ANO |
| Nová verze eStránek: |
ANO |
Testováno 20. srpna 2009
Příklad
Vložení ID k obrázku
Aby odkaz poznal, který obrázek má změnit, musíte dát obrázku ID.
1. Vytvořte nebo si otevřete již vytvořený příspěvek nebo stránku.
2. Kliknete pravým tlačítkem myši na obrázek a vyberete Vlastnosti obrázku.
3. Přepnete na záložku Rozšířené.
4. Do políčka Id napíšete ID obrázku. Nepoužívejte diakritiku.
Vložení odkazu
5. Přepněte si na HTML pomocí tlačítka "WYSIWYG / HTML" nad editorem.
6. Vložte HTML kód:
| <a style="cursor: pointer" onclick="document.getElementById('idobrazku').src= 'urlobrazku'" href="#">textodkazu</a> |
idobrazku - Napište ID obrázku ze čtvrtého bodu.
urlobrazku - Napište URL obrázku, na který se má původní změnit.
textodkazu - Text odkazu na změnu obrázku.
7. Uložte a máte hotovo.
Komentáře
Přehled komentářů
díky
Tomáš Hypeš - Re: re:změna obrázku
<a href="urlodkazu"><img src="urlpuvodnihoobrazku" onmouseover="this.src = 'urlobrazkuponajetimysi'" onmouseout="this.src = 'urlpuvodnihoobrazku'" /></a>
Lukaaash - re:změna obrázku
zkoušel jsem a vždycky mi to udělalo to, že odkaz byl funkční, ale obrázky se už nevyměňovaly...
Lukaaash - re:změna obrázku
jo dobry, jen jsem tam nejdřiv neměl http://
Tomáš Hypeš - Re: re:změna obrázku
Je to vyzkošené a funguje to:
<img src="urlpuvodnihoobrazku" onmouseover="this.src = 'urlobrazkuponajetimysi'" onmouseout="this.src = 'urlpuvodnihoobrazku'" />
Lukaaash - re:změna obrázku
někde tam je chyba, onmouseover a určitě ještě něco
Tomáš Hypeš - Re: změna obrázku
<img src="urlpuvodnihoobrazku" onmuseover="this.src = 'urlobrazkuponajetimysi'" onmouseout="this.src = 'urlpuvodnihoobrazku'" />
Lukaaash - změna obrázku
a jak by šlo udělat, aby se obrázek změnil po najetí myši a pak se zase vrátil na původní obrázek?
Lukaaash - re:změna obrázku