ugrás a tartalomhoz

Eseménykezelés CSS-ben

Brad Pitt · 2005. Júl. 29. (P), 17.46
Hahó!

A CSS eseménykezeléséről szeretnék némi infót! Hogyan lehet ezt használni, mondjuk képek esetében? Gondolok itt mondjuk az onMouseOver-re, vagy az onClick-re.
Vagy ha tud valaki valami jó linket, az is jöhet!

Köszönöm!!
 
1

JS

kisstoth · 2005. Júl. 29. (P), 19.18
Szerintem ezt csak JavaScripttel tudod megoldani.

Ha mondjuk rolloveres képet szeretnél készíteni, akkor:

<div onclick="OnClickMenu('link.html');" onmouseout="OutMenu(this);" onmouseover="OverMenu(this);" class="elsokep" title="Menü 1.">
</div>
JS része:

function OutMenu(item) {
  item.className="elsokep";
}

function OverMenu(item) {
  item.className="masodikkep";
}

function OnClickMenu(item) {
  location.href=item;
}
CSS részében pedig meghatározod a DIV paramétereit + az "elsokep" és a "masodikkep" osztálynak a háttérképét.

Remélem nem írtam el semmit. :)

Üdvözlettel,
Kiss-Tóth Marcell
3

Link az link legyen!

Jano · 2005. Aug. 2. (K), 10.51
Ez a megoldás ne terjedjen már el! Ami link az legyen link es nem eseménykezelővel(onClick) kell a linkelést megoldani!

* Ezt nem tudja először is követni a Google.
* Ha valakinek le van tiltva a Javascript (kb 10%) szintén bes*?pta.
* Nem lehet új fülre nyitni!

RollOver-es gombot CSS-sel is simán meg lehet oldani!

* Az alap:
Fast Rollovers Without Preload

* Még lehet fokozni is:
Akár egyszerre több kép is cserélhető

* Bonyolult alakzatokkal is:
Sprites

* Teljes kép cserével:
Navigation Matrix
4

+1

kgyt · 2005. Aug. 2. (K), 11.05
--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
5

Ok

kisstoth · 2005. Aug. 2. (K), 12.17
Ok, +1 :)

Üdvözlettel,
Kiss-Tóth Marcell
2

inkább js

connor · 2005. Júl. 31. (V), 18.14
Az egyes események esetén ezekkel selectorok-kal lehet módosítani a megjelenést:
:active
:hover
:focus

http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

--
connor