nicht angemeldet
gruss karla,
(1)
nun, ich habe ein bild (ca. 4x6cm) diese bild mochte ich als hintergrung bild stellen. das problem das ich nun habe ist das das bild eben in dieser größe erscheind, ich möchte dass das bild sich in ein vorgegebenen bereich erschiend in der größe dieses bereiches.
(2)
zu welchem zeitpunkt koennen genaue aussagen ueber die position und die groesse Deines "hintergrundbildes" getroffen werden ?
(3)
ich verstehen diese frage nicht :(
na ganz einfach: in (1) sagst Du, dass Dein bild mit einem seitenverhaeltnis von 4 auf 6 "in einem vorgegebenen bereich erscheinen" soll - "in der groesse dieses bereichs"
zur loesung muss man wissen, welche ausdehnung und welche position dieser bereich hat - falls keine genaue aussage darueber getroffen werden kann, weil es sich nicht um "hartcodiertes" html handelt, da dieser bereich z.b.: bei jedem ladevorgang der seite einen dynamisch geschriebenen inhalt umschliesst und auch noch seine lage im browserfenster aendert, gilt es, herauszufinden, zu welchem zeitpunkt eine genaue groessen- und lagebestimmung dieses bereichs moeglich ist;
loesung: (1) "hintergrundbild" vorladen; (2) "den bereich" im html-quelltext mit einem css-formatierten /-definierten div-tag "umschliessen"; (3) einen zweiten css-formatierten/definierten div-container im html-quelltext plazieren; (4) auf body-onload-event die eigenschaften des in (2) erwaehnten relativ positionierten div-containers auslesen (5) die html syntax fuer ein img mit den ermittelten breite/hoehe- werten aus(4) in eine string-variable schreiben; ( ob das seiten verhaeltnis dann noch stimmt, haengt von der ausdehnung des "bereichs" in (2) ab !! ) (6) den string aus (5) in den in (3) genannten div-container schreiben und dieses div auf die ebenfalls in (4) ermittelten x/y-koordinaten verschieben;
- z-index der div-container beachten
und nach der theorie die schnell zusammengestrickte praxis, um das alles hoffentlich nachvollziehen zu koennen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
<head> <title>adaptingBgImage.html</title> <script type="text/javascript"> <!-- var imgMyBg = new Image();imgMyBg.src = "http://selfaktuell.teamone.de/src/xweb.gif";
function adaptBgToTable() { var tableLayer = null; if (document.getElementsByTagName) { bgImgLayer = document.getElementsByTagName("div")["myBgImg"]; tableLayer = document.getElementsByTagName("div")["myTable"]; tableLayer.height = tableLayer.offsetHeight; tableLayer.width = tableLayer.offsetWidth; tableLayer.leftX = tableLayer.offsetLeft; tableLayer.topY = tableLayer.offsetTop; alert("document.getElementsByTagName ["+tableLayer.width+","+tableLayer.height+","+tableLayer.leftX+","+tableLayer.topY+"]\n\ndie werte fuer width, height, left, top\n\nACHTUNG - nach dem <OK> kommt der hintergrund - ! PIXELGENAU ! "); bgImgLayer.style.left = tableLayer.leftX; bgImgLayer.style.top = tableLayer.topY; bgImgLayer.innerHTML = '<table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0" bgcolor="#d6d6d6"><tr><td align="left" valign="top"><img src="' + imgMyBg.src + '" width="' + tableLayer.width + '" height="' + tableLayer.height + '" alt="" border="0" /></td></tr></table>'; } else if (document.layers) { bgImgLayer = document.layers["myBgImg"]; tableLayer = document.layers["myTable"]; tableLayer.height = tableLayer.document.height; tableLayer.width = tableLayer.document.width; tableLayer.leftX = tableLayer.pageX; tableLayer.topY = tableLayer.pageY; alert("document.layers ["+tableLayer.width+","+tableLayer.height+","+tableLayer.leftX+","+tableLayer.topY+"]\n\ndie werte fuer width, height, left, top\n\nACHTUNG - nach dem <OK> kommt der hintergrund - ! NICHT PIXELGENAU ! "); bgImgLayer.moveTo(tableLayer.leftX,tableLayer.topY); bgImgLayer.document.open("text/html"); bgImgLayer.document.write('<table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0"><tr><td align="left" valign="top"><img src="' + imgMyBg.src + '" width="' + tableLayer.width + '" height="' + tableLayer.height + '" alt="" border="0" /></td></tr></table>'); bgImgLayer.document.close(); } else if (document.all) { bgImgLayer = document.all.tags("div")["myBgImg"]; tableLayer = document.all.tags("div")["myTable"]; tableLayer.height = tableLayer.offsetHeight; tableLayer.width = tableLayer.offsetWidth; tableLayer.leftX = tableLayer.offsetLeft; tableLayer.topY = tableLayer.offsetTop; alert("document.all ["+tableLayer.width+","+tableLayer.height+","+tableLayer.leftX+","+tableLayer.topY+"]\n\ndie werte fuer width, height, left, top\n\nACHTUNG - nach dem <OK> kommt der hintergrund - !\n\n ... mmh ... left/top-parameter fuer MSIE4 sind nicht lesbar ! .. also nicht brauchbar "); bgImgLayer.style.left = tableLayer.leftX; bgImgLayer.style.top = tableLayer.topY; bgImgLayer.innerHTML = '<table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0" bgcolor="#d6d6d6"><tr><td align="left" valign="top"><img src="' + imgMyBg.src + '" width="' + tableLayer.width + '" height="' + tableLayer.height + '" alt="" border="0" /></td></tr></table>'; } }
function getStyle() { var adapter = ((document.layers) ? (11/10) : 1); var myStyle = ''+ '<st' + 'yle>\n<!' + '--\n'+ '.dummyText {font-family:verdana,helvetica,geneva,arial,sans-serif;font-size:' + Math.round(adapter10) + 'px;line-height:' + Math.round(adapter12) + 'px;color:#000000;}\n'+ '#myBgImg {position:absolute;margin:0px;z-index:0;visibility:visible;}\n'+ '#myTable {position:relative;border-width:1px;border-style:solid;border-color:#ff0000;margin:0px;z-index:1;visibility:visible;}\n'+ '/' + '/-' + '->\n</st' + 'yle>'; return myStyle; } //--> </script> <script type="text/javascript">document.writeln(getStyle());</script> <style>
</style> </head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onload="adaptBgToTable()"> <div id="myBgImg" name="myBgImg"></div>
<!-- die aeussere tabelle zentriert den gesamten spass --> <table cols="1" rows="1" width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" valign="middle">
<!-- die mittlere tabelle ist notwendig, um das folgende in breite und hoehe NICHT DEFINIERTE div am "auseinanderlaufen" zu hindern (kontrollierbar am roten rand dieses divs, ohne und mit dieser tabelle) //--> <table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" valign="middle">
<!-- DAS DIV --> <div id="myTable" name="myTable"> <!-- das objekt unserer neugierde / diese tabelle drueckt seinen div-container auseinander und bestimmt damit dessen breiten- und hoehen- angaben //--> <table cols="3" rows="3" cellspacing="0" cellpadding="0" border="1" bordercolor="#000000"> <tr> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> </tr> <tr> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> </tr> <tr> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> </tr> </table> </div>
</td> </tr> </table>
</td> </tr> </table> </body>
</html>
so long - schoenes WE - peterS. - pseliger@gmx.net