linkki ja kuvan vaihtuminen

Sen voi tehdä vaikka Javascriptillä, http://keskustelu.suomi24.fi/show.fcgi?category=108&conference=4500000000000145&subcat=1131.

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ä.)

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).