11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Soit une div ayant une image en background:
css
----
#welcomefooting a {
margin-top: auto;
background: #ffffff url(wp-content/themes/images/radio.png) no-repeat scroll center;
text-indent: -1000px;
height: 260px;
cursor:pointer;
display:block;
overflow:hidden;
}

et le code html gérant cette div:
html
------
<div id="welcomefooting">


<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfmacmousewheel.js"></script>
<script type="text/javascript">

// JAVASCRIPT VARS
// cache buster
var cacheBuster = "?t=" + Date.parse(new Date());

// stage dimensions
var stageW = 560//"100%"; // minimum is 450
var stageH = 300;//"100%"; // minimum is 260


// ATTRIBUTES
var attributes = {};
attributes.id = 'FlashComponent';
attributes.name = attributes.id;

// PARAMS
var params = {};
params.bgcolor = "#333333";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
//params.wmode = "transparent";


/* FLASH VARS */
var flashvars = {};

/// if commented / delete these lines, the component will take the stage dimensions defined
/// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml
flashvars.componentWidth = stageW;
flashvars.componentHeight = stageH;

/// path to the content folder(where the xml files, images or video are nested)
/// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
flashvars.pathToFiles = "mp3gallery/";
flashvars.xmlPath = "xml/settings.xml";
flashvars.contentPath = "xml/mp3gallery.xml";

/** EMBED THE SWF**/
swfobject.embedSWF("preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);
if(swfmacmousewheel) swfmacmousewheel.registerObject(attributes.id);
</script>

<table class="radio " width="100%" height="100%" cellpadding="0" cellspacing="0">
<td align="center">

<!-- this div will be overwritten by SWF object -->
<div id="FlashComponent">
<p>In order to view this object you need Flash Player 9+ support!</p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
</div>

<!--
<embed id="FlashComponent2"
src="file:///Macintosh%20HD/Users/andreineamtu/Documents/Lucru/VUZUM/FLABELL/PRODUCTS/Product%20001%20%2D%20Flash%20Mp3%20Player/Flash%20Mp3%20Player%20v2/project/deploy/preview.swf"
bgColor = "#000000"
width="560"
height="300"
allowfullscreen="true"
allowScriptAccess="always"
flashVars="pathToFiles=mp3gallery/&componentWidth=560&componentHeight=300&xmlPath=xml/settings.xml">
</embed>
-->

</td>
</table>
</div>


J'aimerai réaliser la chose suivante : que la div au chargement affiche l'image définie en css et lorsque l'on clique sur cette image le code gérant l'objet flash s'exécute et affiche l'objet flash en lieu et place de l'image initiale. Est-ce possible ?