ugrás a tartalomhoz

CSS rollover menü képekből

nexuspolaris · 2006. Dec. 24. (V), 02.15
CSS rollover menüt akarok létrehozni képekből, a képek különböző szélességűek lennének, mivel a rajtuk levő feliratok amelyek a linkekre utalnak is változó szélességűek. Kérdésem az lenne, hogy a:hover tulajdonságot csak szővegre lehet-e alkalmazni vagy képekre is. Az én verziómban ugyanis nem jelenik meg egérmutató a kép fölött.
<body>
<div id="menu">
	<div  class="button" id="m1"></div >
	<div  class="button" id="m2"></div >
	<div  class="button" id="m3"></div >
	<div  class="button" id="m4"></div >
	<div  class="button" id="m5"></div >
	<div  class="button" id="m6"></div >
</div>
</body>
#m1, #m2, #m3, #m4, #m5, #m6 {
	display: inline;
	margin: 0;
	padding: 0;
	height: 50px;
	float: left;
}
.button a {
	display:block;
	background-repeat: no-repeat;
}
.button a:hover {
	background-position: 0 -100;
}
	

#m1 {
	background-image: url(../img/menu/m1.jpg);
	width: 80px;
}
#m2 {
	background-image: url(../img/menu/menu_09.jpg);
	width: 93px;
}
#m3 {
	background-image: url(../img/menu/menu_10.jpg);
	width: 112px;
}
#m4 {
	background-image: url(../img/menu/menu_11.jpg);
	width: 80px;
}
#m5 {
	background-image: url(../img/menu/menu_12.jpg);
	width: 135px;
}
#m6 {
	background-image: url(../img/menu/menu_13.jpg);
	width: 100px;
}
‹ Szám azonosítóra nem működik a getElementById()? CSS div tartalom alá ›
 ■
1

Cikk erről

Jano · 2006. Dec. 24. (V), 03.34
Ajánlom az írásomat erről a problémáról: Szöveges menü képessé alakítása lépésről lépésre

Jó tanács:
Használd ki a CSS kiválasztók környezetfüggő lehetőségét! Pl nem kell minden egyes belső DIV-nek button classt adni, tudsz rájuk úgyis hivatkozni, hogy 

#menu div {
}
Ez minden olyan DIV elemre vonatkozni fog, ami a menu id-jű elemen belül van (bármilyen mélységben).

Mértékegységeket mindig tedd ki!
2

Nem emlékszem

Sulik Szabolcs · 2006. Dec. 25. (H), 19.10
Nem emlékszem, hogy hol olvastam (egy neves külföldi fickó írása volt magyarra fordítva). Szóval a lényeg, hogy veszed a képet és a rollover (pl: 150x50-es kép esetén); ezeket összerakod egyetlen képpé (150x100) úgy, hogy az alap kép legyen felül az új képen, a rollover pedig alul. (Erre azért van szükség, hogy a villogást elkerüljük).
Majd létrehozod a menüdet. Ajánlanám inkább az <ul><li> vagy <menu><li> párosot a divek helyett.

<ul id="menu">
<li id="m1"><a href="">blabla</a></li>
<li id="m2"><a href="">blabla</a></li>
<li id="m3"><a href="">blabla</a></li>
<li id="m4"><a href="">blabla</a></li>
</ul>
A dolog lényeg, hogy a <li> elemek méretét beállítod az kép méretére, hátterének pedig veszed a képet. Az <a> tagok méretét hozzáigazítod a li elemekhez, az a:hover hátterének pedig a kép alsó részét veszed. Szóval:

/* fontos a display: block; */
li, li a { display: block;
width: 150px; height: 50px; }

/* beállítod a li hátterét*/
li { background: url('backgroundpicture.jpg') top left no-repeat; }

/* beállítod az a:hover hátterét*/
li a:hover { background: url('backgroundpicture.jpg') 0 -50px no-repeat; }
Nagyon aranyos trükk. Jelentősen gyorsabb és rövidebb, mint a Dreamweaver féle MM_jfdlskfs függvények (ráadásul js sem kell hozzá).

Innentől kezdve a #mX elemeket oda igazítod ahova akarod. Ha a szélességük különböző, akkor pedig nem adod meg a fent látható módon (figyelem, a magasság akkor is kell), hanem azt külön #mX alapján (nem kell aggódni, mivel az <a> blockos elem lett, ezért mindig kitölti a <li>-t).