Mouseover image part 2
Tein vähän aikaa sitte postauksen miten saa kuvan vaihtumaan kun siihen laittaa hiiren päälle. Ja se löytyy täältä. Se ei oo kuitenkaan ainut tapa tehä sitä, vaan oon kans käyttäny toista tapaa, jonka tässä postauksessa selitän. Ja niitä tapojahan löytyy kyllä vielä lisääki, mutta näitä vaan oon käyttäny.
1. Ihan aluks olis hyvä varmaan päättää ne kuvat ja mielellään saman kokosetkin vielä.
2. Sen jälkeen täytyyki siirtyä bloggeriin ja sieltä ulkoasun HTML-koodin muokkaukseen. Malli > Muokkaa HTML-koodia.
3. Sieltä HTML-koodista etitään kohta /* Content ja sitä ennen lisätään tällänen koodi:
/* Print
----------------------------------------------- */
#print {
position: relative;
width: 800px;
height: 533px;
margin: 0 0;
}
#print img {
position: absolute;
left: 0;
bottom: -10px;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#print img.top:hover {
opacity: 0;
}
4. Kuvat täytyy ladata jonnekkin nettiin esimerkiksi Flickriin tai Photobuckettiin. Tä vaihe on periaatteessa iha sama missä vaiheessa tekee, mutta viimeistään tässä.
5. Sitte mennään sinne minne halutaan se kuva lisätä ja vaikka nyt esimerkiksi uuteen postaukseen. Postauksessa siihen HTML-koodin muokkaus kohtaan yläreunasta. Ja sinne sitte lisätään tällänen koodi:
<div id="print">
<img class="bottom" src="kuva1" />
<img class="top" src="kuva2" /></div>
Sen jälkeen tohon missä lukee kuva1 lisätään sen kuvan url osoite joka näkyy siinä kun laittaa hiiren päälle. Ja ton missä lukee kuva2 laitetaan sen kuvan url osoite jonka haluu siinä näkyvän jos hiiri ei ole siinä päällä.
5. Sen jälkeen koodin pitäisi näyttää esimerkiksi tältä:
<div id="print">
<img class="bottom" src="http://data.whicdn.com/images/57644400/tumblr_mktkkfq5ak1s6feevo1_400_large.jpg" />
<img class="top" src="http://data.whicdn.com/images/57644336/tumblr_mktk9uqP5O1s6feevo1_250_large.jpg" /></div>
Tietenki niillä omilla osotteilla.
6. Tän koodin toiminta ei näy postauksen esikatselussa, joten vasta sen jälkeen kun on julkassu postauksen näkyy. Ja tätä koodia voi tetenki käyttää useempaan kuvaan samaan aikaa aina vaan laittamalla uudestaan ton viimeseks lisätyn koodin ja muokata ne kuvien url siitä.
HUOM. Tossa koodissa on noi leveys ja korkeus laitettu sen kuvan mukaan mitä oon ite laittanu. Niiten pitää olla sen kokoset minkä kokonen se kuva on jonka haluut lisätä. Eli jos kuvan leveys 750px niin kuvan korkeus on todennäkösesti 500px.
Ja sitte sitä kuinka nopeesti se kuva himmenee siitä voi muokata muokkaamalla tota 0.5.
1. Ihan aluks olis hyvä varmaan päättää ne kuvat ja mielellään saman kokosetkin vielä.
2. Sen jälkeen täytyyki siirtyä bloggeriin ja sieltä ulkoasun HTML-koodin muokkaukseen. Malli > Muokkaa HTML-koodia.
3. Sieltä HTML-koodista etitään kohta /* Content ja sitä ennen lisätään tällänen koodi:
----------------------------------------------- */
#print {
position: relative;
width: 800px;
height: 533px;
margin: 0 0;
}
#print img {
position: absolute;
left: 0;
bottom: -10px;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#print img.top:hover {
opacity: 0;
}
4. Kuvat täytyy ladata jonnekkin nettiin esimerkiksi Flickriin tai Photobuckettiin. Tä vaihe on periaatteessa iha sama missä vaiheessa tekee, mutta viimeistään tässä.
5. Sitte mennään sinne minne halutaan se kuva lisätä ja vaikka nyt esimerkiksi uuteen postaukseen. Postauksessa siihen HTML-koodin muokkaus kohtaan yläreunasta. Ja sinne sitte lisätään tällänen koodi:
<div id="print">
<img class="bottom" src="kuva1" />
<img class="top" src="kuva2" /></div>
Sen jälkeen tohon missä lukee kuva1 lisätään sen kuvan url osoite joka näkyy siinä kun laittaa hiiren päälle. Ja ton missä lukee kuva2 laitetaan sen kuvan url osoite jonka haluu siinä näkyvän jos hiiri ei ole siinä päällä.
5. Sen jälkeen koodin pitäisi näyttää esimerkiksi tältä:
<div id="print">
<img class="bottom" src="http://data.whicdn.com/images/57644400/tumblr_mktkkfq5ak1s6feevo1_400_large.jpg" />
<img class="top" src="http://data.whicdn.com/images/57644336/tumblr_mktk9uqP5O1s6feevo1_250_large.jpg" /></div>
Tietenki niillä omilla osotteilla.
6. Tän koodin toiminta ei näy postauksen esikatselussa, joten vasta sen jälkeen kun on julkassu postauksen näkyy. Ja tätä koodia voi tetenki käyttää useempaan kuvaan samaan aikaa aina vaan laittamalla uudestaan ton viimeseks lisätyn koodin ja muokata ne kuvien url siitä.
HUOM. Tossa koodissa on noi leveys ja korkeus laitettu sen kuvan mukaan mitä oon ite laittanu. Niiten pitää olla sen kokoset minkä kokonen se kuva on jonka haluut lisätä. Eli jos kuvan leveys 750px niin kuvan korkeus on todennäkösesti 500px.
Ja sitte sitä kuinka nopeesti se kuva himmenee siitä voi muokata muokkaamalla tota 0.5.
Heippa, tää sun ohje autto hirveesti, kiitos siitä! Mutta nyt kun lisäsin ton sivugadgetteihin, niin siihen tuli järkyttävän iso rako edelliseen gadgettiin. Osaatko neuvoa, miten sen saisi pois? :)
ReplyDeleteen oikeestaa :DD se on todennäkösest jostain sieltä html koodista widget osiosta tai sit siellä ei oo ees mitää valmista kohtaa sille :Dd mun ei oo ikinä tarvinnu tehä mitää tollasta, enkä jaksa nyt alkaa ettiä mite se menis :o mut jos ei meinaa löytyä ni kannattaa kysyä Noralta sen koodiapublogista: http://koodiapu.blogspot.fi/
ReplyDeletemiten ton sais tonne sivun reunaan ?:) et mistä sen kohan löytäs html koodist ?:)
ReplyDeleteihan vaan menemällä bloggerissa ulkoasut ja sieltä uusi gadgetti ja html/javascript ja siihen toi jälkimmäinen koodi :)
Deleteyritin tehdä sekä bannerin ja ton sivupalkkiin kuvan tolla ykkösohjeella ja ei suostu toimiin molemmat yhtäaikaa...satutko tietään syytä?:/ yritin kanssa laittaa ton jälkimmäisen koodin gadgettiin mutta kuvat tulee vierekkäin eikä sillai vaihtuen :(
Deletene täytyy laittaa molemmat! vai siis tarkotatko että käytit tota part ykköstä?
Deletekäytin part ykköstä mutta sillon ei toimi bannerissa, eikä sivupalkissa kuvanvaihto. Olisin kokeillu tätä ohjettakin, mutta en jostain syystä löytä tota *Contentia...
Deletese ei oo niin tärkee osa tätä juttua (: voit laittaa sen mihin tahansa head jälkeen ja /head ennen :)
Deletemulla tää toimii van osittain; sen kuvan TILA näkyy tyhjänä valkosena, mutta kuvaa ei näy. mikähän on ongelmana?
ReplyDeleteHmm... Tarkista että sulla on toimiva kuvien url osote ainaki ensi. Muuta ei oikee noilla tiedoilla tuu mieleen :o
Deletehei se toimii! kokeilin flickrin sijasta photobucketia! :)
Deletemiksei mulla toimi tämä? oon ladannu kuvia Flickr:iin ja sieltä sitte yrittäny kopioida niitä url- osoitteita ja liittää HTML koodiin. mutta siihen ei tule niitä kuvia tai mitään.. help! Enkä muutenkaan käydä photobucketia enkä myöskään tiedä että miten sen voi ladata ja että miten sitä käytetään.
ReplyDeletehmmmm... oon ite tehny seka phohtobucketilla että flickrillä eikä mitään ongelmia. Muista laittaa oikeen kokoseks noi koot ja ootko varmasti laittanu kaikki oikeeseen paikkaan? :)
Deleteosaatko neuvoa miten siihen kuvaan sais laitettua linkin? :)
ReplyDeletehttp://www.echoecho.com/htmllinks06.htm < tosta vaikka katot :) S
Deleteiihen kohtaan kun tossa lukee myfile.html niin tulee linkin osote ja siihen kohtaan missä lukee rainbow.gif niin tulee kuvan URL osote :)
öö jos ton laittaa vaa sivugadgettii ton jutun nii pitääkö siihe html juttuu laittaa silti se koodi?
ReplyDeletehmm nyt en iha ymmärrä :s jos laitat sivugadgettiin ton alemman ni kyllä täytyy laittaa myös se ylempi :)
Deletejee paljon kiitoksii tää toka toimi mutta eka ei :)
ReplyDeleteoleppa hyvä :)
Delete