[RÉGLÉ] Image alternative pour module flash

[Saahn]

Bonsoir,

J'utilise un module en Flash, dès la page d'accueil de mon site, et un autre en bas de page sur les autres pages de mon site : www.regataiades.fr

Ce module est Vinaora Cu3er 3D Slideshow (que je conseille par ailleurs, très joli slideshow) que j'intègre à mon site dans un article, ou directement dans mon template.

Je souhaiterais qu'une image (de la même taille que mon module) apparaisse lorsque Flash n'est pas supporté par un navigateur ou désactivé.
Et oui, une page d'accueil vide, ça craint !

Connaissez-vous une solution ?

[Saahn]

Re : Image alternative pour module flash

Petit up
Personne ne connais une manip' applicable à mon cas de figure ?

[Saahn]

Re : Image alternative pour module flash

J'ai essayé de caler une image en background d'un paragraphe de la manière suivante :

<p style="background-image: url('images/slideshow_accueil/ccc.jpg');">{module Slideshow_accueil}</p>

sans succès.

Je suppose que la solution est un peu plus "évoluée" que ça.

[ghazal]

Re : Image alternative pour module flash

Salut,
pas simple à mettre en oeuvre.
J'ai fait un petit script que tu peux toujours essayer.
Ca fonctionne hors joomla.
Mais ce n'est pas joomla le pb.
C'est le script JS qui fait "tourner" ton bidule.
Je craint des erreurs JS avec mon script. Donc, si tu essayes, ouvre la console Firebug pour Firefox et reporte les erreurs ici.

Ce script n'est conçu, pour le moment, QUE pour ta page d'acccueil.
Il détecte iPad, iPhone, Android, et normalement Blackberry (pas sur).

Script à placer dans l'index.php du template, juste en dessus de </head>

<script type="text/javascript">
window.addEvent('domready',function() {
if(Browser.Platform.ios || Browser.Platform.android || Browser.Platform.webos ) {
var myNewElement = new Element('div#myNewElement');
myNewElement.replaces(document.id('vinaora-3d-slideshow139'));
}
});
</script>

CSS à rajouter dans un des fichiers CSS du template.
#myNewElement{background: url("http://farm1.staticflickr.com/199/442779525_2287860185_m.jpg") no-repeat transparent; width:200px;height: 200px; object-fit: contain;}

Demo hors joomla :

http://jsfiddle.net/ghazal/Xsyf5/1/

[Saahn]

Re : Image alternative pour module flash

Merci pour ta réponse

Je viens de suivre ta solution à la lettre.
J'ai remplacé ton url d'image par celle que je souhaite voir apparaitre dans le cas où le lecteur Flash n'est pas detecté : http://www.regataiades.fr/images/sli...ccueil/ccc.jpg, en modifiant également les width et height.

J'ai tenté avec mon ordinateur en désinstallant Flash Player, ainsi qu'avec mon Windows Phone et à priori ça ne fonctionne pas.

Je n'ai pas de message d'erreur, simplement cette fenêtre qui apparait.

[ghazal]

Re : Image alternative pour module flash

Salut,
merci d'avoir tenté le coup.

J'ai tenté avec mon ordinateur ...

C'est pas paramétré pour fonctionner avec un navigateur d'ordi.

Ce qui m'embête, c'est ton Windows Phone.
Je ne peux tester que sur des produits Apple (iPhone, iPad).
L'environnement unique, c'est parfois la plaie

Je vais explorer la question.
Tu me donnes un moment ?

[Saahn]

Re : Image alternative pour module flash

Salut,

Pour l'ordi, je me suis douté, mais dans le doute j'ai tout de même essayé.
Un ordinateur sans Flash, ça deviens plutôt rare de nos jours.

Je pensais qu'il pouvait exister une manip pour placer une image alternative "derrière" une anim Flash, quelque soit la machine utilisée.
As-tu testé sur iphone, ipad et backberry ? Si ça fonctionne, c'est déjà un bon début
-> www.regataiades.fr

J'ai laissé ton bout de code en place, l'avantage est qu'il ne semble pas avoir y avoir d'erreur ou conflit JS.

[ghazal]

Re : Image alternative pour module flash

Cool,
c'est bon pour iPhone, iPad.

Pour Blackberry, je vais enlever la spécification, car, et je n'avais vérifié (slap my hand), il semble que le navigateur supporte Flash.

Microsoft IE for Mobile -> ne supporte plus Flash seulement à partir de la version 10 de IE pour le mobile.
Avec une déclaration classique genre :
[if gt IE 9] cad, if greater than IE9, puis l'image qui remplace le .swf
on devrait pouvoir y arriver.

<!--[if gt IE 9]>
<style type="text/css">
// le remplacement d'image sur l'id précisée dans la CSS
</style>
<![endif]-->

Si tu pouvais essayer ca ?

[Saahn]

Re : Image alternative pour module flash

Yes, par contre, deux questions.
Désolé je n'y connais absolument rien en JS.

1) Ou dois-je caler cette déclaration précisément dans le bout de code précédent ? Juste après j'imagine, mais dans le doute je préfère demande.
2) Quand tu dis "// le remplacement d'image sur l'id précisée dans la CSS" , qu'entends-tu par là ?

Merci d'avance

[Saahn]

Re : Image alternative pour module flash

Bon, en l'occurence, c'est du HTML ou CSS

J'ai donc ajouté le code en dessous :

<!--[if gt IE 9]>
<style type="text/css">
background: url("http://www.regataiades.fr/images/slideshow_accueil/ccc.jpg") no-repeat transparent;
width: 912px;
height: 450px;
object-fit: contain;
</style>
<![endif]-->

mais rien de ne se passe. Je pense que j'ai du oublié quelque chose ou ne par insérer ce code au bon endroit.

[ghazal]

Re : Image alternative pour module flash

euh ... ma propal est une bêtise (pour pas dire une c....)
Si tu colles ce code qq part, cela va remplacer ton .swf par une image si le navigateur (ordi ou mobile) est d'une version IE supérieure à 9.
Pas malin.
Il faut que je trouve le code pour la version Microsoft IE pour Mobile (celle qui ne supporte plus Flash).

Me suis-tu ?

Je réécris le code en tenant compte des 2 nouveaux facteurs :
* Blackberry à priori supporte Flash
* Microsoft IE pour Mobile version 10 ne supporte plus Flash

J'envoie ca demain.

[ghazal]

Re : Image alternative pour module flash

... et tu testes sur quel support à propos ?

[Saahn]

Re : Image alternative pour module flash

Je teste sur mon Nokia lumia 800, le tout nouveau windows phone 7.

Et je me permet une question qui est peut-être absurde, mais comme expliqué précédemment, autant je peux me débrouiller en html & css, autant je n'ai aucune connaissance en JavaScript :
N'est-il pas possible que créer une condition pour que, quelque soit le navigateur utilisé, l'animation flash soit bêtement remplacée par une image de la taille de mon choix ?

Cela permettrait de pallier au problème pour tous les devices ne supportant pas le flash (smartphones et ordis d'avant-guerre).

[Saahn]

Re : Image alternative pour module flash

(ps : j'ai supprimé le dernier code que tu m'as filé en attendant le nouveau dans ce cas).

C'est dommage que Flash n'ai pas pensé à développer son propre système d'image alternative.
En même temps, ce serait un peu comme se tirer une balle dans le pied et affirmer "surtout, ne vous sentez pas obligés de m'installer, je prend très bien en charge les navigateurs qui me bloquent".
C'est rageant car, je trouve que bien utilisé, le Flash donne véritablement de la vie à un site.

[ghazal]

Re : Image alternative pour module flash

Merci d'avoir ouvert cette discussion.
C'est absolument passionnant et m'oblige à mettre de l'ordre dans les spécifications.

Liste des navigateurs pour tablettes et mobiles qui supportent ou non Flash.
Cette liste est valable au 28/2/2012 mais devra probablement être mise à jour.

Sources (entre autres) :

http://www.adobe.com/flashplatform/certified_devices/tablets.html

http://en.wikipedia.org/wiki/Mobile_browser

http://en.wikipedia.org/wiki/Internet_Explorer_Mobile

Tablettes et mobiles concernés pour le support Flash --> les plus récents

Tablettes :

		            Support Flash	                              Moteur de rendu (Layout Engine)/Browser  
iPad           			Non		                             Webkit (Safari)
Samsung   		                Oui		                                n/i
Acer Iconia		                Oui                                            n/i
Dell Streak 7		        Oui                                           n/i
HTC Flyer			        Oui                                           n/i
RIM BlackBerry PlayBook	Oui                                           n/i
Toshiba Thrive Tablet	        Oui                                           n/i

Mobiles :

Browser                        Layout Engine                       Support Flash
Android browser 		 	webkit                                  à priori OUI
BlackBerry Browser  		Mango puis Webkit                        à priori OUI
Internet Explorer Mobile  		Trident                                 à priori OUI
Nokia Series 40 Browser  		WebKit                                 à priori OUI
WebOS Browser      			Webkit                                  n/i
Windows Phone 7  			IE10 Metro                            NON
iOS Browser (iPhone)                  webkit                                  NON

NB : il y a des navigateurs alternatifs pour les mobiles.
Ex pour iOS (iPhone):

http://ipod.about.com/od/bestiphoneapps/tp/Top-iPhone-Browser-Apps.htm

Si qqn voit des erreurs, merci de les indiquer.

Qqn avec Android pourrait-il tester ceci :

http://jsfiddle.net/ghazal/Xsyf5/3/show/

NB : Il semble que Adobe ait décidé de s'adapter à cet abandon progressif de Flash sur certains supports en proposant un convertisseur vers HTML5, Wallaby --> http://labs.adobe.com/technologies/wallaby/

PS: belle galère pour faire des tableaux ...