Bilder dynamisch verändern
Nächste dringende Frage hier in die Runde:
Wie kann ich unabhängig von Bildschirmauflösung und Browser-Fenstergröße eine Bilddatei stets so anpassen, daß sie dynamisch über die Website wandert.
Seht Euch mal www.linuxmaker.de/Hofapotheke das Logo im oberen Frame an. Laut Designerin sollte das immer vom linken zum rechten Rand gehen.
Kann mir hier jemand helfen?
Danke!
Archilles
Geändert von Archilles (15-10-2004 um 08:43 Uhr)
Also was genau? Soll das hin und herwandern oder soll das einfach Bildschirmfüllend breit sein?
MfG Peschmä
The greatest trick the Devil ever pulled was convincing the world he didn't exist. -- The Usual Suspects (1995)
Hey, I feel their pain. It's irritating as hell when people act like they have rights. The great old one (2006)
Lade dir von http://cross-browser.com die include Dateien runter.
Damit arbeitest du weitgehend "Bowserunabhängig" und binde sie ein:
<script type="text/javascript" src="../cbe/cbe_core.js"></script>
<script type="text/javascript" src="../cbe/cbe_slide.js"></script>
<script type="text/javascript" src="../cbe/cbe_slide2.js"></script>
<script type="text/javascript" src="../cbe/cbe_event.js"></script>
Definiere eine Style mit der du den Teil des Bildes kappst, der über die Bildschirmgröße hinausragt.
<style>
.bild {position:absolute;
overflow:hidden; }
</style>
Binde folgende Javascript-Datei ein:
<style type="text/css"><!--
function windowOnload() {init()};
function init(){
with (bild = cbeGetElementById('bild').cbe) {
resizeTo(document.cbe.width(),150);
moveTo(0,0);
zIndex(60);
show();
}
}
//--></script>
Im Body fehlt jetzt nur noch dein Container:
<div id="bild" class="bild">
<img src="my_Bild.jpg" border="0">
</div>
Vielen Dank für den Hinweis,
ich werde ihn ausprobieren und sehen wie weit die Bilder angepaßt werden.
Hier meinte ich tatsächlich das Sich-Anpassen an das Browserfenster - egal ob Du Vollbild, normale Fenstergröße, 800x640 oder 1280x1024 etc hast.Also was genau? Soll das hin und herwandern oder soll das einfach Bildschirmfüllend breit sein?
Gruß
Archilles
Meintest du vielleicht einfach bloß, dass das Bild stets die selbe Breite wie das Browserfenster haben soll:
HTML-Code:<img src="foo.jpg" style="width:100%;" />
.
Wenn die Sonne der Kultur niedrig steht, werfen selbst Zwerge einen Schatten.
Richtig!
Wobei in diesem Fall es ein Hintergrundbild ist.
Ich gebe Euch einfach mal den Quellcode:
[QUOTE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HOF-Apotheke Stuttgart</title>
<meta name="GENERATOR" content="Quanta Plus">
<!--<link rel="stylesheet" type="text/css" href="css/stylesheet.css">-->
<style type="text/css" media="screen">
<!--
body { text-decoration: none; background-image:url(images/backpaper2.gif);}
#logo { position: absolute; z-index: 8; top: 20px; left: 20px; width: 201px; height: 42px; visibility: visible}
#pillen { position: absolute; z-index: 8; top: 8px; left: 630px; width: 393px; height: 64px; visibility: visible }
.bild { position: absolute;
overflow:hidden;}
-->
</style>
<script language="javascript" type="text/javascript" src=
"cbe/cbe_core.js">
</script>
<script language="javascript" type="text/javascript" src=
"cbe/cbe_slide.js">
</script>
<script language="javascript" type="text/javascript" src=
"cbe/cbe_slide2.js">
</script>
<script language="javascript" type="text/javascript" src=
"cbe/cbe_event.js">
</script>
<script language="javascript" type="text/css">
// <!--
function windowOnload() {init()};
function init(){
with (bild = cbeGetElementById('bild').cbe) {
resizeTo(document.cbe.width(),150);
moveTo(0,0);
zIndex(60);
show();
}
}
// -->
</script>
</head>
<body>
<table width="100%" border="0" align="center">
<tr>
<td align="left">
<br>
<div id="logo">
<img src="images/logotop.gif" width="200" height="41"
border="0">
</div>
</td>
<td align="right">
<div id="pillen">
<img src="images/pillen.gif" width="390" height="63"
border="0">
</div>
</td>
</tr>
</table>
</body>
</html>
Die Datei heißt backpaper2.gif in dem Style "body". Die ist so 1024x10 Pixel groß und sollte sich je nach Browsergröße mit anpassen.
www.linuxmaker.de/Hofapotheke
Weitere Frage, wie binde ich die function windowOnload() letztendlich in meinen Code auf ein spezielles Bild ein?
Vielen Dank!
Archilles
Geändert von Archilles (15-10-2004 um 08:43 Uhr)
Berechtigungen
Zitieren
Lesezeichen