Minulla on koodi, jonka on tarkoitus laittaa kuvan reunojen väriksi kullan kun sen päälle laittaa hiiren. Kuvan reunat ovat kuitenkin pyöreät, mutta reunat eivät. Kuinka saisin ongelman korjattua?'
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chat</title>
<style type="text/css">
div.img img
{
border: 3px solid #ffffff;
}
div.img a:hover img {
border: 3px solid gold;
border: moz-radious: 5px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<h2>Tule nyt chattiin!</h2>
<br><br>
<div class="img">
<a href="chat.html">
<img src="chat_button.jpg">
</a>
</div>
</body>
</html>Ainut keino on piirtää kuvaan ne reunat ja vaihtaa kuva sitten kun hiiri on päällä. Sekin sujuu CSS:llä kun käytät background-imagea.
Olen kyllä oppinut sen, että ohjelmoimalla saa aikaan kaiken joka hyvin järkevällä tavalla tai sitten jollain typerällä nippaskonstikeinolla, joista minuntietääkseni yleisin on position:absolute. Tuo paint muokkaus minullakin kävi muuten mielessä...
Vaikkakin pakko myöntää että käytin nyt sitten lopulta tuota 2 kuvan kikkaa...
CSS ei ole ohjelmointia. Kuitenkin:
border: moz-radious: 5px;
En tiedä mistä tuo on kaivettu, mutta sen pitäisi olla:
border-radius: 5px;
Lisäksi jos haluaa tukea vähän vanhemmille selaimille, niin niitä saakin olla aimo läjä:
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
Mutta nämä saattaa antaa vielä vajaita, bugisia lopputuloksia. Esim. Chrome ja Safari (webkit) ei ainakaan vielä joissakin lähiversioissaan tukeneet kulmakohtaisten arvojen määrittämistä.
Siksitoisekseen kaikille noista ei taida olla minkäänlaista tukea vielä olemassa, esim. -ms- tuskin vaikuttaa mihinkään. Se saattaa kuitenkin olla hyödyllinen, mikäli jaksaa nähdä vaivaa tutustua IE:tä varten tehtyihin border-radius -kikkoihin...
Sanoisitko vielä, että onko tuota kuvaan mahdollista laittaa linkin reunaksi pyöristystä? Tällä hetkellä ei taida palvelin toimia kun olen jossaki vanhassa kaupan romussa.
Kuvan ympärillä olevaan linkkielementtiin saa CSS:llä pyöristyksen, joo.
Kuvaelementtiin saa pyöristyksen, jos sille antaa esim. taustavärin ja paddingia tai vaihtoehtoisesti borderin.
Kuvaan itseensä ei kuitenkaan saa pyöristystä, kuva on aina nelikantikas. En tiedä onko tämä joku standardissa määritelty juttu vai ovatko selainten tekijät vaan päättäneet olla toteuttamatta asiaa, en ole tutkinut.
Tapa kiertää ongelma olisi määrittää pyöristys esim. span-elementille, jossa on oikea kuvan leveys ja korkeus ja kuva onkin elementin taustakuvana. Ympärillä olevalla linkkielementillä voisi olla oma pyöristys. Näin tarvittaisiin vain yksi kuva ilman kuvankäsittelijän taitoja, mutta kaikki selaimet eivät silti osaisi pyöristystä näyttää.
Kiitos.
Aihe on jo aika vanha, joten et voi enää vastata siihen.