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!
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.
6. Sit palataa sille sivulle josta kohdassa kolme kopioitiin se pätkä ja kopioidaan siitä alempaa <span..........</span>
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!
pystytkö kertoo miten saa kuvan välit pieniks ? :)
ReplyDeletelöytyy ihan googlettamallakin :)
Deletealempaa >
Deletevoi vitsi olipa kiva kun teit tästä ohjeen! :) pitääkin kattoa jos onnistuis tekemään banneria vähän uusiks :)
ReplyDeletehaha joo saa vähä uutta ilmet tällee kevää kunniaks ;)
DeleteMulla ei toimi toi vaikka tein just tolleen :(
ReplyDeletemikäköhä siinä sitte o :o
Deletemul ei ainakaa toimi :( tulee vaa sellane laatikko siihe kohtaa sivupalkkii mis sen kuvan kuuluis olla..
ReplyDeleteauttaisitko vielä, miten kuvien välit saa pieneksi? :)
ReplyDeleteottaa kuvista reunat pois :D html koodista ettii kaikki ne kohdat joissa lukee jotai image-border tapasta ja laittaa ne nolliks :D
DeleteOnko flickrissä sama juttu ku mulla ainakaa ei oo yhtään tollasta kohtaa siinä html:ässä:S??:)
Deletese 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
Deletemäkin oon tehny tän kahel taval! se toinen oli vaan ihan hirveen sekava ku piti joka paikkaan lisätä koodeja :D
ReplyDeletenii se vähä on :D
Deletemullakaa ei toimi, ei anna tallentaa mallia
ReplyDeletejoo nyt keksisi mist se johtuu! :D lisään sen toho postauksee ku kommenttii ei voi lisätä tollast koodii :D
DeleteMiten oot tehny ton Arkistot -jutun, ett noi kuukaudet on tollee kivast? :-D
ReplyDeleteoon laittanu siihe noi kaikki linkit erikseen :D etten oo sieltä mistä se yleensä laitetaan :)
Deletemulla ei toimi tää, tai siis tulee vaan se normi kuva siihe :(
ReplyDeletemuokkaa 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
Deletemikäs tuo "URL to link image to" kohta on, eikö siihen tarttee mitään kirjottaa?
ReplyDeleteeikuu aah sieltä html koodista piti ottaa pois joku </BEGIN ja END// tai joku tommonen
ReplyDeletejuu oon näköjää itekki ottanu ne pois mut en oo muistanu sitö tönne kirjottaa :o hyvä huomio!! (:
DeleteMä 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:(
ReplyDeletekato toi edelinen kommentti :) eli noi begin ja end jutut ku ottaa pois :o ja sit se script pitää olla molemmat capslookilla :D
DeleteKiitos ihan tuhannesti tästä ohjeesta! Oon noin kolme viikkoo tätä päivää ennen yrittäny tuloksetta kaikenlaisia ohjeita. Kiitos ♥
ReplyDeletevau 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!
ReplyDeleteoleppa hyvä! :)
DeleteOon ite sen Petralle tehny tälläsen sivun avulla: http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ :)
ReplyDeletePakko sanoa mut tälle on olemassa miljoona kertaa helpompi tapa :/ http://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html
ReplyDeleteNiin ja muuten! Flickrillä tää ei toimi, yritin ikuisuuden kunnes päätin tehdä Photobucket-tilin ja heti toimi :P
http://open-dimension.blogspot.fi/
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.
DeleteEi 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.
ReplyDeletekäy se niinkin :)
DeleteMillä oot tehny ton bannerin, että siinä vaihtuu kuvat?
ReplyDeleteKoodilla :D
Deletevoisitko tehdä jonkun apu blogin tai vastaavan (:?
ReplyDeleteEn :) mulla riittä just ja just tälläkin hetkellä aika kaikkeen ja siihen menis ihan hirveesti aikaa...
Delete