Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript]problem z "nakładaniem" elementu html na element flash
Forum PHP.pl > Forum > Przedszkole
siemieng
30.05.2008, 23:14:24
witam -> mam problem dotyczący zrobienia prostego, rozwijanego menu opartego na zdarzeniach mouseover i mouseout sterującymi właściwością display: none i block elementu div.....

Sprawa wygląda tak, gdy po najechaniu na odpowiedni element pojawia się menu wszystko jest ok, dopóki menu pojawia się w "sąsiedztwie" innych elementów html, natomiast przy elemencie flash pojawia się problem, ponieważ flash jest zawsze na wierzchu. Pomimo zastosowania position:absolute, bawiłem się także z-index: ale nic nie daje. FLASH zawsze na górze:/

A obecnie mam strone do zrobienia z takim menu na całą szerokość + po nin reklama flash - i tu mam problem, nad którym spędziłem dzisiejszy dzień i nic mądrego nie wymyśliłem:/

Zresztą zobaczcie sami:
oto link to prostego przykładu obrazującego problem:

http://edance.pl/trycode/flash/flash.html

jak widać po najechaniu na element, pojawiający się szary blok jest zawsze pod spodem:/ (a tak sie rozwijanego menu nie da zrobić:P)

oto kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
  2. <html>
  3.   <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta name="author" content="qwa">
  7.     <meta name="generator" content="SWiSH Max (2007.11.02) http://www.swishzone.com/">
  8.     <meta name="description" content="">
  9.     <meta name="keywords" content="flash">
  10.     <!-- text used in the movie -->
  11.     <!-- flash -->
  12.     <!-- Created by SWiSH Max - Flash Made Easy - www.swishzone.com -->
  13.     <style type="text/css">
  14.        .firstBox {
  15.                 width:160px;
  16.                 height:40px; 
  17.                 font-size:14px;
  18.                 font-weight:bold;
  19.                 text-align:center;
  20.                 color:#ffffff;
  21.                 border-style:solid;
  22.                 border-width:2px;
  23.                 border-color:#ffffff;
  24.                 background-color:#333333;
  25.                 }
  26.  
  27.        .secondBox {
  28.                 width:400px;
  29.                 height:400px; 
  30.                 background-color:#adadad;
  31.                 display:none;
  32.                 position:absolute; }
  33.  
  34.     </style>
  35.  
  36.     <script type="text/javascript" language="javascript">
  37.     function showBox (eId) {
  38.         var eId = document.getElementById(eId);
  39.         eId.style.display='block';
  40.     }
  41.  
  42.      function hideBox (eId) {
  43.         var eId = document.getElementById(eId);
  44.         eId.style.display='none';
  45.     }
  46.     </script>
  47.  
  48.   </head>
  49.   <body bgcolor="#ffffff">
  50.     <div class="firstBox" onmouseover="showBox('divId');" onmouseout="hideBox('divId');">::naglowek::<br />(onmouseover)</div>
  51.  
  52.     <div class="secondBox" id="divId"></div>
  53.  
  54.     <br />
  55.       <object
  56.         classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  57.         codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
  58.         id="flash"
  59.         width="600" height="150"
  60.       >
  61.         <param name="movie" value="flash.swf">
  62.         <param name="bgcolor" value="#0066FF">
  63.         <param name="quality" value="high">
  64.         <param name="allowscriptaccess" value="samedomain">
  65.         <embed
  66.           type="application/x-shockwave-flash"
  67.           pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
  68.           name="flash"
  69.           width="600" height="150"
  70.           src="flash.swf"
  71.           bgcolor="#0066FF"
  72.           quality="high"
  73.           allowscriptaccess="samedomain"
  74.         >
  75.           <noembed>
  76.           </noembed>
  77.         </embed>
  78.       </object>
  79.   </body>
  80. </html>
[HTML] pobierz, plaintext



kod jest domyślnym plikiem wyeksportowanym z SWiSH Max2 (w którym robię elementy flash) + na szybko dodany css i js

co więcej nie poradziły sobie z tym też wszystkie gotowe skrypty pościągane z sieci (np: skrypt na: http://www.kurshtml.boo.pl/skrypty/pozycja..._rozwijane.html też sobie z tym nie radzi:/)

Natomiast efekt, który chciałbym osiągnąć można zobaczyć na: http://www.time.com/time/specials/2007/top...1686204,00.html

tu całe menu jest zrobione w podobny sposób i działa tak jak powinno z reklamami w formacie flasha........

Proszę o pomoc, z góry dzięki winksmiley.jpg

pozdrawiam...
nithajasz
30.05.2008, 23:37:14
.secondBox {
width:400px;
height:400px;
background-color:#adadad;
display:none;
position:fixed;}

Zmiana position na fixed powinna poskutkować smile.gif
siemieng
30.05.2008, 23:47:00
przez dzień spędzony nad tym ****** próbowałem wszystkiego i kombinowałem jak mogłem;

co do position:fixed -> działa ale tylko pod firefoxem

sprawdź sam (to samo co wcześniej z position zmienionym na fixed);

http://edance.pl/trycode/flash/flash2.html

Firefox -OK; IE - interpretuje jak relative; Opera - jak absolute wcześniej :/
nithajasz
31.05.2008, 00:17:06
Niestety IE nie obsługuje position:fixed, ponoć 7 tak ale jak widzę jest to tylko ponoć..

Patrzyłem może znajde coś ciekawego jak to obejść ale nie testowałem, może się przyda..

http://divinentd.com/experiments/emulating...tion-fixed.html
http://www.finefrog.com/2007/02/26/faking-...net-explorer-6/
http://www.nowcss.com/javascript/emulating...d-in-ie-6-below
devnul
31.05.2008, 00:24:30
nie wczytywałem się w tekst dokładnie bo jest już stosunkowo późno a tekst posta dość spory, więc jeśli dobrze interpretuję problem to sprawę załatwić powinien iframe pozycjonowany absolutnie (tak jak menu) o identycznych parametrach wysokości/szerokości jak poprzedni będący pod warstwą służącą za menu z ustawionym display:none. Do tego proponuje zapoznać się z notą techniczną adobe bo problem leży w dużej mierze w samej wtyczce flasha
siemieng
31.05.2008, 07:49:04
"nithajasz" dzięki wielkie za pomoc, ale podobnie jak ja myślałeś i kombinowałeś w stronę rozwiązania po stronie CSS, a tu problem leżał po stronie elementu flash.

Natomiast szczere podziękowania i szacuneczek w stronę "devnul" exclamation.gif

faktycznie wystarczyło dodać:
[HTML] pobierz, plaintext 
  1. <param name="movie" value="flash.swf">
  2.         <param name="bgcolor" value="#0066FF">
  3.         <param name="quality" value="high">
  4.         <param name="allowscriptaccess" value="samedomain">
  5.         <param name="wmode" value="opaque">
  6.         <embed
  7.           type="application/x-shockwave-flash"
  8.           pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
  9.           name="flash"
  10.           width="600" height="150"
  11.           src="flash.swf"
  12.           bgcolor="#0066FF"
  13.           quality="high"
  14.           allowscriptaccess="samedomain"
  15.           [b]wmode="opaque"[/b]
  16.         >
[HTML] pobierz, plaintext


o czym wyjaśnione na: http://kb.adobe.com/selfservice/viewConten...3&sliceId=2

Raz jeszcze dzięki wielkie winksmiley.jpg

pozdrawiam...
webdice
31.05.2008, 07:56:51
Proszę o dodanie do postów odpowiednich bbcode.
pest
31.05.2008, 08:22:39
A ja jak zwykle przypomnę o tym, żeby jednak starać się nie stosować elementów flasha, tam gdzie mają być przykryte przez html.
W Linuksie nie ma na to rozwiązania i flash zawsze będzie na wierzchu (z tej instrukcji adobe wynika, że przeglądarki w linuksie nie obsługują parametru wmode).
devnul
31.05.2008, 11:31:30
@pest: w linuksie rozwiązaniem jest właśnie wstawienie iframa w sposób jaki opisałem wyżęjza cieka, zresztą, proponuje zobaczyć żywy przykład - video.google.com - oni mogli to czemu innym ma się nie udać
pest
5.06.2008, 11:53:36
devnul: Sorki, że cię męczę, ale mógłbyś mi zademonstrować (link) stronkę, gdzie element html nakłada się na element flash i działa to również w linuksie. Co do video.google.com, nie znalazłem tam strony, na której element html miałby wejść w flash'a. Sam kombinowałem z iframe'ami, ale wynik taki jak i bez nich.

Co do noty technicznej Adobe - nie ma tam nic wspomniane o Linuksie, jakby go w ogóle nie badali. Jedyne o czym wspominają to kilka kombinacji przeglądarek i systemy od 2 producentów (Windows i MacOS). Ja mam po prostu wrażenie że ten akapit odnosi się do wszystkich przeglądarek w Linuksie
Cytat(Nota Tech Adobe nr 15523)
The WMODE parameter is supported only on some browser/Flash Player version combinations. If the WMODE parameter is not supported, the Flash movie will always display on top. Refer to TechNote 14201 for details.
devnul
5.06.2008, 14:03:51
informacja:
http://blog.marcoos.com/2006/07/21/html-di...x-its-possible/

przykład:
http://piast.pertus.com.pl/~marcoos/flashlinux/

co prawda tylko div ale nie widzę problemy żeby zrobić z tego pełnoprawne menu
pest
5.06.2008, 14:36:28
Biję pokłony, nie widziałem tych przykładów, a już trochę szperałem za tym w sieci. Nie to, żeby było to szczególnie wygodne do zastosowania, ale da się.

devnul: Heh dał bym Ci "pomógł" ale to nie mój temat winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.