Afficher masquer une image au dessus d’un flash

22 septembre 2008 par Niums dans Action script

Il y a quelques jours on m’a demandé comment faire en sorte d’afficher une image par dessus un flash et qu’au clic sur l’image, le flash apparaisse… et ceci le plus simplement possible : juste du javascript pas de jquery.

Je pense que cela peut avoir un intérêt si vous avez par exemple une vidéo sur dailymotion et que vous souhaitez mettre une image d’accroche par dessus. Sinon si vous avez le flash, ça n’a vraiment aucun intérêt : vous pouvez le faire via flash et c’est plus simple.

Et l’exemple est par la.

Et voilà le code ci-dessous.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Afficher masquer une image au dessus d’un flash</title>
 
<script language="javascript">
<!–
function cacheId(baliseId)
{
var div = document.getElementById(baliseId);
if (div.style.display == "")
div.style.display = "none";
else
div.style.display = "";

}
–>
</script>
 

<style type="text/css">
<!–
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#div1 {
position:absolute;
z-index:1201;
}
#imgEcran {
position:absolute;
z-index: 1200;
}
–>
</style>
 
</head>
<body onload="cacheId(‘div1′); "> <!– au chargement le flash est aché –>

<div id="imgEcran">
<a href="javascript:cacheId(‘div1′);"> <!– js qui cache l’image au click –>
<img src="image.jpg" width="366" height="300" border="0" />
</a></div>

<!– div contenant le flash qui sera invisible au load –>

<div id="div1">
<object width="420" height="336">
<param name="movie" value="http://www.dailymotion.com/swf/k18CWD69xe48nLJLxS&amp;related=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<param name="wmode" value="Transparent" /><!– il faut ajouter le wmode = transparent dans le flash sans quoi le z-index ne fonctionne pas, pensez aussi à l’ajouter dans le embed ci-dessous–>
<embed src="http://www.dailymotion.com/swf/k18CWD69xe48nLJLxS&amp;related=0" type="application/x-shockwave-flash" wmode="transparent"  width="420" height="336" allowFullScreen="true" allowScriptAccess="always"></embed>
</object>
<p>Vidéo Dailymotion</p>
</div><!– fin div flash –>

<body>
</body>
</html>
 

+++

Continuez votre lecture avec



Articles similaires


Laisser un commentaire