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.

Comments

  1. 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? :)

    ReplyDelete
  2. en 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/

    ReplyDelete
  3. miten ton sais tonne sivun reunaan ?:) et mistä sen kohan löytäs html koodist ?:)

    ReplyDelete
    Replies
    1. ihan vaan menemällä bloggerissa ulkoasut ja sieltä uusi gadgetti ja html/javascript ja siihen toi jälkimmäinen koodi :)

      Delete
    2. yritin 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 :(

      Delete
    3. ne täytyy laittaa molemmat! vai siis tarkotatko että käytit tota part ykköstä?

      Delete
    4. kä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...

      Delete
    5. se ei oo niin tärkee osa tätä juttua (: voit laittaa sen mihin tahansa head jälkeen ja /head ennen :)

      Delete
  4. mulla tää toimii van osittain; sen kuvan TILA näkyy tyhjänä valkosena, mutta kuvaa ei näy. mikähän on ongelmana?

    ReplyDelete
    Replies
    1. Hmm... Tarkista että sulla on toimiva kuvien url osote ainaki ensi. Muuta ei oikee noilla tiedoilla tuu mieleen :o

      Delete
    2. hei se toimii! kokeilin flickrin sijasta photobucketia! :)

      Delete
  5. miksei 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.

    ReplyDelete
    Replies
    1. hmmmm... oon ite tehny seka phohtobucketilla että flickrillä eikä mitään ongelmia. Muista laittaa oikeen kokoseks noi koot ja ootko varmasti laittanu kaikki oikeeseen paikkaan? :)

      Delete
  6. osaatko neuvoa miten siihen kuvaan sais laitettua linkin? :)

    ReplyDelete
    Replies
    1. http://www.echoecho.com/htmllinks06.htm < tosta vaikka katot :) S
      iihen kohtaan kun tossa lukee myfile.html niin tulee linkin osote ja siihen kohtaan missä lukee rainbow.gif niin tulee kuvan URL osote :)

      Delete
  7. öö jos ton laittaa vaa sivugadgettii ton jutun nii pitääkö siihe html juttuu laittaa silti se koodi?

    ReplyDelete
    Replies
    1. hmm nyt en iha ymmärrä :s jos laitat sivugadgettiin ton alemman ni kyllä täytyy laittaa myös se ylempi :)

      Delete
  8. jee paljon kiitoksii tää toka toimi mutta eka ei :)

    ReplyDelete

Post a Comment