miten tehdä: mouseover image

tätä on kyselty parikin kertaa, ja koska tämä on tosi helppo, päätin nyt tehdä tällekin ohjeet. itse olen vähän eri tavalla banneriini tehnyt tämän, mutta sillä ei ole väliä, koska molemmat tavat toimivat.
    lähdetään liikkeelle siitä, ettei bannerini ole oikeasti "banneri" vaan html/javascript- gadget. eli, jos haluat kuvan banneriksi, muokkaa blogin otsikko.

1. malli --> mukauta --> lisäasetukset --> blogin otsikko ja se kokoon 0px. jos sinulla on siinä kuva, poista se.
2. lataa kaksi (yleensä mouseoverissa samankokoista) kuvaa photobucketiin. olen aika monta kertaa yrittänyt flickrilläkin, muttei ole toiminut. kannattaa kuitenkin koittaa sitäkin. photobucketissa toimii varmasti.
4. sitten bloggerin hallintapaneelista ulkoasu --> lisää gadget --> HTML/javascript. siihen sisällöksi laitat tälläisen koodin:

<a href="LINKKI, JOHON PÄÄSEE, KUN KLIKKAA KUVAA"><img src="ENSIMMÄISEN KUVAN URL" onmouseover="this.src='TOISEN KUVAN URL'" onmouseout="this.src='ENSIMMÄISEN KUVAN URL'" /></a>

5. kopioi photobucketista kuvan suora osoite. kohtaan 'ensimmäisen kuvan url' tulee sen kuvan osoite, jonka haluat näkyvän kun hiiri ei ole siinä päällä. huomaathan, että sen ensimmäisen kuvan osoite tulee kahteen kertaan!
ja kohtaan 'toisen kuvan url' tulee sitten se jonka haluat näkyvän, kun hiiri on siinä päällä. tuohon linkkikohtaan laitetaan osoite, johon pääsee kuvaa klikkaamalla, vaikkapa oma blogi.

esimerkiksi:

<a href="http://helplogger.blogspot.fi/2012/05/create-rollover-image-effect-change.html"><img src="http://i1364.photobucket.com/albums/r725/Hilja_Viitaniemi/010_zpsc87cbfe5.jpg" onmouseover="this.src='http://i1364.photobucket.com/albums/r725/Hilja_Viitaniemi/kittyyy_zps59010a35.jpg'" onmouseout="this.src='http://i1364.photobucket.com/albums/r725/Hilja_Viitaniemi/010_zpsc87cbfe5.jpg'" /></a>

tietenkin niillä omilla osoitteilla. sitten vaan tallennetaan! 

No comments

Post a Comment

leave a comment, be nice.