Saako taulukosta linkkiä html:ssä? Kun tarkoituksena olisi muuttaa javascriptillä taulukon taustaväriä sillon kun hiiri on sen päällä ja tehdä siitä linkki. Onnistuuko?
yritä käyttää noita javascript-eventtejä.
<table onMouseOver="vaihdaTaustavari(this,0)" onMouseOut="vaihdaTaustavari(this,1)">
edit:
tää *saattaa* toimia... täysin testaamatonta mutua (taas kerran)
stylet = new Array( "highlight", "plain" );
function vaihdaTaustavari(el, ind) {
el.className = stylet[ind];
}ja sitten pitää tietty olla vastaavat css-määritykset noille highlighted ja plain sanoille tyyliin
<style type="text/css">
.highlight { background-color: yellow; }
.plain { background-color: white; }
</style>Testattu toimivaksi... (kerrankin)
<html>
<head>
<style type="text/css">
.highlight { background-color: yellow; }
.plain { background-color: white; }
</style>
<script language="JavaScript">
stylet = new Array( "highlight", "plain" );
function chbg(el, ind) {
el.className = stylet[ind];
}
</script>
</head>
<body>
<table onMouseOver="chbg(this,0)" onMouseout="chbg(this,1)" class="plain">
<tr>
<td>F.u.b.a.r.</td>
</tr>
</table>
</body>
</html>Sori, kämmäsin, tarkoitin solua. Taustavärin vaihtaminen onnistuisi vaikkapa näin:
<td bgcolor="#FFFFFF" onmouseover="this.style.backgroundColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#000099'
Tai sitten edellä ehdoitettujen tapojen mukaisesti (mikä voisi olla parempi), mutta miten solusta saisi linkin?
onClick -eventiä käyttämällä varmaankin. Hiiren kursori tosin pitää muuttaa manuaalisesti.
Määritetään css:stä cursor-style: hand; vai?
esim niin.
kokeilin tehdä myös näin:
<a href="#">
<table>
<tr><td>This is a table</td></tr>
<tr><td>And it is a href</td></tr>
</table>
</a>ja se näyttäisi toimivan.
edit: muotoilua
lainaus:
kokeilin tehdä myös näin:
<a href="#"> <table> <tr><td>This is a table</td></tr> <tr><td>And it is a href</td></tr> </table> </a>
Eipä ole syntaktisesti korrektia. Lievästi provosoiden selaimessa on bugi, jos se koko taulukon noin tekee linkiksi.
Hyvää tapaa tehdä kokonaisesta taulukosta linkki ei ole, javaskriptillä voi toki sanoa
<table onclick="location.replace('http://munosote.example');">mutta silloin pitää muistaa huolehtia, että jossain on ihan tavallinenkin linkki meille javaskriptittömille.
tai
<table onclick="document.location='http://domain.com'">
en sitten tiedä kumpi on parempi.
juu niinhän mä tossa vähän ylempänä kirjoittelinkin. huvikseni vaan kokeilin onnistuuko taulukon "oikea" linkittäminen. mozillassa se ainakin toimi. en kokeillut muussa.
Nyt tulikin sitten lisää mutkia matkaan. Tein scriptin joka vaihtaa solun vieressä olevan kuvan toiseksi tällä tapaa:
imageen: id="kuva"
sitten soluun:
onmouseover="kuva.src='kuva2.png'" onmouseout="kuva.src='kuva1.png'"
Tässä probleemana on, että tämän jälkeen en voi enää vaihtaa solun taustaväriä samalla keinolla, siis tällä tapaa:
onmouseover="this.style.backgroundColor='#FFFFFF'" onmouseout="this.style.backgroundColor='#000099'"
Tuo NiKC:in "fubar"- juttu näyttäisi toimivan muuten, mutten saa sitä toimimaan omilla sivuillani.
EDIT: viilailua
lainaus:
Tässä probleemana on, että tämän jälkeen en voi enää vaihtaa solun taustaväriä samalla keinolla
Noihin voi tunkea usemman lausekkeen, kun erottelee ne puolipisteellä.
onmouseover="kuva.src='kuva2.png'; this.style.backgroundColor='#FFFFFF'" onmouseout="kuva.src='kuva1.png'; this.style.backgroundColor='#000099'"
tuon puolipisteellä erottelemisen lisäksi sen voi tehdä funkkarilla. siinä mun postaamassa koodissa oli esimerkki siitä. niin säilyy koodi imho selkeämpänä ja helpommin hallittavana.
// tähän tyyliin
onMouseover="setBgImg(id1, id2)" onMouseout="restoreBgImg(id1, id2)"
// tai näin jos tykkää tästä enempi
onMouseover="setBg(id1); setImg(id2)"
// tai näin jos on ihan kieroutunut, ja näitäkin näkee ;)
onMouseover="setBgForThisCellAndSwapImgInTheNextCell(idForCellToChangeBackground, idForImageToBeSwapped)"
// ja kun solussa on se mouseover niin paremetrina voi lähettää
// this:in jolloin attribuuttien muokkaaminen on näin helppoa
onMouseover="fiddleWithMyAttributes(this)"
function fiddleWithMyAttributes(foo)
{
foo.attribute = bar;
}
// ja id:llähän se menee (uudemmilla selaimilla) näin
function fiddeDiddleDooBadem(id)
{
document.getElementById(id).attribute = foo;
// tai
foo = document.getElementById(id);
foo.attribute = bar;
}eikä siinä vielä kaikki(tm)... vaan koodian voi näin myös helpommin uusiokäyttää ;D
syntaksivirheiden esiintymisen puutteesta ei mitään takeita, eikä myöskään koodin siirrettävyydestä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.