Un cordiale saluto a tutti.

Ho un quesito:
Perchè così funziona
codice:
<html>
<head>
<style type="text/css">
.tabella {
	background-image:url(background.jpg);
}

.riposo {
	background: transparent;
}
	
.attivo {
	background-image:url(backgraund2.jpg);
}

</style>
</head>
<body>
<td class="riposo" onmouseover="this.className='attivo'" onmouseout="this.className='riposo'" width="33%" height="150">
</body
</html>
e così non funziona
codice:
<html>
<head>
<style type="text/css">
#tabella {
	background-image:url(background.jpg);
}

#riposo {
	background: transparent;
}
	
#attivo {
	background-image:url(backgraund2.jpg);
}

</style>
</head>
<body>
<td id="riposo" onmouseover="this.idName='attivo'" onmouseout="this.idName='riposo'" width="33%" height="150">
</body
</html>
Cambiando solo "class" con "id"

Grazie