Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Formularz > type="image" zamiast submit, zamiana zwykłuch przycisków w formularzu na graficzne
Fixer
post
Post #1





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 24.10.2004
Skąd: TG

Ostrzeżenie: (0%)
-----

Witam, mam następujący problem.

Mam formularz, działa on dobrze pod IE7 i pod FF.
Ale gdy zamiast zwykłego przycisku
[HTML] pobierz, plaintext 
  1. <input type="submit" name="button" id="button" value="Submit" />
[HTML] pobierz, plaintext

chcę wstawić grafikę
[HTML] pobierz, plaintext 
  1. <input name="btn_wyslij" type="image" value="btn_wyslij" onfocus="blur()" 
  2. onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; 
  3. style.cursor='pointer'" onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" 
  4. src="images/btn/btn_wyslij_off.gif" alt="Wyślij" />
[HTML] pobierz, plaintext


to pod FF formularz działa dobrze a pod IE7 już nie (button wyślij już nie działa) (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Tak wygląda u mnie sprawdzanie czy przycisk został wciśnięty:
[PHP] pobierz, plaintext 
  1. <?php
  2. if (isset($_REQUEST["btn_wyslij"])) { 
  3. ...
  4. }
  5. ?>
[PHP] pobierz, plaintext


jak znowusz zrobię przycisk w ten sposób:
[HTML] pobierz, plaintext 
  1. <input name="btn_wyslij" type="submit" value="" style="border: 0; 
  2. background: url('images/btn/btn_wyslij_off.gif'); 
  3. background-repeat: no-repeat; margin-bottom: 4px; width: 69px; height: 21px;" 
  4. onfocus="blur()" onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; 
  5. style.cursor='pointer'" 
  6. onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" 
  7. src="images/btn/btn_wyslij_off.gif" alt="Wyślij" />
[HTML] pobierz, plaintext


to nie zmienia się grafika przycisku po najechaniu na niego myszką (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Jest jakiś sposób na rozwiązanie tego problemu?
Pozdrawiam.

Ten post edytował Fixer 27.08.2007, 23:48:20
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Fixer
post
Post #2





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 24.10.2004
Skąd: TG

Ostrzeżenie: (0%)
-----

hmm dobry pomysł sobieh (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
w międzyczasie wpadłem na coś równie ciekawego...

Jest to efekt rollover w css, znalazłem to tutaj, polecam: http://perfectionorvanity.com/2006/08/15/g...rmularzy-w-css/

Odpowiedni obrazek dla przycisku ściągnięcie z tąd: http://riddle.pl/-/xhtml/css-gfx-input/img2.png

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. </head>
  7. <head>
  8.  
  9. <style type="text/css">
  10. #image input, #submit input {
  11. 	display: block;
  12. }
  13.  
  14. #submit input {
  15. 	background: transparent url(btn_wyslij.gif) 0 0 no-repeat;
  16. 	border: none;
  17. 	cursor: pointer;
  18. 	height: 21px;
  19. 	max-height: 21px;
  20. 	padding-top: 40px;
  21. 	width: 69px;
  22. }
  23.  
  24. #reset input {
  25. 	background: transparent url(btn_wyczysc.gif) 0 0 no-repeat;
  26. 	border: none;
  27. 	cursor: pointer;
  28. 	height: 21px;
  29. 	max-height: 21px;
  30. 	padding-top: 40px;
  31. 	width: 88px;
  32. }
  33.  
  34. #submit input:hover, #reset input:hover {
  35. 	background-position: 0 -21px;
  36. }
  37.  
  38. #submit input:active, #reset input:active {
  39. 	background-position: 0 -42px;
  40. }
  41. </style>
  42.  
  43. </head>
  44.  
  45. <body>
  46.  
  47. <form id="formularz" name="formularz" method="post" action="">
  48. <table width="300" border="0" cellspacing="0" cellpadding="0">
  49.   <tr>
  50.     <td width="80" align="right">Imię:</td>
  51.     <td width="10" rowspan="2">&nbsp;</td>
  52.     <td><input name="imie" type="text" id="imie" size="20" /></td>
  53.   </tr>
  54.   <tr>
  55.     <td align="right">Nazwisko:</td>
  56.     <td><input name="nazwisko" type="text" id="nazwisko" size="20" /></td>
  57.   </tr>
  58. </table>
  59.  
  60. <table width="300" border="0" cellspacing="0" cellpadding="0">
  61.   <tr>
  62.     <td width="90" height="25">&nbsp;</td>
  63.     <td width="3"><div id="submit"><input type="submit" name="submit" value="Wyślij" /></div></td>
  64.     <td width="10">&nbsp;</td>
  65.     <td><div id="reset"><input type="reset" name="reset" value="Wyczyść" />
  66.     </div></td>
  67.   </tr>
  68. </table>
  69. </form>
  70.  
  71. </body>
  72. </html>
[HTML] pobierz, plaintext


PS problem rozwiązany, dzięki za wasze sugestie, w działaniu można zobaczyć to tutaj: http://fixer.devtown.net/valid/index.php

Ten post edytował Fixer 28.08.2007, 07:37:11
Go to the top of the page
+Quote Post

Posty w temacie
- Fixer   Formularz > type="image" zamiast submit   27.08.2007, 20:41:12
- - Fixus   miałem podobny problem...z tego co pami...   27.08.2007, 22:00:00
- - Fixer   problem przeglądarek załatwiłem detekcją rodzaju p...   27.08.2007, 22:42:53
- - kicaj   A probowales tak?: [HTML] pobierz, plaintext <b...   27.08.2007, 22:48:00
- - Fixer   [HTML] pobierz, plaintext <button type="su...   27.08.2007, 23:43:55
- - sobieh   <input type="image" src="adres o...   27.08.2007, 23:49:00
- - Fixer   to prawda ale... ale juz przestaje działać jak chc...   27.08.2007, 23:51:49
- - sobieh   <input type="image"> wysle forma w...   28.08.2007, 00:06:26
- - Fixer   hmm dobry pomysł sobieh w międzyczasie wpadłem na...   28.08.2007, 00:37:28

« Następny starszy · PHP · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 28.12.2025 - 11:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn