✔ embedded object zentrieren

Status
Nicht offen für weitere Antworten.
H

harrry

Erfahrenes Mitglied
Hallo,
wenn man mit Flash8 eine HTML-Datei mit Browserabfrage und Alternativanzeige herstellen lässt, kommt ja ein Riesenscript raus - die Stelle, an der der Flashfilm eingebettet wird, sieht so aus:
PHP: 
<script language="JavaScript" type="text/javascript">
<!-- 
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {  // sofern eine akzeptable Version ermittelt wurde
    var oeTags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="800" height="200"'
    + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
    + '<param name="movie" value="meineKleine.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />'
    + '<embed src="meineKleine.swf" quality="high" bgcolor="#ffffff" '
    + 'width="800" height="200" name="meineKleine" align="middle"'
    + 'play="true"'
    + 'loop="true"'
    + 'quality="high"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.macromedia.com/go/getflashplayer">'
    + '<\/embed>'
    + '<\/object>';
    document.write(oeTags);   // Flash-Film einbetten
  } else {  // Flash ist veraltet, oder das Plug-In wurde nicht ermittelt
    var alternateContent = '<img src="alternativ.png" width="800" height="200"><br>'
      + 'Für diesen Inhalt ist der Flash Player erforderlich. '
       + '<a href=http://www.macromedia.com/go/getflash/>Flash installieren</a>';
    document.write(alternateContent);  // Nicht aus Flash stammenden Inhalt einfügen
  }
// -->
</script>
So und nun meine Frage: wie muss dieser Code lauten, wenn der eingefügte Film im Browser mittig zentriert erscheinen soll? Normalerweise ja mit einer Tabelle und darin dann zentrieren, aber geht das in diesem Skript auch?

Ist sicher ganz einfach, aber eben nicht für mich, vielen Dank im Voraus!
 
Hi,

für die horizontale und vertikale Zentrierung des Flash-Objekts bietet sich beispielsweise folgende Methode an:

Code: 
div#flashBox {
position: absolute;
left: 50%;
margin-left: -400px; /* negative Hälfte von width:800px */
width: 800px;
top: 50%;
margin-top: -100px; /* negative Hälfte von height:200px */
height: 200px;
}
Code: 
<div id="flashBox">
    <!-- Hier folgt der Script-Code -->
</div>

Ansonsten kannst du die CSS-Regel direkt auf das object-Element anwenden:

Code: 
<script language="JavaScript" type="text/javascript">
<!-- 
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {  // sofern eine akzeptable Version ermittelt wurde
    var oeTags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="800" height="200"'
    + 'style="position:absolute;left:50%;margin-left:-400px;width:800px;top:50%;margin-top:-100px;height:200px;"'
    + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
    + '<param name="movie" value="meineKleine.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />'
    + '<embed src="meineKleine.swf" quality="high" bgcolor="#ffffff" '
    + 'width="800" height="200" name="meineKleine" align="middle"'
    + 'play="true"'
    + 'loop="true"'
    + 'quality="high"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.macromedia.com/go/getflashplayer">'
    + '<\/embed>'
    + '<\/object>';
    document.write(oeTags);   // Flash-Film einbetten
  } else {  // Flash ist veraltet, oder das Plug-In wurde nicht ermittelt
    var alternateContent = '<img src="alternativ.png" width="800" height="200"><br>'
      + 'Für diesen Inhalt ist der Flash Player erforderlich. '
       + '<a href=http://www.macromedia.com/go/getflash/>Flash installieren</a>';
    document.write(alternateContent);  // Nicht aus Flash stammenden Inhalt einfügen
  }
// -->
</script>
Da es hier nicht um ein spezielles Problem mit einem HTML-Editor, sondern um die Positionierung eines Elements geht, schiebe ich den Thread mal ins CSS-Board.
 
Vielen Dank!

Es geht, aber noch nicht ganz. Die zweite Variante (position...) funktioniert in FF und Netscape, aber im neuen iExplorer werden der Flashfilm bzw. das Alternativ-Gif nicht angezeigt, sondern nur die Kontur - und die ist oben und linksbündig platziert statt mittig zentriert. Kann man da was machen, dass es auch im IE geht?

Vielleicht klappts mit der ersten von Dir vorgschlagenen Variante besser (bzw. in allen Browsern) - aber wie sieht der Code in seiner Gesamtheit aus? Habe versucht, das Script an der von Dir bezeichneten Stelle einzufügen, aber es hat nicht geklappt. Würdest Du vielleicht noch einmal den kompletten Code für "Variante 1" posten?

Thanks again

//EDIT

Sorry, vom oben geschilderten Problem ist nur noch ein Teil gültig: auch der IE zeigt den Film bzw. das Gif an, das ist also gelöst - nur: während in den anderen Browsern die Positionierung in der Mitte klappt, steht der Film im IE immer noch oben und am linken Rand...
 
Ich poste dir mal den vollständigen Quellcode des Dokuments:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#flashBox {
position: absolute;
left: 50%;
margin-left: -400px; /* negative Hälfte von width:800px */
width: 800px;
top: 50%;
margin-top: -100px; /* negative Hälfte von height:200px */
height: 200px;
border: 1px solid #000;
}
-->
</style>

</head>
<body>

<div id="flashBox">
    <!-- Hier folgt der Script-Code -->
</div>

</body>
</html>
 
Ist ja wunderbar - funktioniert jetzt auch im IE! Herzlichen Dank!

Aber noch eine Frage dazu: ich habe unterhalb der "flashbox" diverse Inhalte in einem Tabellengerüst eingefügt. In Firefox und Netscape erscheint nun die "flashbox" wie gewünscht, mittig, aber wie in einer Extra-Ebene ÜBER dieser Tabelle (und verdeckt sie damit teilweise)... während dasselbe Skript, im IE geöffnet, die "flashbox" ebenfalls mittig, aber freistehend anzeigt und darunter anschließend die Tabelle.

Wie kann man dafür sorgen, dass das in allen Browsern einheitlich geschieht?

Zur Verdeutlichung das komplette Skript:
PHP: 
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>alternativGifTest</title>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globale Variablen
// Erforderliche Hauptversion von Flash
var requiredMajorVersion = 8;
// Erforderliche Unterversion von Flash
var requiredMinorVersion = 0;
// Erforderliche Flash-Revision
var requiredRevision = 0;
// Die unterstützte JavaScript-Version
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual Basic-Hilfsprogramm ist zur Ermittlung der Versionsinformationen des Flash Player ActiveX-Steuerelements erforderlich
Function VBGetSwfVer(i)
  on error resume next
  Dim swControl, swVersion
  swVersion = 0
  
  set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
  if (IsObject(swControl)) then
    swVersion = swControl.GetVariable("$version")
  end if
  VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Client-Browsertyp ermitteln
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript-Hilfsprogramm ist zur Ermittlung der Versionsinformationen des Flash Player Plug-Ins erforderlich
function JSGetSwfVer(i){
    // NS/Opera-Version >= 3 auf Flash-Plug-In im Plug-In-Array prüfen
    if (navigator.plugins != null && navigator.plugins.length > 0) {
        if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
            var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
              var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
            descArray = flashDescription.split(" ");
            tempArrayMajor = descArray[2].split(".");
            versionMajor = tempArrayMajor[0];
            versionMinor = tempArrayMajor[1];
            if ( descArray[3] != "" ) {
                tempArrayMinor = descArray[3].split("r");
            } else {
                tempArrayMinor = descArray[4].split("r");
            }
              versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
            flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
          } else {
            flashVer = -1;
        }
    }
    // MSN/WebTV 2.6 unterstützt Flash 4
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
    // WebTV 2.5 unterstützt Flash 3
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
    // älteres WebTV unterstützt Flash 2
    else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
    // Ermittlung in allen anderen Fällen nicht möglich
    else {
        
        flashVer = -1;
    }
    return flashVer;
} 
// Wenn der Funktionsaufruf ohne Parameter erfolgt, gibt diese Funktion einen Gleitkommawert zurück,
// bei dem es sich entweder um die Flash Player-Version oder um 0.0 handelt.
// Beispiel: Flash Player 7r14 gibt 7.14 zurück.
// Wenn reqMinorVer, reqMajorVer, reqRevision aufgerufen wird, wird 'true' zurückgegeben, sofern diese bzw. eine höhere Version verfügbar ist
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision) 
{
     reqVer = parseFloat(reqMajorVer + "." + reqRevision);
       // Versionen rückwärts durchlaufen, bis die neueste Version gefunden wird    
    for (i=25;i>0;i--) {    
        if (isIE && isWin && !isOpera) {
            versionStr = VBGetSwfVer(i);
        } else {
            versionStr = JSGetSwfVer(i);        
        }
        if (versionStr == -1 ) { 
            return false;
        } else if (versionStr != 0) {
            if(isIE && isWin && !isOpera) {
                tempArray         = versionStr.split(" ");
                tempString        = tempArray[1];
                versionArray      = tempString .split(",");                
            } else {
                versionArray      = versionStr.split(".");
            }
            versionMajor      = versionArray[0];
            versionMinor      = versionArray[1];
            versionRevision   = versionArray[2];
            
            versionString     = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
            versionNum        = parseFloat(versionString);
            // ist die Hauptrevision >= angeforderte Hauptrevision UND die Nebenversion >= angeforderte Nebenversion
            if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
                return true;
            } else {
                return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );    
            }
        }
    }    
    return (reqVer ? false : 0.0);
}
// -->
</script>
<style type="text/css">
<!--
div#flashBox {
position: absolute;
left: 50%;
margin-left: -400px; /* negative Hälfte von width:800px */
width: 800px;
top: 20%;
margin-top: -100px; /* negative Hälfte von height:200px */
height: 200px;
border: 0px solid #000;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 7pt;
    color: #666666;
}
a:link {
    color: #666666;
}
a:visited {
    color: #666666;
}
a:hover {
    color: #990000;
}
a:active {
    color: #990000;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style></head>
<body>

<div id="flashBox">
<script language="JavaScript" type="text/javascript">
<!-- 
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) {  // sofern eine akzeptable Version ermittelt wurde
    var oeTags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="800" height="200"'
    + 'style="position:absolute; left:50%; margin-left:-400px; width:800px; top:0%; margin-top:0px; height:200px;"'
    + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
    + '<param name="movie" value="banner.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />'
    + '<embed src="banner.swf" quality="high" bgcolor="#ffffff" '
    + 'width="800" height="200" name="banner" align="middle"'
    + 'play="true"'
    + 'loop="true"'
    + 'quality="high"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.macromedia.com/go/getflashplayer">' 
    + '<\/embed>'
    + '<\/object>';
    document.write(oeTags);   // Flash-Film einbetten
  } else {  // Flash ist veraltet, oder das Plug-In wurde nicht ermittelt
    var alternateContent = '<img src="banner.png" width="800" height="200"><br>'
      + 'Für diesen Inhalt ist der Flash Player erforderlich. '
       + '<a href=http://www.macromedia.com/go/getflash/>Flash installieren</a>';
    document.write(alternateContent);  // Nicht aus Flash stammenden Inhalt einfügen
  }
// -->
</script>
<table width="810" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
   <td><img src="bilder/spacer.gif" width="21" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="69" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="95" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="87" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="47" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="71" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="22" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="49" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="87" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="262" height="1" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr>
   <td rowspan="10"><img name="webgfxALL_r1_c1" src="bilder/webgfxALL_r1_c1.jpg" width="21" height="720" border="0" alt=""></td>
   <td><img name="webgfxALL_r1_c2" src="bilder/webgfxALL_r1_c2.jpg" width="69" height="29" border="0" alt=""></td>
   <td><img name="webgfxALL_r1_c3" src="bilder/webgfxALL_r1_c3.jpg" width="95" height="29" border="0" alt=""></td>
   <td><img name="webgfxALL_r1_c4" src="bilder/webgfxALL_r1_c4.jpg" width="87" height="29" border="0" alt=""></td>
   <td colspan="2"><img name="webgfxALL_r1_c5" src="bilder/webgfxALL_r1_c5.jpg" width="118" height="29" border="0" alt=""></td>
   <td colspan="2"><img name="webgfxALL_r1_c7" src="bilder/webgfxALL_r1_c7.jpg" width="71" height="29" border="0" alt=""></td>
   <td rowspan="2" colspan="2"><img name="webgfxALL_r1_c9" src="bilder/webgfxALL_r1_c9.jpg" width="349" height="294" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="29" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="7"><img name="webgfxALL_r2_c2" src="bilder/webgfxALL_r2_c2.jpg" width="440" height="265" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="265" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="4"><img name="webgfxALL_r3_c2" src="bilder/webgfxALL_r3_c2.jpg" width="298" height="28" border="0" alt=""></td>
   <td rowspan="2" colspan="2"><img name="webgfxALL_r3_c6" src="bilder/webgfxALL_r3_c6.jpg" width="93" height="125" border="0" alt=""></td>
   <td colspan="3" rowspan="3" valign="top" background="bilder/webgfxALL_r3_c8.jpg"><table width="97%"  border="0" cellspacing="0" cellpadding="10">
     <tr>
       <td><span class="Stil2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
         </span>
         <p class="Stil2">Lorem ipsum dolores amet, consectetuer adipiscing elit, diam nibh euismod tincidunt ut laoreet dolore magna mod tinci dunt ut dolore magna <a href="http://www.irgendwas.at">aliquam erat volutpat</a>. Elit sed diamy nibh euis tincidunt ut laoreet dolore lobortis ut aliquip ex tincidunt ut dolore magna aliquam erat commodo.</p></td>
     </tr>
   </table></td>
   <td><img src="bilder/spacer.gif" width="1" height="28" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="4" rowspan="3" valign="top" background="bilder/webgfxALL_r4_c2.jpg"><table width="90%"  border="0" cellspacing="0" cellpadding="10">
     <tr>
       <td><span class="Stil2">Lorem ipsum dolor sit amet, con secte tuer adipiscing elit. Aliquam erat volut pat. <span class="Stil7">Ut wisi enim ad minim veniam sed euismod tincidunt ut. </span></span>         <p class="Stil2">Wisi enim ad minim venia eniam sed euis mod tit elit, sed diamy nibh tinci dunt aut laoreet dolore ad minim venia eniam sed euis mod tit elit, sed diamy nibhmagna enim adesso minim veniam, quid exer. <a href="http://www.irgendwas.at">Warum?</a></p></td>
     </tr>
   </table></td>
   <td><img src="bilder/spacer.gif" width="1" height="97" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="4" colspan="2"><img name="webgfxALL_r5_c6" src="bilder/webgfxALL_r5_c6.jpg" width="93" height="193" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="36" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="3" rowspan="3" valign="top" background="bilder/webgfxALL_r6_c8.jpg"><table width="96%"  border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
       <td><span class="Stil2"><a href="http://www.irgendwas.at">Duis autem vel dolor hendrerit </a><br>
           <a href="http://www.irgendwas.at">Vulputate velit molestie consequat<br>
         Vel illum dolore feugiat facilisis vero<br>
         Duis vuluptat verel dolor hendrerit <br>
         Vulputate velit feugat core consequat<br>
         Vel illum dolore feugiat facilisis vero</a></span></td>
     </tr>
   </table></td>
   <td><img src="bilder/spacer.gif" width="1" height="48" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="4"><img name="webgfxALL_r7_c2" src="bilder/webgfxALL_r7_c2.jpg" width="298" height="25" border="0" alt=""></td>
   <td><img src="bilder/spacer.gif" width="1" height="25" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="4" rowspan="2" valign="top" background="bilder/webgfxALL_r8_c2.jpg"><table width="90%"  border="0" cellspacing="0" cellpadding="10">
     <tr>
       <td><p class="Stil2"><span class="Stil7">Aliquam erat volut pat.</span> Ut wisi enim ad enim ad minim. Lorem minim veniam sed euismodipsum dolor sit amet, con secte tuer adipiscing elit.</p>
         <p class="Stil2">Lorem ipsum dolor sit amet, con secte tuer adipiscing elit. Aliquam erat volut pat. Ut wisi enim ad minim veniam sed euismod tincidunt ut. <a href="http://www.irgendwas.at">Warum?</a></p></td>
     </tr>
   </table></td>
   <td><img src="bilder/spacer.gif" width="1" height="84" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="4" valign="top" background="bilder/webgfxALL_r9_c6.jpg"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td height="58"><span class="Stil2"><span class="Stil9">28/03/15<br>
         Lorem ipsum sehr sexy dolor sit amet, con secte tuer  elit, sed  aliquam.</span><br> 
         </span></td>
     </tr>
   </table></td>
   <td valign="top" background="bilder/webgfxALL_r9_c10.jpg"><table width="89%"  border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td height="58"><span class="Stil2"><span class="Stil9">28/05/07<br>
      Lorem ipsum sehr sexy dolor sit amet, con secte tuer elit, sed aliquam.</span><br>
       </span></td>
     </tr>
   </table></td>
   <td><img src="bilder/spacer.gif" width="1" height="89" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="4"><span class="Stil13">&copy; 2007 Wir h&ouml;ren zu  | Design by irgendwas.at </span></td>
   <td colspan="5"><div align="center" class="text5 Stil10"><a href="#">Home</a> | <a href="#">&Uuml;ber Uns </a> | <a href="#">Service</a> | <a href="#">Nachrichten</a> | <a href="#">Partner</a> | <a href="#">News</a> | <a href="#">Kontakt</a></div></td>
   <td><img src="bilder/spacer.gif" width="1" height="19" border="0" alt=""></td>
  </tr>
</table>
</body>
</html>
 
Du könntest beispielsweise die Höhe für die "flashBox" um das Maß erhöhen, das die Tabelle beansprucht, und diese dann ebenfalls in dem DIV einbetten. Hierbei gilt dann für die vertikale Zentrierung, dass der margin-top-Wert die negative Hälfte der Elementhöhe betragen muß.

Und wie ich sehe, hast du vergessen, das schliessende </div> im Quellcode zu notieren.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück