Miten saa sellaisen asian linkkeihin, että kun hiiren osoitin viedään linkin päälle, tulee siihen alleviivaus ja kun hiiri otetaan pois alleviivaus poistuu. Mitä laitetaan HTML -koodiin?
Linkkien alleviivaus
enquiry
6335
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 6
Vanhimmat
Homma toteutetaan siis tietenkin css:ällä.
Sivun head-osaan laitetaan esimerkiksi tällainen:
a:link {
color : #4169E1;
text-decoration : none;
}
a:hover {
color : #1E9000;
text-decoration : underline;
}
a:active {
color : Fuchsia;
text-decoration : underline;
}
a:visited {
color : #FF1493;
text-decoration : line-through;
}
Kannattaa sitten muistaa että linkit kannattaa tehdä sen näköiseksi että ne tunnistetaan linkeiksi. Toisinsanoen ei ole välttämättä aina hyvä idea mennä vaihtelemaan linkkien värejä tai poistelemaan alleviivauksia (toisaalta mitään muuta tekstiä kuin linkit ei pitäisi koskaan alleviivata).
Jos linkistä poistetaan alleviivaus niin sitten pitäisi miettiä jokin muu tapa miten selailija tunnistaa linkin linkiksi.
Selailijat klikkailivat harvemmin sellaisia linkkejä joiden olemassaoloa he eivät huomaa.
mistä saa css:än ja vieläpä ilmaisen odotan vastausta innolla =D
Joskus on vaikea arvata mikä on kysyjän pohjatietämys kotisivujen teosta, siksi usein tulee oletettua että sitä on jo jonninverran.
Ok, sinulla ei siis juurikaan ole.
"mistä saa css:än ja vieläpä ilmaisen"
CSS on tekniikka, jolla määritellään ulkoasu html-kielellä kuvatulle rakenteelle. Se ei siis sinänsä maksa mitään ja sen saa itse kirjoittamalla:)
Esim sivu ilman css-tyyliä:
Tyylitön sivu
Tässä pari linkkiä:
suomi24.fi
jippii.fi
html-opas
sfnet.viestinta.www - VUKK
Sama sivu css:llä ryyditettynä:
Tyylikäs sivu
body {
background-color : #FFE4C4;
font-family : Arial, Helvetica, sans-serif;
background-image : url(http://www.suomi24.fi/img/kes.gif);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : right bottom;
}
a:link {
color : #4169E1;
text-decoration : none;
}
a:hover {
color : #1E9000;
text-decoration : underline;
}
a:active {
color : Fuchsia;
text-decoration : underline;
}
a:visited {
color : #FF1493;
text-decoration : line-through;
}
Tässä pari linkkiä:
suomi24.fi
jippii.fi
html-opas
sfnet.viestinta.www - VUKK
Tämä foorumihan tekee kaikenlaista ennalta-arvaamatonta koodiin.
esim.
suomi24.fi
pitäisi tietenkin olla niin että lainausmerkit on MYÖS osoitteen perässä (tietenkin lainausmerkit pitää myös sulkea). Tämä foorumi jättää näköjään toisinaan omavaltaisesti merkkejä pois.
eli näin pitäisi olla:
"Tämä foorumihan tekee kaikenlaista ennalta-arvaamatonta koodiin."
Niinpä. Meinaa kyllä välillä hihat palaa noiden mukavien "ominaisuuksien" kanssa.
"Tämä foorumi jättää näköjään toisinaan omavaltaisesti merkkejä pois."
Tämä foorumi ilmeisesti tunnistaa kaikki http://-alkuiset sanat linkeiksi. No ei se mitään, mutta kun tuohon ominaisuuteen liittyy pieni bugi, joka hävittää aina yhden merkin linkin perästä, olipa se merkki mikä tahansa. (Tässä tapauksessa välilyönti.)
"(Tässä tapauksessa välilyönti.)"
No katsos perhana. Välilyönti katosi kyllä siinä "preview"-sivulla, mutta lopulliseen viestiin se näemmä taiottiinkin jostain takaisin.