HTML mouseover

Miten oon tehny mun bannerin ja infokuvan niin että se kuva vaihtuu ku siihe laittaa hiiren päälle?
Googlaamalla mouseover html löytää kyllä tästä ainaki engalnniks erilaisia ohjeita, mutta päätin nyt sit tehä teille tälläse oman version.
Osaan tehä tän kahella tavalla ja koska opin sen toisen tavan vasta tota Tumblria tehdessä ni selitän ensin tän jonka opin ensin ja teen (jos jaksan) myöhemmin postauksen siitä toisesta tavasta.

1. Iha ensimmäisenä muokkaat kaks kuvaa joista toinne on se kuva joka näkyy siinä ku hiiri ei oo kuvan päällä ja toinen sillon ku hiiri on siinä kuvan päällä. Saman kokoset mielellään. Sen jälkeen lataat ne esim. PhotoBuckettiin.


2. Sitte mennään sellaselle sivulle kun http://www.htmlbasix.com/mouseoverimages.shtml ja alempaa löytyy  laatikko jonka sisällä lukee punasella First image ja sen alapuolella URL of original image.
Siihe URL of original image perässä olevaa laatikkoon tulee suora linkki siihen kuvaan. Photobucketissa se on Direct Link. Se voi näyttää esimerkiks tältä: http://i1116.photobucket.com/albums/k576/karinjulia/8657_zps29db903a.jpg
Sen äskesen laatikon alapuolella on kohta URL of mouseover image jonka jälkeiseen ruutuun tulee suora linkki siihen kuvaan jonka haluu sen alkuperäsen kuvan tilalla näkyvän ku hiiren laittaa siihen päälle.
Sitte ku ne on laitettu ni painetaan sen ison laatikon alareunassa olevasta Generate Script nappulasta.

3. Se avaa siihen tollasen sivun. Kopioit siitä kaiken mikä on <SCRIPT.............. ja </script> välissä ja ne tietenki siihe mukaan.

4.Blogger -> Malli -> Muokkaa HTML-koodia

5. Etit siitä iha alusta sellasen kohan jossa lukee <head> ja laita vaikka sen jälken rivimvaihtoja ja liitä sen teksti (jonka oot just kopioinu) siihe. (Mulla se on tuolla alempana mutta ei välitetä siitä.) Sitte tallennetaan malli.

6. Sit palataa sille sivulle josta kohdassa kolme kopioitiin se pätkä ja kopioidaan siitä alempaa <span..........</span>

7. Blogger -> Ulkoasu -> Lisää gadgetti -> HTML/JavaScript

8. Liität siihen Sisältö-kohtaan sen jutun mikä äsken kopioitii. Ja tallennetaan.

9. Nyt sen pitäis toimia.

EDIT:Se jälkimmäisen </script> kun muuttaa </SRIPT> ni mitäis toimia!

+ Huomioi että et voi lisätä kahta kertaa erikseen kuvaa jonka numero on yksi vaan sen numero pitää vaihtaa muuksi kuin aikaisemmin jo käytetty. Eli esim.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://i1116.photobucket.com/albums/k576/karinjulia/8389_zps2dde3f23.jpg";
staticImage1 = new Image();
staticImage1.src = "http://i1116.photobucket.com/albums/k576/karinjulia/8657_zps29db903a.jpg";

// End -->
</SRIPT>

molemmat loadImage1 vaihdetaan loadImage2 ja samoin myös staticImage1 vaihdetaan staticImage2
ja sen jälkeen pitää myös jälkimmäisestä koodista

<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://i1116.photobucket.com/albums/k576/karinjulia/8657_zps29db903a.jpg" border=0></span>

Vaihtaa image1 -> image2

Toivottavasti tästä oli apua mahdollisimman monelle!

Comments

  1. pystytkö kertoo miten saa kuvan välit pieniks ? :)

    ReplyDelete
  2. voi vitsi olipa kiva kun teit tästä ohjeen! :) pitääkin kattoa jos onnistuis tekemään banneria vähän uusiks :)

    ReplyDelete
    Replies
    1. haha joo saa vähä uutta ilmet tällee kevää kunniaks ;)

      Delete
  3. Mulla ei toimi toi vaikka tein just tolleen :(

    ReplyDelete
  4. mul ei ainakaa toimi :( tulee vaa sellane laatikko siihe kohtaa sivupalkkii mis sen kuvan kuuluis olla..

    ReplyDelete
  5. auttaisitko vielä, miten kuvien välit saa pieneksi? :)

    ReplyDelete
    Replies
    1. ottaa kuvista reunat pois :D html koodista ettii kaikki ne kohdat joissa lukee jotai image-border tapasta ja laittaa ne nolliks :D

      Delete
    2. Onko flickrissä sama juttu ku mulla ainakaa ei oo yhtään tollasta kohtaa siinä html:ässä:S??:)

      Delete
    3. se on iha sama mitä kautta ne lataat, koska siihen vaikuttaa se html koodi :) mut lisää löytyy Noran koodiapu-blogista: http://koodiapu.blogspot.fi/2013/03/kuvien-valit-pienemmiksi.html#comment-form

      Delete
  6. mäkin oon tehny tän kahel taval! se toinen oli vaan ihan hirveen sekava ku piti joka paikkaan lisätä koodeja :D

    ReplyDelete
  7. mullakaa ei toimi, ei anna tallentaa mallia

    ReplyDelete
    Replies
    1. joo nyt keksisi mist se johtuu! :D lisään sen toho postauksee ku kommenttii ei voi lisätä tollast koodii :D

      Delete
  8. Miten oot tehny ton Arkistot -jutun, ett noi kuukaudet on tollee kivast? :-D

    ReplyDelete
    Replies
    1. oon laittanu siihe noi kaikki linkit erikseen :D etten oo sieltä mistä se yleensä laitetaan :)

      Delete
  9. mulla ei toimi tää, tai siis tulee vaan se normi kuva siihe :(

    ReplyDelete
    Replies
    1. muokkaa toi jälkimmäinen script niin että siinä lukeeki SCRIPT (eli capslookilla kirjotetuks) ni pitäis toimia! Jos ei toimi ni kokeile tehä uudestaa alusta asti :o

      Delete
  10. mikäs tuo "URL to link image to" kohta on, eikö siihen tarttee mitään kirjottaa?

    ReplyDelete
  11. eikuu aah sieltä html koodista piti ottaa pois joku </BEGIN ja END// tai joku tommonen

    ReplyDelete
    Replies
    1. juu oon näköjää itekki ottanu ne pois mut en oo muistanu sitö tönne kirjottaa :o hyvä huomio!! (:

      Delete
  12. Mä en saa tota jostain syystä toimimaan? Se kuva vaan on sellanen tavallinen eikä muutu miksikään vaikka laitan hiiren päälle ja oon yrittäny jo varmaan 10 kertaa:(

    ReplyDelete
    Replies
    1. kato toi edelinen kommentti :) eli noi begin ja end jutut ku ottaa pois :o ja sit se script pitää olla molemmat capslookilla :D

      Delete
  13. Kiitos ihan tuhannesti tästä ohjeesta! Oon noin kolme viikkoo tätä päivää ennen yrittäny tuloksetta kaikenlaisia ohjeita. Kiitos ♥

    ReplyDelete
  14. vau kiitti tästä! mulla ei aluks meinannu millään toimii, ja testasin tätä toista että laitoin sen yhteen postaukseen ja sen jälkeen se toimi tuolla sivupalkissakin :) kiitti!

    ReplyDelete
  15. Hei osaisitko sanoa miten saisin blogiini esim infoa itsestäni niin että se ois linkki, ja kun siitä painaa niin infoa avautuu siihen alle. Että ne ois sellasii avautuvia .. kun mulla on todella paljon kaikkea sälää niin olis kiva saada ne tiivistettyä! esim. tässä blogissa on käytetty sellaista http://petra-happyfeelings.blogspot.fi/

    ReplyDelete
    Replies
    1. Oon ite sen Petralle tehny tälläsen sivun avulla: http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ :)

      Delete
  16. Pakko sanoa mut tälle on olemassa miljoona kertaa helpompi tapa :/ http://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html

    Niin ja muuten! Flickrillä tää ei toimi, yritin ikuisuuden kunnes päätin tehdä Photobucket-tilin ja heti toimi :P

    http://open-dimension.blogspot.fi/

    ReplyDelete
    Replies
    1. Toi on sama asia eri tavalla selitettynä :) Oon tota samaa sivua ite käyttäny ku oon tätä joskus oopetellu. Mulla on toiminu kyllä Flickrilläkin ilman ongelmia.

      Delete
  17. Ei kannata sotkeutua html koodiin tässä asiassa. Lisäätte vaan ton koodin minkä tuo sivu antaa ja lisäätte html gadgetin ja se on valmis.

    ReplyDelete
  18. Millä oot tehny ton bannerin, että siinä vaihtuu kuvat?

    ReplyDelete
  19. voisitko tehdä jonkun apu blogin tai vastaavan (:?

    ReplyDelete
    Replies
    1. En :) mulla riittä just ja just tälläkin hetkellä aika kaikkeen ja siihen menis ihan hirveesti aikaa...

      Delete

Post a Comment