Länkar och CSS

2 svar · 236 visningar · startad av Virrdo 1 okt. 2002

VirrdoMedlem sedan okt. 2001152 inlägg

Trådstart1 okt. 2002 17:48#1

Jag har en tabell med diverse celler. I varje cell finns en länk och till denna länk hade jag tänkt att bakgrundsfärgen på cellen ska ändras när man trycker på länken, hur gör jag detta? Skriv gärna in flera alternativ. Har själv försökt, men utan godtyckligt resultat...

DinoMedlem sedan sep. 20011 914 inlägg

1 okt. 2002 18:11#2

Så här kanske:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function color(vilken,bla){
	//document.write(vilken,bla)
	document.getElementById(vilken).style.backgroundColor = bla
}
//-->
</script>
</head>
<body>
<table border="1" width="200">
<tr>
	<td id="one"><a href="javascript:void(0)" onClick="color('one','red')">Röd</a></td>
	<td id="two"><a href="javascript:void(0)" onClick="color('two','blue')">Blå</a></td>
	<td id="three"><a href="javascript:void(0)" onClick="color('three','green')">Grön</a></td>
	<td id="four"><a href="javascript:void(0)" onClick="color('four','purple')">Lila</a></td>
</tr>
</table>
</body>
</html>

mikkeXMedlem sedan aug. 2002477 inlägg

1 okt. 2002 20:18#3

Om du vill låta bli att använda javascript (eftersom detta är postat i html/css forumet ), så kommer här en ren css-lösning:

<style type="text/css">
.box {
background:#333;
border:1px solid #000;
width:200px;
color:#000;
padding: 5px;
text-align:center;
}
.box a
{
display: block;
}
.box a:hover
{
background:#cccccc;
color:#000;
width:100%;
}
</style>

Och på sidan:

<table>
<tr>
<td class="box">
<a href="lank.htm">Min länk</a>
</td>
</tr>