Hello, First of all .... happy new year to everyone! I have a page with a image map and at the bottom a flash music player. Clicking on some places of the image, I get a popup effect window shown. My problem is that I have a flash music player always on top....what can I do so the player stays behind.... Here is part of the code...clicking on the right handside, more or less at 3cm from the right and 2.5cm from the top (you don't have the image)" shows a popup effect page but the flahs player stays on top!! Thanks for your help! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Pagina web oficial del grupo de Jazz Café Paris</title> <script type="text/javascript" src="flash_v0/swfobject.js"></script> <link rel="stylesheet" type="text/css" href="css/style_test.css" > </head> <body background="images/background.JPG"> <p class="right"> <img border="0" src="images/menu2_with_links1.JPG" width="327" height="239" usemap="#menu" alt="Amenización Jazz - Seleccione la nota cerca del comentarioque desee"> </p> <map name="menu" id="menu"> <area href = "javascript:void(0)" onclick = "document.getElementById('bio').style.display='block';document.getElementById('fadeBio').style.display='block'" alt="Lo que el grupo de jazz Café Paris ha hecho hasta ahora" shape="polygon" coords="206, 17, 204, 63, 232, 63, 234, 80, 151, 80, 156, 59, 191, 57, 195, 29"> <div id="bio" class="white_content1"> Some comments <bl> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> <li>comments</li> </bl> <p ><a href = "javascript:void(0)" onclick = "document.getElementById('bio').style.display='none';document.getElementById('fadeBio').style.display='none'">Cerrar ventana</a></p> </div> <div id="fadeBio" class="black_overlay"></div> </map> <!-- saved from url=(0013)about:internet --> <div id="flashPlayer" style="position:absolute; top: 370px; right:10px" > <p>< img src="images/logo.jpg" alt="Cafe Paris" width="60" height="152" /> <br /><br /><br /><br /><br /><br /> Para ver esta web es necesario plug-in de Flash 8 como minimo, si no lo tiene <a href="http://www.macromedia.com/go/getflashplayer" target="_blank">descarguelo gratuitamente aquÃ</a>. </p> </div> <script type="text/javascript"> var so = new SWFObject("flash_v0/playerMultipleList.swf", "temas", "255", "145", "7", "#FFFFFF"); so.addVariable("autoPlay","no") so.addVariable("playlistPath","playlist.xml") so.write("flashPlayer"); </script> </script> </body> HTML:
Maybe try giving the items you want "underneath" a css class: /* css style */ .under { z-index: 1; } Code (markup): ... and those that should appear "above" a css class: /* css style */ .over { z-index: 100; } Code (markup): Not tested, but hope that it helps.
i get this just by googling. Dong know which is the best solution. But you can try it which is lightbox for flash http://videobox-lb.sourceforge.net/
try adding the parameter wmode=transparent to the swfobject call in javascript so.addParam("wmode", "transparent"); Code (markup): i believe that's the syntax. if not, google.