[JavaScript][PHP]Zdarzenia onmouse i onclick Opcje

[pandaci]

Witam

Chcę zrobić tabelkę która standardowo ma kolor1 po najechaniu ma kolor2 a po kliknięciu ma mieć kolor3 i w tym kolorze zostać póki nie zostanie kliknięta druga tabelka pod spodem.

onmouseover i onmouseout bez problemu w momencie kliknięcia też zmienia się kolor ale po zjechaniu z elementu wraca do poprzedniego.

Jak temu zapobiec?

[PHP] pobierz, plaintext 
function ustaw(t,co) 
{
var test = document.getElementById("tabela1");      
if(co==0)
{
test.className = "table";
}
if(co==1)
{
test.className = "tableHover";
}
if(co==2)
{
test.className = "tableClick";
}
}
 
<table width="282" height="52" border="0" class="table"  id="tabela1"
	onmouseover="ustaw(this,1);"
	onclick="ustaw(this,2);"
	onmouseout="ustaw(this,0);">
 
<table width="282" height="52" border="0" class="table"  id="tabela2"
	onmouseover="ustaw(this,1);"
	onclick="ustaw(this,2);"
	onmouseout="ustaw(this,0);">
 
[PHP] pobierz, plaintext 

Jak zatrzymać kolor po zdarzeniu OnClick?

A jak możnabyłoby to rozwiązać jeżeli tabelka by tworzyła się w pętli?

[pandaci]

co do kliknięcia to musisz zrobić tak, że po kliknięciu najpierw przywraca tabelkom klasę, reprezentującą stan przed kliknięciem i potem ustawia klasę aktywną dla tabelki klikniętej.

Mógłbyś opisać na moim przykładzie, gdyż próbuje ale coś nie wychodzi mi tak jak powinno.

[tehaha]

Mógłbyś opisać na moim przykładzie, gdyż próbuje ale coś nie wychodzi mi tak jak powinno.

przeanalizuj sobie ten prosty przykład(skopiuj kod, zapisz do pliku i odpal):

[HTML] pobierz, plaintext 
<style type="text/css">
table
{
	border: solid #000000 1px;
	width: 200px;
	height: 100px;
}
table:hover
{
	border: solid #ff0000 1px;
}
table.active
{
	border: solid #ff00aa 2px;
}
</style>
<script type="text/javascript">
function activate(id)
{
	for(i=1;i<=3;++i)
	{
		document.getElementById('table_'+i).className = '';
	}
	document.getElementById(id).className = 'active';
}
</script>
<div>
	<table cellpadding="0" cellspacing="0" id="table_1" onclick="activate(this.id)">
		<tr>
			<td>Tabelka 1</td>
		</tr>
	</table>
</div>
<div>
	<table cellpadding="0" cellspacing="0" id="table_2" onclick="activate(this.id)">
		<tr>
			<td>Tabelka 2</td>
		</tr>
	</table>
</div>
<div>
	<table cellpadding="0" cellspacing="0" id="table_3" onclick="activate(this.id)">
		<tr>
			<td>Tabelka 3</td>
		</tr>
	</table>
</div>
[HTML] pobierz, plaintext 

1. standardowo tabelka ma obrys czarny
2. po najechaniu myszką - obrys czerwony
3. po kliknięciu - obrys pomarańczowy
- efekt po najechaniu myszką można łatwo ustawić przez css :hover
- co do kliknięcia to posługujemy się tu nadawaniem klasy .active, która reprezentuje stan aktywny, czyli ten z obrysem pomarańczowym, po kliknięciu na jakąś tabelę, wpierw pętlą for() usuwamy klasy przypisane do tych tabel, następnie dla tabeli klikniętej ustawiamy klasę aktywną

Ten post edytował tehaha 26.07.2010, 00:35:59