linkki ja kuvan vaihtuminen

jabo--

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

3

575

    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
      1
      1586
    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
      99
      1517
    3. Lahkokasteen ja kristillisen kasteen erot

      Raamatun mukaan Kristillisessä yhdessä kasteessa Jumala pesee ja puhdistaa ihmisen sydämen ja poistaa perisynnin kirouks
      Kaste
      422
      1051
    4. Suomalainen perheenisä vaatii Suvivirren esittämisestä hyvityksiä

      Itse lapsena uskonnonopetuksesta vissiin traumoja saanut ihka suomalainen (!) perheenisä vaatii Espoon kaupungilta korva
      Maailman menoa
      208
      978
    5. Mitä haluaisit

      Tehdä kaivattusi kanssa?
      Ikävä
      124
      849
    6. 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
      2
      797
    7. Kuka omistaa keltaisen vanhan aravan?

      Pitäs saada rakennuksen omistajaan yhteys, rappukäytävät on siivottomassa kunnossa. Hiekkaa ja roskia rappusissa, lisäks
      Haapavesi
      29
      770
    8. Pirkanlinna yleisötapahtuma

      Oli todella hyvä tilaisuus. Ja EERO. L. Aivan mahtava tyyppi. Veti rennosti ja asiallisesti. Ja yleisöltä hyviä kysymyks
      Ähtäri
      42
      751
    9. Känsäkoura ja hotelli

      Tietoa kuka ostanut?
      Kuhmo
      7
      734
    10. Nostetaanko nainen kissa pöydälle?

      Ja selvitetään nämä tunteet?
      Ikävä
      61
      710
    Aihe