Automatische Größenänderung Hintergrundbild

DariaBoy001 · 25.03.2006

Hi,
bisher dachte ich immer das es nicht möglich ist ein Hintergrundbild einer Website automatish in der Größe anpassen zu lassen. Normal ist es ja so, das bei einer Website das Bild im Hintergrund entweder gekachelt oder mit Rand angezeigt wird. Jetzt habe ich aber auf Madonna.com gesehen das es doch anders möglich ist. Ich habe schon gesehen das es über JavaScript gelöst wird. Kennt jemand eine Quelle für ein solches Script oder weiß wie es geht??
Gruss Benni

Difool · 25.03.2006

Hi,

das Ganze nennt sich 'dragging'.

http://tool-man.org/examples/dragging.html

Gruß Difool

Difool · 25.03.2006

ups...

...ist wohl eher das hier: function findDimensions ()

siehe: http://www.madonna.com/js/madonna.js

DariaBoy001 · 25.03.2006

Danke für die Info, aber ich das ist nicht das was ich suche. Ich habe einen Ansatz gefunden, der allerdings etwass älter ist und mit dem Firefox und Safari nicht klarkommen. Zu sehen unter Funkpalast . Das Problem scheint zu sein das dass Script davon ausgeht das es nur IE und Netscape 4 gibt. Opera und IE funktionieren auch mit dem Script. Ich vermute das es an dem Punkt -> NS4 = (document.layers); liegt. Firefox (Safari wahrscheinlich auch) verlangt aber denke ich (document.getElementById); Habe aber noch keinen Erfolg gehabt beim umstricken des Scripts. Hast du eine Idee?

Code:

<!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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript1.2" type="text/javascript">
<!--
    NS4 = (document.layers);
    IE4 = (document.all);
    
    scaleWidth = true;
    scaleHeight = true;
    imSRC = "images/bg.jpg";

    if (NS4) window.onload = setResize;

    function setResize(){
        setTimeout("window.onresize=reDo;",500);
    }

    function reDo(){
        window.location.reload()
    }

    if (IE4) window.onresize = reDoIE;

    function reDoIE(){
        imBG.width = document.body.clientWidth;
        imBG.height = document.body.clientHeight;
    }

    function makeIm() {
    
      winWid = (NS4) ? innerWidth : document.body.clientWidth;
      winHgt = (NS4) ? innerHeight : document.body.clientHeight;
    
      imStr = "<DIV ID=elBGim"
      + " STYLE='position:absolute;left:0;top:0;z-index:-1'>"
      + "<IMG NAME='imBG' BORDER=0 SRC=" + imSRC;
      if (scaleWidth) imStr += " WIDTH=" + winWid;
      if (scaleHeight) imStr += " HEIGHT=" + winHgt;
      imStr += "></DIV>";
    
      document.write(imStr);
    
    }
//-->
</script>
</head>

<body marginheight="0" marginwidth="0">
<script language="JavaScript1.2" type="text/javascript">
<!--
    makeIm();
//-->
</script>
</body>
</html>

DariaBoy001 · 25.03.2006

Ups das war ich eben am Schreiben als du geantwortet hast

Ich schau mir das nochmal an aber eben hab ich das Script von Madonna nicht verstanden. Ich hab gar nicht rausbekommen wo das Bild überhaupt geladen wird...

Difool · 25.03.2006

...tja, die css & js der madonna-site sind wirklich "heftig".

Code:

<div ID="background"><img
    ID="background_image"
    ALT=""
    WIDTH=1 HEIGHT=1 SRC="images/placeholder.gif"></div>

http://www.madonna.com/up_images/BACKGROUNDS//background1-bg.jpg
...background2-bg.jpg
...background3-bg.jpg
...usw.

Code:

 // if there's valid info, update the globals so they can be used elsehere
    pageWidth = frameWidth;
    pageHeight = frameHeight;

    if ( (obj = myGetElementById('background')) )
    {
	obj.style.width = frameWidth;
	obj.style.height = frameHeight;
    }

    if ( (obj = myGetElementById('background_image')) )
    {
	var iWidth = obj.width; 
	var iHeight = obj.height;
	var iRatio = iWidth / iHeight;
	var fRatio = frameWidth / frameHeight;	

	// reset to default position on resize/load
	obj.style.top = obj.style.left = 0;

	if ( iRatio < fRatio ) 
	{
	    obj.style.width = frameWidth;
	    obj.style.height = frameWidth / iRatio;
	} 
	else 
	{
	    obj.style.height = frameHeight;
	    obj.style.width = frameHeight * iRatio;
	}
    }
}

...ja, so ganz klar ist das nicht, wo die background_images reingeladen werden...kopfkratz

Difool · 25.03.2006

*hehehe*

...auch schön:

Code:

    // update the background, javacript, panel positions and history
    // if needed (only on main content page)
    if ( id == MAIN_CONTENT )
    {
	updateBackground (id);
	updateJavascript (id);
	updatePanelPosition (id);
	historyPush (id, area, anchorId, scrollDiv, thisHistoryPos);
    }

    // look for any objects that need to be minimized
    // this is *not* the most efficient, so it should be
    // redone at some point to be a lot better. right now
    // it looks through all children of the currently loaded content id
    // for DIV's that have the "auto_minimize" attribute set to true
    var contentObj = myGetElementById (id);
    for ( var o = contentObj.firstChild; o; o = o.nextSibling )
    {
	if ( o.nodeName != "DIV" ) continue;
//	debug ("Checking " +o.getAttribute('id') + " for auto_minimize");
	if ( o.getAttribute("auto_minimize") == "true" )
	    minimizePanel (o.getAttribute('id'));
    }

...aus: /madonna.js

DariaBoy001 · 26.03.2006

Oy!
Manchmal braucht man Stunden für die einfachsten Sachen

Code:

<!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>
<title>FUNKPALAST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0"><img src="images/bg.jpg" width="100%" height="100%" class="background" />
</body>
</html>

Und in die styles.css:

Code:

 .background {
position:absolute;
left:0;
top:0;
z:-2;
}

Wahnsinn! Total simpel und ich habe die ganze Zeit total kompliziert über JavaScript und so weiter nachgedacht.

Difool · 26.03.2006

Sehr cool.

bin da gerade am testen deines codes; Safari entblösst hemmungslos scrollbalken
und Firefox "machts" da nur mit der Breite.
Der IE 5.2.3 unter OS X spielt allerdings glänzend mit.

edit:
Dafür schafft die madonna.com es nicht mit dem IE 5.2.3/mac...

DariaBoy001 · 26.03.2006

Schau mal hier:
TestJ
Da ist der Code eingebaut und verbessert, funktioniert mit allen Browsern perfekt, außer... IE Win

Ich glaube ich habe mit diesem Code einen neuen IE Bug gefunden, kann keine Referenz zu diesem Problem finden. Das Problem ist das IE Win das Bild nach unten in die Länge zieht. Erst wenn das Fenster in der Größe verändert wird passt es. Das heißt das er ein Problem mit diesem CSS Befehl hat. Hier der aktuelle, saubere Code (geht auch durch die W3C Validatoren für CSS und HTML)

Der HTML Code:

Code:

<!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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>  
<div id="Funkpalast"><img src="images/funkpalast.gif" alt="FUNKPALAST Logo" width="301" height="63" /><br />
<img src="images/musik.gif" width="116" height="30" alt="Musik" /><br />
<img src="images/film.gif" width="89" height="34" alt="Film" /><br />
<img src="images/impressum.gif" width="199" height="27" alt="Impressum" /></div> 
<img src="images/bg.jpg" alt="Background Image" width="100%" height="100%" class="background" />
</body>
</html>

Das JavaScript ist nur für den Layer Bug in einigen Netscape 4 Versionen da, kann also auch weggelassen werden.

Der CSS Code:

Code:

body { 
margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
}
.background {
position:absolute; left:0; top:0; z-index:0; 
}
#Funkpalast {
position:absolute; width:268px; height:179px; z-index:1; left: 9px; top: 9px;
}

Gruss Benni

PS: Wenn du eine Idee hast für den IE Bug, immer her damit. Habe schon verschiedene CSS Hacks versucht aber noch keine Lösung gefunden.

DariaBoy001 · 27.03.2006

Das ist die Lösung:

Code:

body { 
margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; overflow:auto; width:100%; height:100%;
}
.background {
position:absolute; left:0; top:0; z-index:0; 
}

Das Problem mit IE ist ein Bug in Bezug auf CSS und Prozentangaben. Kann man umschiffen indem man ihm mitteilt das die Seite 100% Body in beide Richtungen hat.

Du sagtest das du Scrollbalken in Safari hast? In Safari 2 habe ich keine und kann es mit 1 auch nicht testen. Hast du Safari 1 benutzt?

Hier ist übrigens das fertige Produkt zu sehen: FUNKPALAST
Gruss Benni

Automatische Größenänderung Hintergrundbild

DariaBoy001

Aktives Mitglied

Difool

MU Team

Difool

MU Team

DariaBoy001

Aktives Mitglied

DariaBoy001

Aktives Mitglied

Difool

MU Team

Difool

MU Team

DariaBoy001

Aktives Mitglied

Difool

MU Team

DariaBoy001

Aktives Mitglied

DariaBoy001

Aktives Mitglied