SWF mit PNG kombinieren

**kami** · 07.11.2009 14:33

Hallo Freunde des CSS,

versuche schon den ganzen Tag ein SWF hinter eine Graphik zu plazieren.
Leider hatte ich noch keinen Erfolg. Kann mir einer von Euch einen Wink dafür geben?
Folgendes CSS habe ich erstellt:

HTML-Code:

@charset "utf-8";
#container {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: auto;
    width: 804px;
    margin-right: auto;
    margin-left: auto;
}
#footer {
    position: absolute;
    text-align: right;
    z-index: 1;
    width: 803px;
    left: 200px;
}
#uhr {
    position: absolute;
    height: 140px;
    width: 140px;
    text-align: right;
    left: 746px;
    top: 22px;
    z-index: 3;
    }

und nun den HTML-Teil:

HTML-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test für traump</title>
<link href="index_traump.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div ID="container"></div>
<div ID="footer"><img src="rect3000.png" alt="foot" width="803" height="151" /></div> 
<div ID="uhr">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','135','height','135','title','Uhr','src','analog_uhr','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','analog_uhr' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="135" height="135" title="Uhr">
    <param name="movie" value="analog_uhr.swf" />
    <param name="quality" value="high" />
    <embed src="analog_uhr.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="135" height="135"></embed>
  </object>
  </noscript></div>
</body>
</html>

Kann mir einer helfen? Ich finde den Fehler nicht bei mir.

**His.Master's.Voice** · 07.11.2009 18:51

Hallo Reinhold,

Mit dahinter platzieren, verstehe ich so, das über der Flashgrafik eine transparente png liegen soll. Ohne es getestet zu haben: Setze den <div id="uhr"> und <div id="footer"> in den Container <div id="container">

also so

Code:

<div id="container">
   <div id="footer"><img src="......" /></div>
   <div id="uhr">Code der Flashuhr</div>
</div>

Der z-index von Footer muss dann höher sein als der von uhr, da im footer die png liegt. Du hast es anders rum gemacht. Wenn den die swf unter der png liegen soll!

Bei #container ergänzt du position:relative;
Erst wenn du diesen auf relative setzt kannst du inneren beiden per absolute postionieren, dh. mit left und top genau übereinander legen.

**kami** · 07.11.2009 21:41

Hallo Uwe,

nun das Ergebnis CSS:

HTML-Code:

@charset "utf-8";
/* CSS Document */

#container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: auto;
	width: 804px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#footer {
	position: absolute;
	text-align: right;
	z-index: 10;
	width: 803px;
}
#uhr {
	position: absolute;
	height: 140px;
	width: 140px;
	text-align: right;
	left: 546px;
	top: 22px;
	z-index: 3;
    }

und hier das HTML:

HTML-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test für traump</title>
<link href="mein_CSS/test_css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div ID="container">
<div ID="footer"><img src="http://www.traum-projekt.com/forum/images/rect3000.png" alt="klopp" /></div> 
<div ID="uhr">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','135','height','135','title','uhr','src','images/analog_uhr','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/analog_uhr' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="135" height="135" title="uhr">
    <param name="movie" value="http://www.traum-projekt.com/forum/images/analog_uhr.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.traum-projekt.com/forum/images/analog_uhr.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="135" height="135"></embed>
  </object></noscript>
</div></div>
</body>
</html>

Du kannst es auch unter http://test.rkami.de/test.php
sehen.

**His.Master's.Voice** · 08.11.2009 11:22

Hallo Reinhold,

mit normalen Grafiken funktioniert das wunderbar. Im IE soll es funktionieren, der FF tut sich da schwer, wie hier beschrieben:
http://www.traum-projekt.com/forum/2...ox-klappt.html

**kami** · 08.11.2009 19:48

Hallo Uwe,

obwohl ich diese Zeile

HTML-Code:

<param name="wmode" value="transparent">

bei der Uhr eingefügt hatte funktionierte es noch nicht.

Danach hatte ich die Uhr und den Footer im Flash vereinigt und
unter den bisherigen Code eingebaut.

Im IE6 war die Uhr nicht mehr zu sehen. Im Firefox und Opera funktionierte es.
Danach habe ich den Footer in ein GIF gewandelt, wobei der Kreis als transparent deklariert wurde. Das machte ich im Fireworks. Und siehe da auch im IE6 funktioniert das nun auch.
Das alles habe ich unter der Adresse:
testadresse

zur Startseite vom TP

Thema: SWF mit PNG kombinieren

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

SWF mit PNG kombinieren

Ähnliche Themen

Pfade kombinieren?

Formularfelder kombinieren

Vektormasken kombinieren

SQL IN und SQL AND kombinieren

Texte kombinieren....

Aktive Benutzer

Aktive Benutzer