Skocz do zawartości
ra-v

Profesionalna Stronka

Rekomendowane odpowiedzi

Witam, właśnie zaczynam tworzyć moją pierwsza profesionalą stronke.

I mam pytanie jak zrobic coś takiego, że jest buttom z napisem "mecz" i tło tego buttoma jest niebieskie, a gdy nakieruje myszką na ten buttom chce aby tło było pomarańczowe,

Podajcie mi przykładowy kod jesli mozna, nie chce aby ktos odwalał za mnie robotę , prosze tylko o pomoc, bede wdzięczny.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Witam, właśnie zaczynam tworzyć moją pierwsza profesionalą stronke.

I mam pytanie jak zrobic coś takiego, że jest buttom z napisem "mecz" i tło tego buttoma jest niebieskie, a gdy nakieruje myszką na ten buttom chce aby tło było pomarańczowe,

Profesjonalne strony nie zawieraja niebieskich przyciskow zmienajacych kolor na pomaranczowy.. toz to ochydne przeciez.

 

Co do kodu to moze byc np. tak:

<input type="button" class="button" onmouseover="this.className = 'button over'" onmouseout="this.className = 'button'" .... />

I teraz definiujesz sobie w stylach:

.button {  background-color: blue;}.button.over {  background-color: orange;}

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Skoro państwo sobie piszecie o buttonach,

to zapytam:

Jak zmienić/zapanować nad wyglądem buttona (kształt, czcionka, tło...)?

Zaraz ktoś napiszę: poszukaj w googlach, ale prawda jest taka, że w kursach html'a są zanikające ramki, ale o wyglądzie przycisków nic nie ma zazwyczaj poza standardową informacją, że jest coś takiego jak przyciski...

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Wygląd przycisku to kwestia grafiki. onmouseover i onmouseout jak wyżej, a jaką grafikę załadujesz to Twoja sprawa.

Edytowane przez Excray

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Może to pomoże:

 

http://www.javascriptkit.com/howto/button2.shtml

 

Co do samego kształtu, to wątpię, gdyż jest to kontrolka systemowa. Kształt przycisku zależy od kształtu tych w systemie (jest taki sam). Widać to najlepiej, gdy się wyłączy style - przyciski zmieniają się z okrągłych (style XP) na zwykłe, kanciaste (jak w Windows 9x/2000).

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Może to pomoże:

 

1898977[/snapback]

Mniej więcej o takąż odpowiedź mi chodziło, mniej więcej.
No to mniej czy więcej?

Cała filozofia z buttonami sprowadza się do kilku opcji css:

  • border (border-top, border-left, itd.): [grubość] [styl] [ew. kolor], gdzie:

    [grubość] = cyfra oznaczająca liczbę pikseli (Np. 2px)

    [styl] = solid, dashed, dotted, groove, inset, outset i co tam jeszcze jest. Sprawdź co jak działa.

    [kolor] = wiadomo - słownie albo hex (#rrggbb), albo rgb(0-255,0-255,0-255)

  • font-family: [nazwa czcionki]

  • font-size: rozmiar (px- piksele, albo pt - punkty)

  • color: kolor (rgb, słownie, hex. - kolor tekstu na buttonie). jeżeli border nie będzie miał zdefiniowanego koloru, będzie to także jego kolor.

  • background-color: kolor tła (możliwości jak wyżej)

  • width: szerokość (piksele, procenty)

  • height: wysokość (j.w)
Jest tego może więcej, ale mogły mi wylecieć z głowy niektóre rzeczy ;) Te są najważniejsze, bo najczęściej używane. Poniższy przykład po wklejeniu w kod jakiejś strony da nam ładny duży na całą stronę przeglądarki przycisk, z czerwonym tekstem i czerwoną ramką, który po najechaniu (nie w IE :twisted: ) będzie miał biały tekst i białą ramkę. Oczywiście w tle będzie logo Tweaka ze skinu darkness ;)

<style type="text/css">.button{	color: red;	border: 1px solid;	font-family: arial;	background-image: url("http://forum.purepc.pl/style_images/darknessv2/logo4.gif");	font-size: 20px;	width: 100%;	height: 100%;}.button:hover{	color: white;	border: 1px solid;	font-family: arial;	font-size: 20px;	width: 100%;	height: 100%;}</style><input class="button"type="button" name="b1" value="button całkowicie testowy" />

.button.over {  background-color: orange;}
With all the respect, sir ;)

nie .over, tylko :hover :]

 

A tutaj coś o zmianie samego kształtu buttona w możliwie najprostszy sposób.

http://sophie-g.net/jobs/css/e_buttons.htm

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

With all the respect, sir ;)

nie .over, tylko :hover :]

With all the respect, sir ;)

Czytaj calego posta a nie tylko wyrywkowo :P

 

Zauwaz, ze wyzej podalem tez JS, ktory podmienia na onmouseover/onmouseout odpowiednio klase, tak zeby to dzialalo rowniez w IE :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

a ja mam bardzo ważne pytanie. Jak zrobić formularz(znaczy formularz zrobić umiem) na koncu którego bedzie wyślij i od razu ze stronki sie wysyła.

Zrobiłem coś takiego za pomocą opcji mailto: ale to mi chciało wysyłać za pomocą outlooka a ja nie chce z outloocka tylko od razu ze stronki.

Prosze o pomoc...

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

dobra mam zrobione cos takiego :

Kod pliku kontakt.html

<html> <head>  <title>   Test formularza  </title> </head> <body> <form action="kontakt.php" method="GET">  Imie: <input type=text name="imie"/><br/>  Nazwisko: <input type=text name="nazwisko"/><br/>  Prosze o fakture do zamówienia: <input type=checkbox name="faktura"/><br/>  Chce zamówic:<br/>  <input type=radio name=zamow value="kola"/>Coca-cole<br>  <input type=radio name=zamow value="fanta"/>Fante<br>  <input type=radio name=zamow value="sprite"/>Sprite'a<br>  <input type=submit value="Wyslij"/>  </form> </body></html>
Zawartośc pliku kontakt.php

<html> <head>  <title>   Wyniki  </title> </head> <body>  Imie: <?php echo $_GET['imie']?><br>  Nazwisko: <?php echo $_GET['nazwisko']?><br>  Faktura: <?php echo ($_GET['faktura'] == 'on' ? 'Tak' : 'Nie')?><br>  Zamówienie: <?php switch($_GET['zamow']){   case "kola":	 echo "Coca-cola";	 break;   case "fanta":	 echo "Fanta";	 break;   case "sprite":	 echo "Sprite";	 break;   }?> </body></html>
I teraz jeszcze gdybym chciał żeby to szło mi na maila to co musze dodać ? (domyslam sie że to coś w pliku kontakt.php....

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Można tak zrobić ale znacznie spójniej będzie gdy wszytko znajdzie sie w jednym pliku powiedzmy kontakt.php. Wtedy formularz będzie ustawiał zmienną. Powiedzmy zmienna będzie nazwą przcisku, np załóżmy że chodzi o rejestrację jakąś tak jak w moim kodzie poniżej.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /><title>Untitled Document</title></head><?php	if(isset($_POST['register']))	{		 		// ten warunek jest wazny od niego zalezy czy zmienna jest ustawiona przez przycisk		$login = strip_tags(trim($_POST['login'])); 		$email = strip_tags(trim($_POST['email']));		$password = md5(trim($_POST['password']));		// tu jakieś sprawdzanie czy podane dane są poprawne 		// tu jest jakis zapis do bazy danych...		$temat = "Zostales zarejstrowany na ...";		$url = "http://".$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF'])  ;										   	 						$twojedane = "Twoje dane potrzebne do zalogowania na {$fset['www_name']}\r\n\r\n";		$loginpassword = "login: $login\r\nhas³o: {$_POST['password']}\r\n\r\n"; 		$zapraszamy = "Zapraszamy na $url !!!.";	 	   	$send = @mail($email, $temat, $twojedane.$loginpassword.$zapraszamy, 'From: '.$fset['email']); 				if($send) echo "Wysłano maila";		else	  echo "Nie wysłano maila";			 }?><form name="form1" method="post" action="index.php?act=reg">  login  <input name="login" type="text" class="forminput" id="login" size="25" maxlength="32" value="<?php echo $_POST['login']; ?>">  email  <input name="email" type="text" class="forminput" id="email" size="25" maxlength="100" value="<?php echo $_POST['email'] ?>">  password  <input name="password" type="password" class="forminput" id="password" size="25" maxlength="32"value="">  <input name="register" type="submit" class="button" id="register" value="Zarejestruj mnie"></form></body></html>

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dołącz do dyskusji

Możesz dodać zawartość już teraz a zarejestrować się później. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

Ładowanie


×
×
  • Dodaj nową pozycję...