Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Formularz > type="image" zamiast submit
Forum PHP.pl > Forum > PHP
Fixer
27.08.2007, 20:41:12
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) 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ą sad.gif

Jest jakiś sposób na rozwiązanie tego problemu?
Pozdrawiam.
Fixus
27.08.2007, 22:00:00
miałem podobny problem...z tego co pamiętam to IE nie pozwoli ci na taki manewr.

możesz oczywiście zrobić dwa guziki (jako .gif obrazek z napisem wyślij w dwóch stanach) i podmieniać za pomocą js
Fixer
27.08.2007, 22:42:53
problem przeglądarek załatwiłem detekcją rodzaju przeglądarki w php
[PHP] pobierz, plaintext 
  1. <?php
  2. 	$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
  3. 	// tylko gdy IE
  4. 	if(strpos($browser,"msie")!==false) {
  5. 		echo ('<input name="btn_wyslij" type="submit" value="" style="border: 0; 
  6. background: url('images/btn/btn_wyslij_off.gif'); background-repeat: no-repeat; 
  7. margin-bottom: 4px; width: 69px; height: 21px; 
  8. cursor: pointer;" onfocus="blur()" alt="Wyślij" />');
  9. 	}
  10. 	else {
  11. 	  // inna niż IE
  12. 	  echo '<input name="btn_wyslij" type="image" value="btn_wyslij" onfocus="blur()" onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; style.cursor='pointer'" 
  13. onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" 
  14. src="images/btn/btn_wyslij_off.gif" alt="Wyślij" />';
  15. 	}
  16. ?>
[PHP] pobierz, plaintext


Teraz pozostało mi zrobić podmianę obrazka w przycisku typu submit przy najechaniu myszki dla IE.
JS się chyba do tego nie nada no bo nie mogę dla submit zdefioniować czegoś w stylu "onmouse, onfocus..."
kicaj
27.08.2007, 22:48:00
A probowales tak?:
[HTML] pobierz, plaintext 
  1. <button type="submit"><img src="..." /></button>
[HTML] pobierz, plaintext
Fixer
27.08.2007, 23:43:55 
[HTML] pobierz, plaintext 
  1. <button type="submit"><img src="images/btn/btn_wyslij_off.gif" width="69" height="21" border="0" 
  2. alt="Wyczyść" style="cursor:pointer" onclick="return wyczyszczenie();" 
  3. onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; style.cursor='pointer'" 
  4. onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" onfocus="blur()" /></button>
[HTML] pobierz, plaintext


no zrobiłem tak jak doradziłeś ale bezsensowny rezultat jest...
mianowicie jest przycisk a na nim mniejsza grafika, formularz po kliknięciu w ten przycisk nie reaguje sad.gif (IE i FF)
sobieh
27.08.2007, 23:49:00
<input type="image" src="adres obrazka" />

dziala to jako Submit
poza tym nie musisz uzywac this.src ... wystarczy src np. :

<input type="image" src="adres obrazka" onMouseOver=" src='inny_obrazek' " />
Fixer
27.08.2007, 23:51:49
to prawda ale...
ale juz przestaje działać jak chcesz sprawdzać który przycisk został wciśnięty tym kodem
[PHP] pobierz, plaintext 
  1. <?php
  2. if (isset($_REQUEST["btn_wyslij"])) { ...}
  3. ?>
[PHP] pobierz, plaintext


dla IE musi być type="button" nie image
Jeśli pominę te kilka linijek w PHP to jak sprawdzę walidację w PHP?
sobieh
28.08.2007, 00:06:26
<input type="image"> wysle forma w ktorym sie znajduje wiec mozesz zrobic dodatkowo
<input type="hidden" name="form1submit" value="true">

np. tak :
http://duality.com.pl/btest.php

albo uzyc image wraz z inputem jako hidden:

<img src="xxx" onClick="document.form.submit()">
Fixer
28.08.2007, 00:37:28
hmm dobry pomysł sobieh 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
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.