NÁVOD: Ľahký HTML kód meniaci obrázky

Dnes by som vám chcela opäť ukázať ľahký HTML kód, ktorý môžete vložiť do svojho článku, no musíte si dávať pozor na detaily ako sú čiarky a podobne, pretože potom vám nebude fungovať. Html kód, ktorý vás chcem naučiť vo svojej podstate robí to, že ak máte jeden obrázok a položíte na neho kurzor svojej myšky (nemusíte stláčať) objaví sa vám iný obrázok. 

Tento html kód mám vložení napríklad v úvode tohto fotočlánku, no vy ho môžete použiť aj pri návode na jednoduchý výrobok ak chcete svojim čitateľom ukázať ako presne majú spraviť istý pohyb a podobne. 

Príkladom je toto srdiečko: 

POSTUP: 

1. krok: Vyberte si prvý obrázok, ktorý bude zobrazený stále, potom si vyberte obrázok, ktorý sa po prejdení myšou zmení. 

2. krok: Skopírujte si tento html kód:

<div class="separator" style="clear: both; text-align: center;">

<img alt="" height="227" onmouseout="this.src=' tu vložte URL adresu prvého obrázku"this.src=' tu vložte URL adresu druhého obrázku';" src="tu vložte URL adresu prvého obrázku" style="text-align: left;" width="320" />

</div>

<div class="separator" style="clear: both; text-align: left;">

<br />

</div>

3. Krok: HTML kód si vložte niekde do wordu a vymeňte moje poznámky za URL adresy obrázkov, potom si "novovniknutý kód" znova skopírujte. 

3. Krok: Vráťe sa do administrácie vášho článku a zmeňte si mód zo "zobraziť na písanie" na "zobraziť HTML v ľavom hornom rohu vašej lišty s funkciami. (Ikona pero)

3. krok: Nájdite si miesto, kde chcete tento kód vložiť. 

Odporúčam si obrázok vložiť na úplnom začiatku, keď ešte nemáte žiadne iné riadky HTML kódu, pretože ak nie ste profesionálni programátori, potom sa v jednotlivých kódoch a riadkoch budete ťažko orientovať. Ak si html vložíte skôr, po prepnutí do režimu "na písanie" si viete vybraný obrázok bez problémov presúvať, kam len budete chcieť a html kód sa vám bude automaticky meniť. 

4. Krok: Opäť zmeňte mód zo "zobraziť HTML" na "zobraziť na písanie". Vo svojom článku uvidíte iba ten prvý "hlavný obrázok", no ak článok zverejníte a 

Na čo si dávať pozor: 

• URL adresy obrázkov vložte na správne miesta, tak ako som vám to ukázala v poznámkach, pretože inak to nebude fungovať správne.
• Dávajte si pozor, aby ste zachovali tieto značky: ' " =, medzery, bodkočiarky atď. pretože inak vám kód nebude fungovať. 
• Ak chcete zmeniť veľkosť jedného obrázku, tak to urobte v "zobrazenie na písanie", HTML kód sa vám v bloggerovi mení automaticky. 

Páčil sa vám tento návod? Ak budete mať akékoľvek otázky, neváhajte ma kontaktovať. Pre viac podobných typov navštíve rubriku Blog alebo Sebarozvoj.