input felt til form ovenpå et billede

F.eks.

<td style="position:relative;"><img name="index_r4_c2" src="index_r4_c2.jpg" width="182" height="26" border="0" alt="">

<form style="position="absolute" action="login.php" method="post">
  <!-- Dine input-felter -->
  <input type="text" name="name"><br>
  <input type="password" name="pw"><br>
  <input type="submit" value="Login">
</form></td>

Roenving mente:

<td style="position:relative;"><img name="index_r4_c2" src="index_r4_c2.jpg" width="182" height="26" border="0" alt=""><form style="position:absolute;" action="login.php" method="post">
  <!-- Dine input-felter -->
  <input type="text" name="name"><br>
  <input type="password" name="pw"><br>
  <input type="submit" value="Login">
</form></td>

(style="position:absolute" istedet for style="position="absolute")

Ufff ...

Der er helt klart et stort skridt i den rigtige retning. Men det driller stadig en smule med pladseringen af loginfeltet.

hvis jeg forsøger mig med den foreslået td style bliver loginboksen vist lige efter billedet "over index_r4_c3"og ikke over billedet "index_r4_c2".?

et lille tillægsspørgsmål hvordan kan man få loginknappen til at ligge på linie med login feltet.? jeg prøvede at fjerne <br> men det hjælper ikke.



<table border="0" cellpadding="0" cellspacing="0" width="869">
  <tr>
  <td><img src="spacer.gif" width="663" height="1" border="0" alt=""></td>
  <td><img src="spacer.gif" width="182" height="1" border="0" alt=""></td>
  <td><img src="spacer.gif" width="24" height="1" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr>
  <td colspan="3"><img name="index_r1_c1" src="index_r1_c1.jpg" width="869" height="192" border="0" usemap="#m_index_r1_c1" alt=""></td>
  <td><img src="spacer.gif" width="1" height="192" border="0" alt=""></td>
  </tr>
  <tr>
  <td colspan="3"><img name="index_r2_c1" src="index_r2_c1.jpg" width="869" height="190" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="190" border="0" alt=""></td>
  </tr>
  <tr>
  <td colspan="3"><img name="index_r3_c1" src="index_r3_c1.jpg" width="869" height="172" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="172" border="0" alt=""></td>
  </tr>

  <tr>
  <td><img name="index_r4_c1" src="index_r4_c1.jpg" width="663" height="26" border="0" alt=""></td>
 
  <td style="position:relative;"><img name="index_r4_c2" src="index_r4_c2.jpg" width="182" height="26" border="0" alt=""><form style="position:absolute;" action="login.php" method="post">
  <input type="password" name="pw"><input type="submit" value="Login"></form></td>
  <td><img name="index_r4_c3" src="index_r4_c3.jpg" width="24" height="26" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="26" border="0" alt=""></td>
  </tr>
 
  <tr>
  <td colspan="3"><img name="index_r5_c1" src="index_r5_c1.jpg" width="869" height="66" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="66" border="0" alt=""></td>
  </tr>

</table>

</body>
</html>

<td style="position:relative;"><img name="index_r4_c2" src="index_r4_c2.jpg" width="182" height="26" border="0" alt="a"><form style="position:absolute;left:0px;top:0px;" action="login.php" method="post">
  <input type="password" name="pw" size="18"><input type="submit" value="Login"></form></td>
  <td><img name="index_r4_c3" src="index_r4_c3.jpg" width="24" height="26" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="26" border="0" alt=""></td>
  </tr>

left:0px;top:0px; på form style tilføjet.
og size="18" på input feltet tilføjet.

Evt. er det måske denne du er ude efter ?


  <td><form action="login.php" method="post" style="margin:0px;">
  <input type="password" name="pw" size="18" style="background:url('index_r4_c2.jpg');"><input type="submit" value="Login"></form></td>
  <td><img name="index_r4_c3" src="index_r4_c3.jpg" width="24" height="26" border="0" alt=""></td>
  <td><img src="spacer.gif" width="1" height="26" border="0" alt=""></td>
  </tr>

super sejt, så virker det bare. Hvis man nu vil havde skiftet baggrundsfarven på input feltet fra hvid til f.eks. sort også selvfølgelig teksten "prikkerne" i en anden farve, hvordan gør man det.? er det via css?

Hvis man ville kunne man sætte et billede ind som baggrund i selve teksfeltet i en form " Så man skrev ovenpå på et billede"

Håber det er ok med et par ekstra spørgsmål (man bliver jo inspireret når der kommer så hurtige og gode svar :-) )

Kommentar: mclemens
14/01-2007 15:56:12

virkede

Kommentar: mclemens
14/01-2007 15:59:24

man skulle jo tro du var tankelæser :-)

Hvordan tilretter man rammen og evt udseende på knappen.? ( så kan min egen Kommentar: morfer
14/01-2007 16:05:17 være lige meget

<input type="password" name="pw" size="18" style="background:#000;color:#fff;">

...

<input type="password" name="pw" size="18" style="background:url('index_r4_c2.jpg');">

- eller hvis det skulle være i en form er det bare baggrunden over på formen ...

<input type="password" name="pw" size="18" style="background:#000;color:#fff;border:5px solid #f55;">

... eller måske border:0px; og så borderen ind i billedet
... evt. noget padding på input elementet også ...

Hov, knappen er på samme måde som input feltet ...
- Juster evt. med width:123px; og font m.v. Kig evt. på
css inde på: http://www.w3schools.com/css/css_reference.asp

super tak for god og hurtig hjælp smider du et svar

Velbekomme, her
er lige et svar :)

Og tak for point :)