Formularz > type="image" zamiast submit, zamiana zwykłuch przycisków w formularzu na graficzne Opcje

[Fixer]

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 
<input type="submit" name="button" id="button" value="Submit" />
[HTML] pobierz, plaintext 

chcę wstawić grafikę

[HTML] pobierz, plaintext 
<input name="btn_wyslij" type="image" value="btn_wyslij" onfocus="blur()" 
onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; 
style.cursor='pointer'" onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" 
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)

Tak wygląda u mnie sprawdzanie czy przycisk został wciśnięty:

[PHP] pobierz, plaintext 
<?php
if (isset($_REQUEST["btn_wyslij"])) { 
...
}
?>
[PHP] pobierz, plaintext 

jak znowusz zrobię przycisk w ten sposób:

[HTML] pobierz, plaintext 
<input name="btn_wyslij" type="submit" value="" style="border: 0; 
background: url('images/btn/btn_wyslij_off.gif'); 
background-repeat: no-repeat; margin-bottom: 4px; width: 69px; height: 21px;" 
onfocus="blur()" onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; 
style.cursor='pointer'" 
onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" 
src="images/btn/btn_wyslij_off.gif" alt="Wyślij" />
[HTML] pobierz, plaintext 

to nie zmienia się grafika przycisku po najechaniu na niego myszką

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

Ten post edytował Fixer 27.08.2007, 23:48:20

[Fixus]

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

Ten post edytował Fixus 27.08.2007, 22:00:29

[Fixer]

problem przeglądarek załatwiłem detekcją rodzaju przeglądarki w php

[PHP] pobierz, plaintext 
<?php
	$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
	// tylko gdy IE
	if(strpos($browser,"msie")!==false) {
		echo ('<input name="btn_wyslij" type="submit" value="" style="border: 0; 
background: url('images/btn/btn_wyslij_off.gif'); background-repeat: no-repeat; 
margin-bottom: 4px; width: 69px; height: 21px; 
cursor: pointer;" onfocus="blur()" alt="Wyślij" />');
	}
	else {
	  // inna niż IE
	  echo '<input name="btn_wyslij" type="image" value="btn_wyslij" onfocus="blur()" onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; style.cursor='pointer'" 
onmouseout="this.src='./images/btn/btn_wyslij_off.gif'" 
src="images/btn/btn_wyslij_off.gif" alt="Wyślij" />';
	}
?>
[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..."

Ten post edytował Fixer 27.08.2007, 23:49:24

[kicaj]

A probowales tak?:

[HTML] pobierz, plaintext 
<button type="submit"><img src="..." /></button>
[HTML] pobierz, plaintext 

[Fixer]

[HTML] pobierz, plaintext 
<button type="submit"><img src="images/btn/btn_wyslij_off.gif" width="69" height="21" border="0" 
alt="Wyczyść" style="cursor:pointer" onclick="return wyczyszczenie();" 
onmouseover="this.src='./images/btn/btn_wyslij_on.gif'; style.cursor='pointer'" 
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 (IE i FF)

Ten post edytował Fixer 27.08.2007, 23:44:54

[sobieh]

<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' " />

Ten post edytował sobieh 27.08.2007, 23:52:55

[Fixer]

to prawda ale...
ale juz przestaje działać jak chcesz sprawdzać który przycisk został wciśnięty tym kodem

[PHP] pobierz, plaintext 
<?php
if (isset($_REQUEST["btn_wyslij"])) { ...}
?>
[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?

Ten post edytował Fixer 27.08.2007, 23:56:12

[sobieh]

<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()">

Ten post edytował sobieh 28.08.2007, 00:08:46

[Fixer]

hmm dobry pomysł sobieh
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 
<!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>
<head>
 
<style type="text/css">
#image input, #submit input {
	display: block;
}
 
#submit input {
	background: transparent url(btn_wyslij.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	height: 21px;
	max-height: 21px;
	padding-top: 40px;
	width: 69px;
}
 
#reset input {
	background: transparent url(btn_wyczysc.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	height: 21px;
	max-height: 21px;
	padding-top: 40px;
	width: 88px;
}
 
#submit input:hover, #reset input:hover {
	background-position: 0 -21px;
}
 
#submit input:active, #reset input:active {
	background-position: 0 -42px;
}
</style>
 
</head>
 
<body>
 
<form id="formularz" name="formularz" method="post" action="">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="80" align="right">Imię:</td>
    <td width="10" rowspan="2">&nbsp;</td>
    <td><input name="imie" type="text" id="imie" size="20" /></td>
  </tr>
  <tr>
    <td align="right">Nazwisko:</td>
    <td><input name="nazwisko" type="text" id="nazwisko" size="20" /></td>
  </tr>
</table>
 
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="90" height="25">&nbsp;</td>
    <td width="3"><div id="submit"><input type="submit" name="submit" value="Wyślij" /></div></td>
    <td width="10">&nbsp;</td>
    <td><div id="reset"><input type="reset" name="reset" value="Wyczyść" />
    </div></td>
  </tr>
</table>
</form>
 
</body>
</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