flash-filmpje afsluiten

Status
Niet open voor verdere reacties.
M

motower

Gebruiker
Lid geworden
10 aug 2004
Berichten
472
Hallo, ik heb een flash-filmpje gemaakt (http://www.strongbeads.com/Powerful_Unique_Jewellery/strongbeads.html) en nu wil ik eigenlijk dat het filmpje weggaat als je er op klikt ...

Wat ik nu heb gedaan is "behelpen" en werkt niet in alle browsers: heb een button gemaakt in flash met een kruisje die eigenlijk niet werkt en een layer in DW met een behavior, maar die behavior werkt niet in alle browsers.

Ik heb wel gevonden in flash dat het filmpje weggaat, maar dan houd ik de kleur van de stage over en hij moet eigenlijk helemaal weg.
 
Hoi motower,
De onclick-vernietiging werkt waarschijnlijk niet in alle browsers, omdat deze <div> net zo groot is als het flash-filmpje; terwijl flash altijd in een bovenste laag zit om de flash-controls te kunnen bedienen. Daar kan je dan niet bovenuit stijgen.

Het kan wel, als je in de <div> wat ruimte creëert waarin het uit-kruisje staat, zodat het flash-object pas daaronder begint (en dan geen uit-kruisje hoeft te hebben).
HTML: 
<div id="overlay">
   <div id="turnOff">
      <a href="#" onclick="document.getElementById('overlay').style.display='none'; return false;">x</a>
   </div>
   <object ... enz.
met bv.:
Code: 
#turnOff {
    text-align: center; /* of anders */
    margin-bottom: 5px;
    } 
#turnOff a {
    padding: 1px 6px 2px 6px;
    background: black; 
    color: white;
    }
Die zou het in alle browsers moeten doen (alleen in FF getest).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi CSS Hunter, bedankt voor je tip, maar het zou mooi zijn als het in flash zou kunnen zodat het kruisje er niet boven hoeft.
 
Hoi motower,
Ja het bovenkruisje vond ik ook niet zo mooi. Ik bedacht nog het volgende alternatief.

Eerst het oog in het midden van de 4 images-kolommen zetten, dat oogt wat beter :) :
Code: 
#overlay {
    ...
    left: 50%;
    margin-left: -275px;
}
(dit werkt v/a resolutie 1024*768px)

Even een verdwijnfunctie maken:
HTML: 
<script type="text/javascript">
function turnOff(){
    document.getElementById('overlay').style.display='none';
}
</script>

En deze functie niet aan een onclick-event koppelen, maar aan een onmouseover op de twee middelste kolommen:
HTML: 
<map name="Map" id="Map">
    <area shape="rect" coords="2,3,145,388" href="gallery_necklaces.html" target="_self" alt="statement necklaces" />
    <area onmouseover="turnOff()" shape="rect" coords="166,2,313,386" href="things.html" target="_self" alt="things that i like" />
    <area onmouseover="turnOff()" shape="rect" coords="336,-2,480,379" href="gallery_strongbells.html" target="_self" alt="strongbells" />
    <area shape="rect" coords="500,-4,654,383" href="gallery_bodybeads.html" target="_self" alt="bodybeads" />
</map>
En voor de veiligheid ook aan de flash-div zelf (die blijkt wat padding te hebben, waardoor het daar ook werkt), voor de enkeling die op < 1024px breedte zit:
HTML: 
<div id="overlay" onmouseover="turnOff()">
Zo is het oog al verdwenen als men op weg gaat naar het kruisje in de flash. ;)
Met vriendelijke groet,
CSShunter
 
CSShunter, het werkt!!
Echt waanzinnig bedankt voor al je moeite :d

Maar, wat ik me nog wel afvraag ..... je koppelt nu de functie aan een onmouseover op de twee middelste kolommen. Maar als ik het scherm heeeeeeel breed trek zodat het filmpje op een zwarte achtergrond komt dan gaat ie weg precies als je op het filmpje komt met je muis en kan dat dan niet met onmouseclick (ik ben geen held in dit soort dingen, dat had je al begrepen, maar wel een pietleut)
 
Laatst bewerkt:
Nou, door de opmaak met tabellen in tabellen in een tabel zie je het niet zo gauw, maar de inhoud in het zwarte vlak heeft een vaste breedte en is gecentreerd. In die inhoud zitten de 4 gekleurde kolommen (eigenlijk: 1 image!) ook op een vaste positie; dus op een vaste positie t.o.v. het midden van het scherm, ook als dat héééél breed is.

Tegelijkertijd is het oog gepositioneerd op 50% van de schermbreedte minus 275px (stukje naar links om in het midden van de 4 kolommen te komen). Het oog zit dus óók altijd op de zelfde positie vanaf het midden, en weer: óók als het scherm hééééél breed is.

Samen: het oog kan dus niet op een zwarte achtergrond komen (behalve het strookje tussen de twee middelste kolommen), en kan ook nooit naast de breedte van de inhoud komen.
Het pietleuterige geval kan zich dus niet voordoen, al is het scherm kamerbreed. :) *)

Met vriendelijke groet,
CSShunter
____________
*) De enige afwijking zit momenteel in een smal beeldscherm (kleiner dan de breedte van het middenstuk). De inhoud botst dan tegen de linkerkant van het scherm, en kan niet verder (er komt wel een scrollbalk om naar rechts te kunnen gaan). Daarmee staat de inhoud niet meer gecentreerd. Het oog staat nog steeds (absoluut) gepositioneerd op 50% - 275px, en in verhouding dus teveel naar links.

  • Als je de overlay-div met het oog niet absoluut neerzet, maar relatief, dan is ook dat probleem er niet meer.
Code: 
#overlay {
/*   position:absolute; */
     width:278px;
     height:193px;
     z-index:1;
/*   top: 364px; */
     margin-top: -300px;
/*   left: 50%; */
     margin-left: -35px;
}
Als je de opmaak met fatsoenlijke <div>'s regelt in plaats van met tabellen, dan is het wat overzichtelijker. ;)
 
Ja, nee, sorry, ik heb het niet zo goed uitgelegd. Ik bedoel dat als ik het scherm heel breed trek (dat doet nooit iemand, dat begrijp ik, maar ik wilde even weten wat er dan gebeurt) dan komt dat oog wel op een zwarte achtergrond en dan werkt het dus als je met de muis precies op het ook komt dat ie dan verdwijnt. Terwijl bij een "gewoon scherm" als ie dus ergens op die image staat, dan gaat het oog al weg als je ook maar in de buurt komt.

Tja, en met die div's, daar zal ik me ook eens in gaan verdiepen, ik doe alles altijd met tabellen ....
 
Ja, nee, sorry, ik heb het niet zo goed uitgelegd. Ik bedoel dat als ik het scherm heel breed trek (dat doet nooit iemand, dat begrijp ik, maar ik wilde even weten wat er dan gebeurt) dan komt dat oog wel op een zwarte achtergrond.
Klik om te vergroten...
Ik geloof dat hier een misverstand dreigt!
Precies het bovenstaande had ik begrepen, maar mijn betoog was dat deze situatie zich in de praktijk niet kan voordoen, omdat het oog nooit naast de "blackback" achtergrond kan komen te staan. En ook nooit verder, op de kralen-achtergrond "pageback02.jpg" of zelfs op de zwarte background aan een zijkant van deze achtergrond.
Met mijn aanpak van de 50% in de breedte staat de linkerzijkant van het oog altijd in het midden, en dan met -275px komt het altijd in de middelste kolommen!

De betere tweede oplossing, met geen absolute maar een relatieve positie voor het oog, doet hetzelfde:
  • Test: www.developerscorner.nl/csshunter/tests/strongbeads-2.htm.

  • Hierin is nog een verbetering doorgevoerd. De margin-left en margin-right van de <body> stonden namelijk op 0. Dit maakt dat bij loeigrote schermbreedtes de kralen-achtergrond toch niet in het midden staat. Daarvoor is een automatische linker- en rechtermarge nodig: body {margin: 90px auto 30px auto;}. - Deze correctie er dus in gezet.
Het bewijs dat het oog niet op het zwart kan komen?
Mijn schermbreedte komt niet verder dan 1280px, en dan is er nog niets aan de hand. Daarom de pagina-breedte geforceerd tot 10.000px (kunnen de monitor-fabrikanten nog even verder), met html {width: 10000px;}.
Voldoende wettig en overtuigend bewijs? :d

Met vriendelijke groet,
CSShunter

PS: in de twee laatste testen ook even de html valid gemaakt; is ook nooit weg.
 
Laatst bewerkt:
Hoi CSShunter!
Absoluut voldoende bewijs, ik neem het allemaal "mee" en heb het gebruik van div's en html valid maken op m'n lijstje staan om te onderzoeken.
Nogmaals heel erg bedankt voor je moeite en geduld!!!!! :D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan