linkki ja kuvan vaihtuminen

jabo--

Mitenhän voisi tehdä kuvan, jonka päälle kun vie hiiren se vaihtuu ja kyseisessä kuvassa olisi linkki?

3

576

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • juhakorkeapudas
    • CSS:llä et voi tietenkään luoda linkkejä. Mutta voit tehdä niin, että linkki on osa sivua mutta piilossa, kunnes osoitin viedään kuvan kohdalle.

      Yksi kikkailumahdollisuus on se, että toisesta kuvasta tehdään CSS:llä taustakuva ja alkuperäinen kuva häivytetään. Linkkitekstin voi sijoittaa asemoinnilla. Tähän tapaan:

      HTML-merkkaus:

      linkkiteksti

      CSS-koodi (jossa oletetaan, että kuvan koko on 210×209 pikseliä – koska testikuvani sattui olemaan sellainen):

      .linkkikuva { width: 210px; height: 209px; position: relative; }
      .linkkikuva a { display: none; }
      .linkkikuva:hover { background: url(test2.png) no-repeat; }
      .linkkikuva:hover img { display: none; }
      .linkkikuva:hover a { display: inline; position: absolute; left: 4em; top: 5em; }

      (Asetus position: relative tehdään sitä varten, että tämän jälkeen voidaan tekstielementti sijoittaa ”absoluuttisesti” tämän elementin sisällä.)

    • css:llä?

      Voi olla pilkkuvirheitä, mutta idea varmaan selviää!
      ****************





      a:link, a:visited, a:active {
      background-image: url('1.gif');
      position: absolute;
      }

      a:hover {
      background-image: url('2.gif');
      position: absolute;
      }











      ***************

      lapinakyva.gif: Voi olla vaikka 1 x 1 px, joka sitten html:ssä määritetään oikean kokoiseksi (tässä 100 x 100 px).

      1.gif ja 2.gif: 100 x 100 px (en ole aivan varma, mutta käsittääkseni voidaan "esiladata" ilman scriptejä, liittämällä ne johonkin kohtaan sivua 0 x 0 px kokoisina).

    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Vesikin maksaa, miksei hengitysilma?

      Jatkuvasti itketään ettei ole rahaa mihinkään, mutta tilastojen mukaan rahaa on enemmän kuin koskaan, joten miksei asial
      Maailman menoa
      28
      1828
    2. Satuolennoista tarinointi ei kuulu peruskoulun tehtäviin

      Opetustunteja on muutenkin käytössä vain rajallinen määrä. Eli nämä satuhommat koulun ulkopuolelle vapaaehtoisiin harras
      Maailman menoa
      157
      1802
    3. Suomalainen perheenisä vaatii Suvivirren esittämisestä hyvityksiä

      Itse lapsena uskonnonopetuksesta vissiin traumoja saanut ihka suomalainen (!) perheenisä vaatii Espoon kaupungilta korva
      Maailman menoa
      351
      1550
    4. Mitä haluaisit

      Tehdä kaivattusi kanssa?
      Ikävä
      147
      1181
    5. Mies profiloin sinut

      Etsit täysin hallittavaa mutta samalla poikkeuksellista ihmistä. Etsit jotain mitä et koskaan tule saamaan.
      Ikävä
      213
      1164
    6. Lahkokasteen ja kristillisen kasteen erot

      Raamatun mukaan Kristillisessä yhdessä kasteessa Jumala pesee ja puhdistaa ihmisen sydämen ja poistaa perisynnin kirouks
      Kaste
      422
      1128
    7. Känsäkoura ja hotelli

      Tietoa kuka ostanut?
      Kuhmo
      11
      1004
    8. Salainen kastekoulutus

      Millainen on helluntailainen kastekoulutus ja kauanko se kestää ?
      Kaste
      285
      995
    9. Heikki Paasosen Marita-vaimo jätti tunteikkaat jäähyväiset: "Tällä kertaa me..."

      Heikki Paasonen on naimisissa Marita Paasosen (os. Alatalo) kanssa ja heillä on kaksi pientä lasta. Nyt koitti aika jätt
      Suomalaiset julkkikset
      4
      979
    10. Pirkanlinna yleisötapahtuma

      Oli todella hyvä tilaisuus. Ja EERO. L. Aivan mahtava tyyppi. Veti rennosti ja asiallisesti. Ja yleisöltä hyviä kysymyks
      Ähtäri
      49
      938
    Aihe