Wo finde ich ein solches Script?

Vindicare · Beitrag von **Vindicare** » Do Jul 24, 2003 10:21 am

Hallo

ich suche ein Applet oder Script, dass mir auf der Startsite einer Homepage, die ich gerade am machen bin, ein Bild aus dem Hintergrund hervorzoomt. Gibts sowas for free???

Für einen Tip danke ich im voraus..

Gruss

Vindicare

Katana · Beitrag von **Katana** » Do Jul 24, 2003 5:48 pm

Du willst also erst einen schwarzen (oder zumindest einfarbigen) Hintergrund anzeigen und dann soll von hinten ein Bild auf volle Größe gebracht werden?

Würde mit JavaScript + CSS funktionieren, ich weiß allerdings nicht, ob alle Browser die CSS Eigenschaft ""z-index"" umsetzen. Ein Applet würde ich dafür auf jeden Fall nicht empfehlen.

Kannst ja mal folgendes testen:

Code: Alles auswählen

<script type="text/javascript">
var to;

// um wieviel % das Bild bei jedem Schritt vergrößert werden soll
var resizeWidth = 2; // Breite
var resizeHeight = 2; // Höhe

// Millisekunden zwischen den Schritten
var interval = 100;

// Ab hier brauchste nix mehr ändern!
function test() {
	var width = document.getElementById('bild').style.width;
	var height = document.getElementById('bild').style.width;
	if (width.indexOf('%') > 0) {
		width = parseInt(width.substring(0, width.indexOf('%')));
	}
	if (height.indexOf('%') > 0) {
		height= parseInt(height.substring(0, height.indexOf('%')));
	}
	if (width >= 100 || height >= 100) {
		clearTimeout(to);
		return;
	}

	width += resizeWidth;
	height += resizeHeight;
	
	document.getElementById('bild').style.width = width + '%';
	document.getElementById('bild').style.height = height + '%';
	document.getElementById('bild').style.left = (screen.width / 2) - (document.getElementById('bild').width / 2)
	document.getElementById('bild').style.top = (screen.height / 2) - (document.getElementById('bild').height / 2)

	to = setTimeout("test()", interval);
}
</script>

In die HTML Seite z.B. folgendes:

Code: Alles auswählen

<body style="background: rgb(0,0,0);">
<input type="button" onclick="test();" /><br />
<img id="bild" src="bild.jpg" style="width: 0%; height: 0%; z-index: -1; position: absolute; left: 1px; right: 1px;" alt="bild" />
</body>

oder

Code: Alles auswählen

<body style="background: rgb(0,0,0);" onload="test();">
<img id="bild" src="bild.jpg" style="width: 0%; height: 0%; z-index: -1; position: absolute; left: 1px; right: 1px;" alt="bild" />
</body>

.

Das Bild muß auf ""z-index: -1"

Vindicare · Beitrag von **Vindicare** » Do Jul 24, 2003 6:06 pm

Tönt interessant. Wo kann ich nachschauen wie ich das mach?

Katana · Beitrag von **Katana** » Do Jul 24, 2003 6:08 pm

Siehe oben (dieser Post war, damit man sieht, daß es aktualisiert wurde)

Vindicare · Beitrag von **Vindicare** » Do Jul 24, 2003 6:17 pm

Danke Katana, hab jetzt grad keine Zeit mehr es zu testen (geh T3 schauen), aber morgen kümmer ich mich darum!

Vindicare · Beitrag von **Vindicare** » Do Jul 24, 2003 11:03 pm

Scheint mehr oder weniger zu funktionieren! Ein paar Details aber noch:

- Bei welchem Wert kann ich die Grösse des Bildes festlegen?
- Wie kann ich machen, dass anstatt den Button zu drücken, das ganze gleich beim Laden kommt (vielleicht sogar mit preload)?
- Wie zur Hölle kann ich die Reihenfolge des Designs festlegen???

Mein Wurstelcode sieht momentan so aus:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="background: rgb(0,0,0);">
<table width="700" border="0">
  <tr> 
    <td colspan="2"><input type="button" onclick="test();" value="Enter the Site" /><br /> 
<img id="bild" src="pics/tania.jpg" style="width: 0%; height: 0%; z-index: -1; position: absolute; left: 1px; right: 1px;" alt="bild" /></td>
  </tr>
  <tr> 
    <td colspan="2"><script type="text/javascript"> 
var to; 

// um wieviel % das Bild bei jedem Schritt vergrößert werden soll 
var resizeWidth = 2; // Breite 
var resizeHeight = 2; // Höhe 

// Millisekunden zwischen den Schritten 
var interval = 100; 

// Ab hier brauchste nix mehr ändern! 
function test() { 
   var width = document.getElementById('bild').style.width; 
   var height = document.getElementById('bild').style.width; 
   if (width.indexOf('%') > 0) { 
      width = parseInt(width.substring(0, width.indexOf('%'))); 
   } 
   if (height.indexOf('%') > 0) { 
      height= parseInt(height.substring(0, height.indexOf('%'))); 
   } 
   if (width >= 100 || height >= 100) { 
      clearTimeout(to); 
      return; 
   } 

   width += resizeWidth; 
   height += resizeHeight; 
    
   document.getElementById('bild').style.width = width + '%'; 
   document.getElementById('bild').style.height = height + '%'; 
   document.getElementById('bild').style.left = (screen.width / 2) - (document.getElementById('bild').width / 2) 
   document.getElementById('bild').style.top = (screen.height / 2) - (document.getElementById('bild').height / 2) 

   to = setTimeout("test()", interval); 
} 
</script></td>
  </tr>
  <tr> 
    <td><a href="framed.htm" target="_self">Deutsch</a> / <a href="framei.htm">Italiano</a></td>
    <td><!-- Begin Nedstat Basic code -->
<!-- Title: tanianocco.com -->
<!-- URL: http://www.tanianocco.com/ -->
<script language="JavaScript" type="text/javascript" src="http://m1.nedstatbasic.net/basic.js">
</script>
<script language="JavaScript" type="text/javascript" >
<!--
  nedstatbasic("ACV+6ArOkJNaEw0yJwEUBfsZwN4A", 0);
// -->
</script>
<noscript>
<a target="_blank" href="http://v1.nedstatbasic.net/stats?ACV+6ArOkJNaEw0yJwEUBfsZwN4A"><img
src="http://m1.nedstatbasic.net/n?id=ACV+6ArOkJNaEw0yJwEUBfsZwN4A"
border="0" nosave width="18" height="18"
alt="Nedstat Basic - Free web site statistics"></a>
</noscript>
<!-- End Nedstat Basic code --></td>
  </tr>
</table>
</body>
</html>

Katana · Beitrag von **Katana** » So Jul 27, 2003 1:52 pm

- Bei welchem Wert kann ich die Grösse des Bildes festlegen?

Brauchst du nicht, das Script vergrößert Prozentual, also bis das Bild seine volle Größe (100%) erreicht hat.

- Wie kann ich machen, dass anstatt den Button zu drücken, das ganze gleich beim Laden kommt (vielleicht sogar mit preload)?

Siehe ""oder so:""

- Wie zur Hölle kann ich die Reihenfolge des Designs festlegen???

Noch ein paar Sachen:

Der <script></script> Teil kommt entweder in den <head></head> Bereich, oder in den <body></body> Bereich, aber nicht in die Tabelle.
Das Script vergrößert das Bild im Hintergrund (damit Elemente davor noch zu sehen sind) und zwar zentriert.

Vindicare · Beitrag von **Vindicare** » So Jul 27, 2003 2:02 pm

Danke Katana, habs mit Flash gemacht, aber hab trotzdem was gelernt