lauantai 4. huhtikuuta 2015

Mouseover banneri / kun hiiren vie bannerin päälle, banneri muuttuu

Tämä onkin vähän monimutkaisempi juttu, joten tämän postauksen suunnittelussa ja tekemisessä kului vähän enemmänkin aikaa. Mutta hei, siirrytään suoraan asiaan.

Mouseover banneri? Mikä se on?
Jos ette tämän postauksen otsikosta saaneet punaisesta langasta kiinni, mouseover banneri on siis banneri (mikä on banneri ja miten se lisätään blogiin -postaus), josta tulee erilainen, kun hiiren vie sen päälle. Alla esimerkkikuva siitä - viekääs hiiri kuvan päälle!



MITEN SAAT MOUSEOVER BANNERIN BLOGIIN?

1. Sinulla pitää olla kaksi samankokoista kuvaa - toinen kuvista on se, joka näkyy, kun hiiri viedään bannerin päälle ja toinen on se kuva, miltä haluat bannerin näyttävän silloin, kun hiiri ei ole bannerin päällä.

2. Lataa nuo kaksi kuvaa nettiin, esim. Photobucketiin.

3. Mene malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi:

#header{
display:none;
{


Kyseinen koodi poistaa blogisi headerin eli Ulkoasusta käsin laittamasi alkuperäisen bannerin. Älä pelkää vanhan bannerin katoamista, nimittäin bannerittomuuden tilalle saat pian vähän eri tavalla laitetun bannerin!

4. Seuraavaksi mene ulkoasuun. Paina Ylätunnisteen alla olevaa kohtaa "lisää gadget". Jos blogisi Ulkoasussa ylätunnisteen alla ei ole palkkia, jossa lukee lisää gadget, valitse sitten blogitekstit-ruudun viereisestä palkista "lisää gadget" -kohta ja paina sitä.


5.  Rullaa alaspäin ja valitse "HTML/JavaScript".


Lisää sinisellä rengastettuun boksiin tämä koodi:

<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>

Laita tähän blogisi osoite -kohtaan blogisi osoite http-muodossa, eli kopioi se selaimesi yläreunassa olevasta linkkipalkista.

EI siis näin: www.blogikoodeja.blogspot.fi
VAAN NÄIN: http://blogikoodeja.blogspot.fi/

Muistathan, että jos latasit kuvat Photobucketin kautta, kopioit kuvien URL-osoitteet kohdasta Direct. Täällä lisää tästä asiasta.

6.  Jos lisäsit tuon äskeisen HTML/JavaScript-koodin sivupalkkiin etkä ylätunnisteen alle, siirrä se nyt ylätunnisteen alle vetämällä.

7. Valmista! Sitten vain painat "Tallenna".

MOUSEOVER BANNERIN KESKITTÄMINEN

Lisää kohdan 5 koodin alkuun <center> ja loppuun </center>. Koodi näyttää siis tältä:

<center>
<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>
</center>

Toivottavasti toimii! :)

17 kommenttia:

  1. Moikka!
    Mulla on ongelma blogini kanssa, enkä oo löytänyt mistään siihen apua. Blogitekstin otsikko alleviivautuu aina automaattisesti, kun siihen vie hiiren päälle, en ole säätänyt css-koodeja sillätavoin, joten osaatko yhtään sanoa mitä oon sössinyt. Kiitos jos vastaat :-)! Tässä vielä linkki blogiin http://atheneblogi.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Morjens! :)
      Blogitekstin otsikon automaattinen alleviivaantuminen johtuu mallistasi (Ethereal). Sen saa kuitenkin pois näppärästi tällä koodilla:

      h3.post-title a:hover{
      text-decoration: none;
      }

      Poista
    2. Oi kiitos paljon oot paras! :)

      Poista
  2. Bannerin sijasta siihen tulee sellainen pieni keskeltä haljennut ruutu, joka vaihtuu ehjäksi lisäämällä hiiren siihen päälle. Miksi?

    VastaaPoista
    Vastaukset
    1. Kuvan linkityksessä on jotain pielessä. Olet luultavasti kopioinut kuvan URL-osoitteen / linkin väärästä kohdasta.

      Poista
  3. Mullakaan ei onnistunu tää vaan ne kuvat tuli vaan peräkkäin ja niitten välissä oli sen koodin osia. :/

    VastaaPoista
    Vastaukset
    1. Koodin liittämisessä blogiin on luultavasti jotain vikaa. Ota muhun yhteyttä s-postilla ja kopsaa valmis koodi mun meiliin, siis se, joka ei toimi oikein. Voin yrittää selvittää virhettä sitä kautta! :)

      Poista
    2. ja meilini on siis ilonahuotari@gmail.com

      Poista
  4. hei mä en saa tota mitenkään keskitettyä! en tiedä missä on vika ku mielestäni tein noi kaikki jutut oikein :o

    VastaaPoista
    Vastaukset
    1. Moikka!
      Vähän hankala auttaa ilman blogin linkitystä, mutta yritetään silti! Saatko mouse-over-bannerin kuitenkin näkymään sellaisena kuin kuuluu? Voi nimittäin olla, että jo kuvakoodista löytyy se ongelma. Jos kuitenkin bannu näkyy moitteetta niin sitten center-koodien toimivuudessa on ongelmaa. Kopioithan varmasti oikean koodin tästä postauksesta kokonaisuudessaan etkä poistanut siitä vahingossakaan merkin merkkiä?

      Poista
  5. Miten saa sitten tämän jälkeen ihan normaalisti bannerin blogiin sieltä Ulkoasusta laitettuna?

    VastaaPoista
    Vastaukset
    1. Voisitko auttaa, kun haluaisin bannerin takaisin näkyviin kun sen laittaa normaalisti ulkoasusta? Onko tuolle " #header{
      display:none;
      { " jotain "vastakoodia" tai sellasta, jos tajusit?

      Poista
    2. Siis poistat vaan tuon koodin, joka vie normisti laitetun bannerin blogistasi pois. Ymmärsinköhän ihan oikein? :D

      Poista
  6. Moikka! Tosi kiva blogi sulla, auttanut tosi paljon! :) Miten tämän saman saisi gadgeteissa kuvaan

    VastaaPoista
  7. Moikka! Mulla ongelmia gadgetin taustan kanssa: ei ole täysin läpinäkyvä ja se on hyvin häiritsevää... :D Olisko jotain joka auttaisi?
    http://tulenkestavaa.blogspot.fi

    VastaaPoista
  8. Hei! Tein tämän ja onnistuin siinä, mutta on siinä yksi ongelma... tausta jää inhottavasti bannerin ulkopuolelta harmaa-valkoiseksi. Osaisitko auttaa?
    www.adaonline.blogspot.fi

    VastaaPoista
  9. Anteeksi, kirjoitin blogini nimeni väärin äskeiseen kommentiini, se on www.adaonlines.blogspot.fi :)

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)