[HTML][CSS] Zmiana obrazka Opcje

[adam882]

Witam

Rozwiązanie problemu może okazać się wręcz banalne. Posiadam dwa obrazki - a.gif i b.gif Pod po kliknięciu na a.gif otwiera się odsyłacz. Chciałbym zrobić, aby po najechaniu myszką na obrazek a.gif - zamienił się na b.gif (ma być to efekt podświetlenia buttonu pod nagłówkiem). Widziałem takie rozwiązania w <ul><li></li></ul>, lecz jedynie w przypadku, kiedy plik graficzny stanowi tło dla odsyłacza tekstowego w <li>.

[Daiquiri]

Nie bardzo rozumiem... jeżeli to jest link to skorzystaj z hover.

[adam882]

Mam przykładowo <a href="index.html"><img src="img/buttony/strona-glowna.gif" alt="" /></a> i po najechaniu myszką na ten link dla obrazku w momencie najechania, obrazek zmienia się na drugi, wybrany - tworząc efekt podświetlenia.

Ten post edytował adam882 16.12.2009, 20:05:37

[tog]

daj jako tlo albo przez js
inaczej nei zrobisz

a.button {
display: block;
width: 100px;
height: 200px;
background: url('czarna_kupa.png');
}

a.button:hover {
background: url('brazowa_kupa.png');
}

pozniej
<a class="button"></a>

nie musisz nic wpisywac pomiedzy <a> a </a>

[john_doe]

potrzebujesz obrazka który jest taki sam jeden pod drugim, tylko ten niżej jest z jakimś odcieniem (mój przykład pokazuje obrazek height 46 px, robisz wiec obraz dwa razy większy a wnim jakby dwa te same ale ten drugi o innym odcieniu np ten dolny -> nie wiem czy mnie dobrze tutaj zrozumiesz
ogólnie tym kodem otrzymasz cos takiego jak tutaj menu na gorze
http://helion.pl/
zobacz taki CSS

[HTML] pobierz, plaintext 
#main-menu {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}
 
#main-menu li {
	float: right;
	padding: 0;
}
 
#main-menu li a {
	float: left;
	height: 46px;
	position: relative;
	overflow: hidden;
}
 
#main-menu li a:hover {
	border-width: 0;
}
 
#main-menu li a:hover img {
	position: relative;
	top: -46px;
}
[HTML] pobierz, plaintext 

i potem np cos takiego

[HTML] pobierz, plaintext 
<div id="menu">
<ul id="main-menu">				
		<li>
			<a href="#">
				<img src="tutaj path to img" alt="alt" border="0"/>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="tutaj path to img" alt="alt" border="0"/>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="tutaj path to img" alt="alt" border="0"/>
			</a>
		</li>
	</ul>
</div>
[HTML] pobierz, plaintext