Kattintható DIV

A minap belefutottam egy egyszerű problémába: kattintható kell tenni egy DIV teljes területét. A megoldás egyszerű, remélem lesz akinek megspórolok vele – ha mást nem – pár percet.

A DIV-re egy onclick eseményt kell rakni az alábbi módon:

1
2
3

<div id="doboz1" onmouseover="this.style.cursor='pointer';" onclick="window.location.href='http://www.tutorial.hu'">
	Ez itt egy 200x150px-es div belső tartalma
</div>

az id=”doboz1″-hez tartozó CSS jelen esetben ennyi:

1
2
3
4
5
6

	#doboz1 {
		width: 200px;
		height: 150px;
		border: 1px solid black;
		background-color: #CCCCCC;
		}

Ennek eredményeképpen kapunk egy szürke alapterületű, fekete keretes DIV-et benne némi szöveggel és az egész DIV területe kattintható lesz. A kattinthatóságért a már említett onclick rész felel, az onmouseover=”this.style.cursor=’pointer’;” pedig azért, hogy a kattintható terület fölé vitt egérmutató átváltson kézre.

Ezt persze a későbbiekben lehet még cifrázni, pl. az alábbi kód az egérmutató DIV fölé vitelére a DIV háttérszínét fogja megváltoztatni zöldre:

1
2
3

<div onmouseover="this.style.backgroundColor='#B2DB11'; this.style.cursor='pointer';" onclick="window.location.href='http://www.tutorial.hu'" onmouseout="this.style.backgroundColor='#FFFFFF'">
	E tartalom körülötti DIV is kattintható és még a színét is változtatja
</div>

kattinthatodiv.html minta

Dzsoco egy apróbb kiegészítést írt a Fórumba, köszönjük neki! – BlackY