web-dev-qa-db-fra.com

Fournir des images alternatives si Adobe Flash n'est pas disponible

Existe-t-il un moyen de fournir une autre image GIF/PNG, si l'utilisateur n'a pas installé Adobe Flash et/ou n'a pas été activé. J'ai trouvé des recommandations, comme celles du W3C, qui déterminent via JavaScript l'existence de Adobe Flash sur le client: W3C Fournir des images alternatives

Honnêtement, je préférerais un non JS technique. Je pense à une balise XHTML, équivalente à <noscript>. (comme <noobject> si l’objet (dans notre cas, Flash) ne peut pas être affiché/chargé).

La raison de cette séparation est la suivante: La banque pour laquelle je travaille affichera de préférence ses bannières au format Flash. Au cas où ce ne serait pas possible, une image simple devrait être montrée. Dans le passé, le problème était résolu de la manière mentionnée précédemment. Nous travaillons actuellement sur une mise à jour de la conception et c’est là que j’ai trébuché sur ce morceau de code, ce qui me fait me demander si c’est vraiment la manière la plus élégante et la plus compatible de le faire.

Une autre idée qui me frappe: Est-il possible de charger des objets Flash dans un environnement avec JavaScript désactivé?

htmlflash
17
Gerhard Dinhof

Avoir flash installé mais javascript désactivé est un scénario valable. Cela devrait fonctionner sur la plupart des navigateurs:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flash.swf" />
  <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
  <!--<![endif]-->
      <img src="(...)" alt="Put your alternate content here" />
  <!--[if !IE]>-->
    </object>
  <!--<![endif]-->
</object>
13
Kristian J.

J'utilise le code suivant pour la dégradation gracieuse. Ça marche bien.

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
    width="500" height="100">
  <param name="movie" value="flash.swf" />
<!--><!--dgx-->
  <param name="loop" value="false">
  <param name="menu" value="false">
  <param name="quality" value="high">
  <img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->
5
Raithlin

Je ne sais pas pourquoi vous voulez éviter le javascript, c'est la meilleure solution lorsqu'il s'agit de Flash.

en utilisant la SWFObjects Library (la plus connue à ce jour), vous pouvez le faire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title> My Home Page </title> 
 <meta name="viewport" content="width=780"> 
 <script type="text/javascript" src="swfobject.js"></script> 
</head> 
<body> 
 <div id="splashintro"> 
   <a href="more.html"><img src="splash_noflash.png" /></a> 
 </div>
 <script type="text/javascript"> 
   var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899"); 
   so.write("splashintro"); 
 </script> 
 </body> 
</html>

le script remplace le splashintro div par le fichier flash. Si le navigateur ne prend pas en charge Flash, il ne fait rien et le splash_noflash.png sera affiché.

P.S. Avec cette technique, vous êtes prêt pour l'iPhone. Au lieu d'afficher le cube bleu, il affichera l'image :)

4
balexandre

Nous pouvons fournir une autre image GIF/PNG, au cas où l'utilisateur n'aurait pas installé ou désactivé Adobe Flash.

<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />

<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->

<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>

<!--[if !IE]>-->
</object>
<!--<![endif]-->

</object>

Et ajoutez aussi ceci ...

<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");   
</script>
2
Sinju Moncy

Je trouve l'utilisation d'un style en ligne pour faire l'affaire.

Par exemple:

<div style="background-image: url('...');">
    <object>
     /* Embedded Flash */
    </object>
</div>
2
Andres Vargas

J'ai écrit un moyen simple de faire cela en CSS - sans JavaScript supplémentaire.

Nommez votre ID/classe où réside votre animation Flash et utilisez une image d'arrière-plan. Enveloppez votre film Flash dans cette div. 

Par exemple:

<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.

Puis dans votre CSS:

#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}

Lorsque le flash n'est pas disponible, par exemple sur l'iphone/pad, le graphique s'affiche. Le seul inconvénient que j'ai constaté avec cela est que si votre animation Flash utilise un arrière-plan transparent, vous verrez le graphique alt à travers les transitions. Créez simplement une couleur unie dans la séquence Flash en tant que couche la plus basse (assurez-vous que sa couleur est identique à celle du site Web).

~ GreaseJunkie

0
GreaseJunkie