Forum PHP.pl > [wolontariat][HTML][CSS] Kod :)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [wolontariat][HTML][CSS] Kod :)

Forum PHP.pl > Inne > Giełda ofert > Poszukuję

Aras9

20.11.2009, 08:28:20

[html]Witam jestem nowym użytkownikiem więc nie miejcie mi nic za złe jeżeli wybrałem zły dział itp.

Uczę się dopiero html oraz css a wiadomo w praktyce się szybciej nauczę ;> Jeżeli ktoś mógł by mi pomóc i napisać kod w css i html
Chce umieść w wybranym prze zemnie miejscu na stronie przyciski które będą przenosić do innego pliku na dysku chcę aby ten przycisk był obrazkiem oraz aby zmieniał obrazek jeżeli się na niego najedzie i kliknie. Dzięki z góry pozdrawiam

INProgress

20.11.2009, 14:34:06

[HTML] pobierz, plaintext 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
 
	#menu1, #menu2 {
		width: 80px;
		height: 80px;
		float: left; }
 
	#menu a.link {
		display: block;
		width: 50px;
		height: 50px;
		background: url('#Sciezka_do_obrazka1') no-repeat; }
 
	#menu a.link:hover {
		background: url('#Sciezka_do_obrazka1_po_najechaniu') no-repeat; }
 
	#menu a.link:visited {
		background: url('#Sciezka_do_obrazka1_po_odwiedzinach') no-repeat; }
 
	#menu a.link2 {
		display: block;
		width: 50px;
		height: 50px;
		background: url('#Sciezka_do_obrazka2') no-repeat; }
 
	#menu a.link2:hover {
		background: url('#Sciezka_do_obrazka2_po_najechaniu') no-repeat; }
 
	#menu a.link2:visited {
		background: url('#Sciezka_do_obrazka2_po_odwiedzinach') no-repeat; }
 
	</style>
</head>
<body>
<div id="menu">
	<div id="menu1">
		<a href="#Link1" class="link" alt="#Tekst alternatywny" title="#Tytuł_linku"></a>
	</div>
 
	<div id="menu2">
		<a href="#Link2" class="link2" alt="#Tekst alternatywny" title="#Tytuł_linku"></a>
	</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Przykładowe rozwiązanie, wrzucam wszystko w jednym pliku przy założeniach że ma to być poziomo oraz obrazki mogą mieć różne rozmiary. Krótki opis:
1. Pomiędzy <style></style> masz definicję styli. Możesz to przerzucić do osobnego pliku *.css.
2. #.. oznaczyłem miejsca w których musisz coś zmienić tak, żeby z Twoim się zgadzało.
3. Pamiętaj, żeby dobrze zdefiniować ścieżki do obrazków które mają być wyświetlanie (odpowiada za to background: url('tu_jest_sciezka_do_obrazka');
4. #menu a.link, #menu a.link2 to domyślny wygląd. Klasy z dodatkiem :hover to wygląd po najechaniu, a :visited to obrazek który pojawia się już po odwiedzeniu. Atrybuty width i height odpowiadają za szerokość i wysokość obrazka. (Skoro się uczysz, dobrze by było żebyś to poznał).
5. Możesz dodwać kolejne obrazki robiąc kolejną klasę zawierającą inne tło.
6. Oczywiście można to zrobić jeszcze w inne sposoby jak np. połączyć wszystkie obrazki w jeden i później zmieniać tylko atrybut background-position lub inne - ale chciałeś przykład to proszę - o innych poczytasz lub wpadniesz na pomysł sam

On-line: http://in-progress.eu/porady/obrazkowe_menu/obrazki.html

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.