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

Kapcsolódó bejegyzések:

A cikket beküldte: Harder (http://blog.harder.hu)

1 hozzászólás

  1. blackfriar says:

    Csak annyival szeretném kiegészíteni a dolgot, hogy ha a div abszolút pozicionált, akkor csak FF alatt működik a dolog.

Szólj hozzá
a Kattintható DIV c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>