asked on

I would like to add a image OVER this flash module?

Hi,
On this site here
http://www.mavego.com/BonnyBabes/BONNY/
I am trying to add an image like this one attached to the FRONT of the flash module at the top of the page.
No matter what I do, I can't seem to get it to sit ontop.
Can someone help me work out what div i need to add to my index.php and the css code to boot to make it work?

frame.png

stilliard

Have you tried setting the "wmode" param to "transparent" when embeding the flash file.
E,g,

1. Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">
2. Add the following parameter to the EMBED tag:
wmode="transparent"

Amanda Watson

ASKER

I have been thinking of that solution, but its not actually what I want to do because I would like to add an entire picture OVER the whole site eventually, so I want to move away from the flash file.

I really want to place an image OVER the whole site essentially, but it seems the flash module sits infront no matter what!

How can I fix this?

acashok

First you must mask your flash movie clip with required shape. There after set that frame.png as your flash background.

-Ashok

Amanda Watson

ASKER

I am trying to do this independent of the flash movie..
any ideas?

stilliard

So do you want this image to be full screen? and do you want to scroll the image?

To Put an image over flash you will need to add those paramaters i gave you to the embeded flash html.

To then put an image over it and the entire rest of the site, try having a div with the image as its background and setting it to absolute position, to the top left corner, and the widths to be 100%.

Attatched example:

<html>
<head>

<style type="text/css">
  
  .overlayImage {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 100%;
	  padding: 0px;
	  margin: 0px;
	  background: #ccc url(/image/url/here/);
  }
  
</style>

</head>
<body>

<!-- This is the overlay image div -->
<div class="overlayImage"></div>

<!-- ... rest of page and flash here -->
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

</body>
</html>

Open in new window

Vimal DM

Hai,

You may use jquery concepts or any java-script things

thaks

Amanda Watson

ASKER

ah, what do you mean? Have you got a specific solution using jquery?
Stillard I will try your solution later today ;-)

Amanda Watson

ASKER

Hi Stillard,
I did do what you suggested, and had done something similar myself, but as you can see here
http://www.mavego.com/BonnyBabes/BONNY/

The image is BEHIND the flash movie, it won't sit infront!!

stilliard

To set the flash to allow things in front, in your html where you have <param name="quality" value="high" /> for exaple, you need to add in next to it the following param.
<param name="wmode" value="opaque">

Then on your javascript function calling the flash file, you need to find where you can set the wmode param to opaque or transparent.
Heres a link that maybe of use to do this:
http://www.morearty.com/blog/2006/10/02/transparent-flex-apps-with-html-showing-through/
That link if for transparent but setting it as opaque will be better i think.
Then just set the z-index to a high value in the css for the div to go over the top.

Vimal DM

Hai,

Place the image code before the flash file inclusion,and then apply style called "position:relative" or "position:absolute" and when using "position",you may need to use a property "top" too and adjust the things using different style properties and see the possible things

Thanks

Amanda Watson

ASKER

I have tried doing this in the example stillard gave me.

I am going to find where to put the <param name="quality" value="high" /> but I am not sure this is going to change anything, but I will try it

ASKER CERTIFIED SOLUTION

stilliard

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Amanda Watson

ASKER

I am trying to do this right now....I can't seem to get the parameter opaque in

I don' t know if you know php but this is the module information that I have changed.

I also changed the html settings in flash to opaque, but its not showing up at all

<?php 

/* ************************************************ 

* The Flash Mod 

* Version 3.0.2

* Copyright (C) 2008 by Michael Carico - All rights reserved

* Written by Michael Carico

* Released under GNU/GPL License - http://www.gnu.org/copyleft/gpl.htm

* Website http://www.kabam.net

************************************************ */

# Don't allow direct acces to the file

defined('_JEXEC') or die('Restricted access');



#--------------------------------------

# Functions 

#--------------------------------------

if (!defined( '_FMinlineCode' )) {

  /** ensure that functions are declared only once */

  define( '_FMinlineCode', 1 );



  function FMinlineCode($fm_path, $fm_source, $fm_width, $fm_height, $fm_version, $fm_quality, $fm_wmode, $fm_loop, $fm_name) {



    echo '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"';

    echo ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='.$fm_version.'"'; 

    echo ' width="'.$fm_width.'"'; 

    echo ' height="'.$fm_height.'"';

    if ($fm_name <> '') echo ' id="'.$fm_name.'\"';

    echo '>';

    echo ' <param name="movie" value="'.$fm_path.$fm_source.'"/>';

    echo ' <param name="quality" value="'.$fm_quality.'" />';

    if ($fm_wmode <> 'window') echo ' <param name="wmode" value="opaque" />';

    if ($fm_loop == 'no') echo ' <param name="loop" value="false" />';

    if ($fm_embed != 'no') {

      echo '<embed src="'.$fm_path.$fm_source.'"'; 

      echo ' quality="'.$fm_quality.'"';

      echo ' pluginspage="http://www.macromedia.com/go/getflashplayer"'; 

      echo ' type="application/x-shockwave-flash"';

      echo ' width="'.$fm_width.'"'; 

      echo ' height="'.$fm_height.'"';

      if ($fm_wmode <> 'window') echo ' wmode="opaque"';

      if ($fm_loop == 'no') echo ' loop="false"';

      if ($fm_name <> '') echo ' name="'.$fm_name.'"';

      echo '></embed>';

    }	  

    echo '</object>';

  } // end FMinlineCode



} // end check functions defined 

#--------------------------------------



#--------------------------------------

# Main Body 

#--------------------------------------

# Ensure access to core functions

global $mainframe;



# Paramaeters 

$fm_path     = $params->def('fm_path','images/flash/');

$fm_source   = $params->def('fm_source','');

$fm_width    = $params->def('fm_width','');

$fm_height   = $params->def('fm_height','');

$fm_version  = $params->def('fm_version','6.0.0.0');

$fm_quality  = $params->def('fm_quality','high');

$fm_wmode    = $params->def('fm_wmode','window');

$fm_loop     = $params->def('fm_loop','yes');

$fm_name     = $params->def('fm_name','');

$fm_usejs    = $params->def('fm_usejs','yes');

$fm_embed    = $params->def('fm_embed','');

$fm_noscript = $params->def('fm_noscript','');

$fm_noflash  = $params->def('fm_noflash','');



$fm_noflash = str_replace("\r\n",'',$fm_noflash);

$fm_noflash = str_replace("\n",'',$fm_noflash);





# Display SWF

  if ($fm_usejs == 'yes') {

    if (!defined( '_FMjsInclude' )) {

      define( '_FMjsInclude', 1 );

	  $headtag = '<script language="JavaScript" type="text/javascript" src="modules/mod_flashmod/mod_flashmod.js"></script>'."\n";

      $mainframe->addCustomHeadTag($headtag);	  

    }	 

?>

    <script language="JavaScript" type="text/javascript">

      <!-- 

      var MM_contentVersion = 6;

      var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;

      if ( plugin ) {

        var words = navigator.plugins["Shockwave Flash"].description.split(" ");

        for (var i = 0; i < words.length; ++i) {

          if (isNaN(parseInt(words[i])))

          continue;

          var MM_PluginVersion = words[i]; 

        }

        var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;

      } else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0 && (navigator.appVersion.indexOf("Win") != -1)) {

        document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag

        document.write('on error resume next \n');

        document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');

        document.write('</SCR' + 'IPT\> \n');

      }

      if ( MM_FlashCanPlay ) {

        <?php

        echo 'AC_FL_RunContent(';

        echo "'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=".$fm_version."'";

        echo ",'width','".$fm_width."'"; 

        echo ",'height','".$fm_height."'";

        if ($fm_name <> '') echo ",'id','".$fm_name."'";

        echo ",'src','".$fm_path.$fm_source."'";

        echo ",'quality','".$fm_quality."'";

        if ($fm_wmode <> 'window') echo ",'wmode','opaque'";

        if ($fm_loop == 'no') echo ",'loop','false'";

        echo ",'pluginspage','http://www.macromedia.com/go/getflashplayer'";	

        echo ",'movie','".$fm_path.$fm_source."'";

        echo ");";

        ?>

      } else {

        document.write('<?php echo $fm_noflash; ?>');

      }

    //-->

    </script>

    <?php 	 

    echo '<noscript>';

    if ($fm_noscript == 'noflash') {

      echo $fm_noflash;

    } else {

	  FMinlineCode($fm_path, $fm_source, $fm_width, $fm_height, $fm_version, $fm_quality, $fm_wmode, $fm_loop, $fm_name);

    }	  

    echo '</noscript>';

  } else {

    FMinlineCode($fm_path, $fm_source, $fm_width, $fm_height, $fm_version, $fm_quality, $fm_wmode, $fm_loop, $fm_name);

  }

?>

Open in new window

stilliard

Ah, cool well i assume you need to change it in the "# Paramaeters " section,

Find the line:
$fm_wmode = $params->def('fm_wmode','window');

and replace with:
$fm_wmode = $params->def('fm_wmode','opaque');

Amanda Watson

ASKER

Got it!
I used html_mod instead and embedded it myself

ITS WORKING.

You were right all along!

Amanda Watson

ASKER

Great Expert, Knew he was right all along ;-)