nicht angemeldet
Formular als Hintergrundbild
Hallo !
Ich möchte ein Formular im Hintergrund darstellen, so dass es beim Drucken mit erscheint. Dieses Formular ist ein eingescanntes Bild, und kein Formular im HTML-Sinne, da der User nichts eintragen soll. Dieses Bild soll nur als Hintergrundmaske fungieren und ich möchte einfachen Text darüber legen, so dass es so aussieht, als ob das Hintergrundformular ausgefüllt wäre. Mein Problem dabei ist, den Text an den Feldern des Hintergrundbildes auszurichten. Hat da jemand ne Idee, wie ich das am einfachsten hinbekomme ?
Danke schonmal
Michael
-
Hallo Michael,
ich denke, da solltest Du mit
style="position:absolute; top:ypx; left:xpx"
arbeiten und das für jeden Text vorgeben. Außerdem solltest Du in CSS die Schriftgröße und Schriftart festlegen. Es bietet sich an mit diktengleicher Schrift zu arbeiten
Grüße
Tom
-
Hallo Michael,
noch ein kleines "Werkzeug" zur Ermittlung der Feldpositionen:
html>
<head>
<title>Koordinaten</title><script type="text/javascript">
<!--function addPoint(x,y)
{
document.transmitForm.transmitData.value = document.transmitForm.transmitData.value + "," + x +"," + y;}
function koordinaten(ereignis)
{
if (window.opera) {
//Opera, unabhaengig von der Einstellungalert(ereignis.clientX-ereignis.target.offsetParent.style.pixelLeft+"\n" +(ereignis.clientY-ereignis.target.offsetParent.style.pixelTop))
} else if (document.all) {
//Internet Explorer
alert(window.event.offsetX+'\n'+window.event.offsetY);
addPoint(window.event.offsetX,window.event.offsetY);} else if (document.layers || document.getElementById)
{
//Netscape 4, 6, Mozilla
alert(ereignis.layerX+"\n"+ereignis.layerY);
addPoint(ereignis.layerX,ereignis.layerY);
}
}function init()
{ //ueberwachung der Grafik
if (document.layers) document.layers[0].document.images.bild.onmouseup=koordinaten;
else document.images.bild.onmouseup=koordinaten;
}//-->
</script>
</head>
<body onload="init()"><div style="position:absolute;top:100px;left:100px;"><img name="bild" src="gelb296x217.gif" border="0"></div><br>
<div name ="formDiv" style="position:absolute;top:350px;left:100px;">
<form action="transmitImageMap.php" name="transmitForm">
<textarea name="transmitData" rows="10" cols="40"></textarea><br>
<input type="submit" name="btn_submit" value="absenden">
</form>
</div>
</body>
</html>Solltest Du daraus was "Vernünftiges" machen, poste es mal zurück.
Grüße
Tom
-
-
Hallo Michael
Mein Problem dabei ist, den Text an den Feldern des Hintergrundbildes auszurichten. Hat da jemand ne Idee, wie ich das am einfachsten hinbekomme ?
Wie es geht, hat Dir ja schon Thomas erklärt.
Falls Du es noch ausführlicher haben möchtest: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm
Aber meistens ist es nicht so leicht mit {position:absolute; top:wert; left:wert} das Ziel zu finden.
Ich habe zum pixelgenau positionieren (ja ich weiss nicht alle mögen das :o) ein tolles tool gefunden. Es heißt PixelLin und ist als freeware bei http://www.mueller-norbert.de/download/freeware zu haben.
Damit kann man wie mit einem auf dem Bildschirm frei verschiebbaren Lineal Abstände in Pixel ausmessen. Das spart viel rumprobieren.
Hoffe, Du findest es genauso nützlich wie ich.
Grüße aus Nürnberg, HarryS
-
Hallo,
Ich möchte ein Formular im Hintergrund darstellen, so dass es beim Drucken mit erscheint.
Vorsicht! Hintergrundbilder werden bei Standard-Browereinstellungen normalerweise nicht mit ausgedruckt!
siehe auch http://forum.de.selfhtml.org/archiv/2002/3/8101/#m44818
Gruß Henk