Bouton flash en HTML ?
LastDream
-
mimigenie Messages postés 1180 Date d'inscription Statut Membre Dernière intervention -
mimigenie Messages postés 1180 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un problème important à régler depuis peu...
J'ai crée une image où j'ai rajouté d'autres images dessus que j'ai convertis en boutons. Le principe de ces boutons étant de rediriger vers un lien (site internet) quand on clique dessus. Cependant voilà, quand j'exporte mon flash en swf, pour le moment tout marche. Mais quand je l'incruste dans un code HTML, j'ai beau cliquer rien ne se passe !
J'ai fait un aperçu Flash et tout va bien cependant avec l'aperçu HTML les boutons ne marchent pas !
Comment faire ? Je souhaite incruster mon flash sur une page web dont je ne peux éditer que le contenu et non l'interface entière.
Si vous avez besoin de plus de précisions n'hésitez pas c'est vraiment important !
J'ai un problème important à régler depuis peu...
J'ai crée une image où j'ai rajouté d'autres images dessus que j'ai convertis en boutons. Le principe de ces boutons étant de rediriger vers un lien (site internet) quand on clique dessus. Cependant voilà, quand j'exporte mon flash en swf, pour le moment tout marche. Mais quand je l'incruste dans un code HTML, j'ai beau cliquer rien ne se passe !
J'ai fait un aperçu Flash et tout va bien cependant avec l'aperçu HTML les boutons ne marchent pas !
Comment faire ? Je souhaite incruster mon flash sur une page web dont je ne peux éditer que le contenu et non l'interface entière.
Si vous avez besoin de plus de précisions n'hésitez pas c'est vraiment important !
A voir également:
- Bouton flash en HTML ?
- Flash drive tester - Télécharger - Divers Utilitaires
- Adobe flash player - Télécharger - Divers Web & Internet
- Editeur html - Télécharger - HTML
- Flash video downloader - Télécharger - Téléchargement & Transfert
- Bouton reinitialisation pc - Guide
16 réponses
Le code de la page concernée ( ou en tout cas la partie de la page concernée ) serait utile.
Sinon, ce que tu veux faire c'est utiliser une animation flash comme bouton ?
Si tel est le cas.
Il suffit de rajouter un lien en html ( href ) dans le code qui sert à intégrer l'animation.
Mais avec le code, se sera plus simple pour voir ce que je te raconte est ce qu'il te faut ou non.
Sinon, ce que tu veux faire c'est utiliser une animation flash comme bouton ?
Si tel est le cas.
Il suffit de rajouter un lien en html ( href ) dans le code qui sert à intégrer l'animation.
Mais avec le code, se sera plus simple pour voir ce que je te raconte est ce qu'il te faut ou non.
Désolé j'étais parti manger :
Voici toutes les infos :
Le flash en SWF hébergé :
http://s3.noelshack.com/old/up/vetisphere-ab14e2037.swf (qui marche)
Le code utilisé pour le HTML :
<center>
<object type="application/x-shockwave-flash" data="http://s3.noelshack.com/old/up/vetisphere-ab14e2037.swf" width="457" height="458">
<param name="movie" value="http://s3.noelshack.com/old/up/vetisphere-ab14e2037.swf" />
<param name="wmode" value="transparent" />
texte alternatif
</object>
</center>
Et le résultat HTML :
http://www.khisland.info/dossiers-2-367-vetispheres.html
Comme déjà dit, j'ai moi même monté l'animation sur une image vierge en découpant les icônes et en les replaçant en boutons individuels sur des calques différents de l'image d'origine.
Le SWF marche, le HTML non, j'arrive pas à comprendre pourquoi.
Voici toutes les infos :
Le flash en SWF hébergé :
http://s3.noelshack.com/old/up/vetisphere-ab14e2037.swf (qui marche)
Le code utilisé pour le HTML :
<center>
<object type="application/x-shockwave-flash" data="http://s3.noelshack.com/old/up/vetisphere-ab14e2037.swf" width="457" height="458">
<param name="movie" value="http://s3.noelshack.com/old/up/vetisphere-ab14e2037.swf" />
<param name="wmode" value="transparent" />
texte alternatif
</object>
</center>
Et le résultat HTML :
http://www.khisland.info/dossiers-2-367-vetispheres.html
Comme déjà dit, j'ai moi même monté l'animation sur une image vierge en découpant les icônes et en les replaçant en boutons individuels sur des calques différents de l'image d'origine.
Le SWF marche, le HTML non, j'arrive pas à comprendre pourquoi.
Bon j'ai essayé les 3 codes mais toujours la même chose : le Flash apparait, les lumières s'allument mais quand je clique sur les boutons : r-i-e-n >.<
Pourtant seul sans code, il marche le swf ! >.<
Pourtant seul sans code, il marche le swf ! >.<
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Il te faut 4 images car tu as 3 icones.
image 1 : image sans icone en surbrillance
image 2 : image avec l'icone 1 en surbrillance
image 3 : image avec l'icone 2 en surbrillance
image 4 : image avec l'icone 3 en surbrillance
Tu utilises soit le code html pour définir la zone cliquable ou tu utilises gimp qui générera le code html de la zone, je te recommande d'utiliser gimp.
Tu trouveras facilement des tuto sur internet.
Ensuite tu utilises onmouseover ( c'est un évènement javascript ) pour que l'image 1 soit remplacée par l'image 2 lorsque qu'on place la souris sur l'icone 1
Regarde https://forums.commentcamarche.net/forum/affich-37622096-javascript-les-evenements
Tu as tout ce qu'il te faut pour les évènements javascript.
Ca prend un peu de temps ( pas beaucoup ) mais c'est simple et ca devrait fonctionner. En plus les utilisateurs n'ayant pas flash pourront voir ces boutons.
image 1 : image sans icone en surbrillance
image 2 : image avec l'icone 1 en surbrillance
image 3 : image avec l'icone 2 en surbrillance
image 4 : image avec l'icone 3 en surbrillance
Tu utilises soit le code html pour définir la zone cliquable ou tu utilises gimp qui générera le code html de la zone, je te recommande d'utiliser gimp.
Tu trouveras facilement des tuto sur internet.
Ensuite tu utilises onmouseover ( c'est un évènement javascript ) pour que l'image 1 soit remplacée par l'image 2 lorsque qu'on place la souris sur l'icone 1
Regarde https://forums.commentcamarche.net/forum/affich-37622096-javascript-les-evenements
Tu as tout ce qu'il te faut pour les évènements javascript.
Ca prend un peu de temps ( pas beaucoup ) mais c'est simple et ca devrait fonctionner. En plus les utilisateurs n'ayant pas flash pourront voir ces boutons.
Alors voilà mon dernier problème :
Voici déjà le code :
<center>
<a href="javascript:;"
onMouseOver="document.img_1.src='http://khi4.info/Aqua/Vetisphere/icones/tireuse.png';"
onMouseOut="document.img_1.src='';">
<img name="img_1" src="image1.gif">
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" /></a>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,40,38" href="http://khisland.info" />
</map>
</center>
Déjà j'ai une grande avancée grâce à vous, la zone cliquable marche, et renvoie vers mon lien.
Cependant quand je mets onmouseover bah...
Voici le résultat :
http://www.khisland.info/dossiers-2-367-vetispheres.html
ça apparait à côté et non là où je le souhaite, il manque plus que la position de la seconde image et tout fonctionne !
Comment faire ?
Voici déjà le code :
<center>
<a href="javascript:;"
onMouseOver="document.img_1.src='http://khi4.info/Aqua/Vetisphere/icones/tireuse.png';"
onMouseOut="document.img_1.src='';">
<img name="img_1" src="image1.gif">
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" /></a>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,40,38" href="http://khisland.info" />
</map>
</center>
Déjà j'ai une grande avancée grâce à vous, la zone cliquable marche, et renvoie vers mon lien.
Cependant quand je mets onmouseover bah...
Voici le résultat :
http://www.khisland.info/dossiers-2-367-vetispheres.html
ça apparait à côté et non là où je le souhaite, il manque plus que la position de la seconde image et tout fonctionne !
Comment faire ?
En fait tu n'as pas bien compris ce que je voulais dire.
Ce qu'il te faut, c'est 4 images avec tout les icones et non pas une image d'un seul icone.
Comme ca l'image change entière change quand tu passes ta souris sur un icone mais le visiteur à l'impression qu'il n'y a que le l'icone qui change.
Ce qu'il te faut, c'est 4 images avec tout les icones et non pas une image d'un seul icone.
Comme ca l'image change entière change quand tu passes ta souris sur un icone mais le visiteur à l'impression qu'il n'y a que le l'icone qui change.
Aaaaaaah je vois !
Dommage j'avais testé ça avec GIMP :
<center>
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,41,41" onmouseover="http://khi4.info/Aqua/Vetisphere/icones/tireuse.png" href="http://www.khisland.info/dossiers-2-368-tireuse.html" />
</map>
</center>
Mais rien ne se produit quand je passe la souris dessus..
Bon je test cette autre solution alors ! (en esperant que le chargement se fasse rapidement et qu'on voit pas l'image se reload en entière)
Dommage j'avais testé ça avec GIMP :
<center>
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,41,41" onmouseover="http://khi4.info/Aqua/Vetisphere/icones/tireuse.png" href="http://www.khisland.info/dossiers-2-368-tireuse.html" />
</map>
</center>
Mais rien ne se produit quand je passe la souris dessus..
Bon je test cette autre solution alors ! (en esperant que le chargement se fasse rapidement et qu'on voit pas l'image se reload en entière)
Bon j'ai toutes mes images prêtes, mais j'ai beau essayer je trouve pas.
Où dois je placer le code onmouseover dans ce code :
<center>
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" /></a>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,41,41" href="http://www.khisland.info/dossiers-2-368-tireuse.html" />
</map>
</center>
SVP T.T
Où dois je placer le code onmouseover dans ce code :
<center>
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" /></a>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,41,41" href="http://www.khisland.info/dossiers-2-368-tireuse.html" />
</map>
</center>
SVP T.T
http://www.khisland.info/dossiers-2-367-vetispheres.html
Alors là c'est trop fort j'en peux plus XD
le code :
<center>
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" /></a>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,41,41" href="http://www.khisland.info/dossiers-2-368-tireuse.html" onMouseOver="document.img_1.src='http://khi4.info/Aqua/Vetisphere/icones/veti tireuse.png';"
onMouseOut="document.img_1.src='http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png';">
<img name="img_1" src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png">
</a>
</map>
</center>
Alors là c'est trop fort j'en peux plus XD
le code :
<center>
<img src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png" width="457" height="458" border="0" usemap="#map" /></a>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:stef -->
<area shape="circle" coords="268,41,41" href="http://www.khisland.info/dossiers-2-368-tireuse.html" onMouseOver="document.img_1.src='http://khi4.info/Aqua/Vetisphere/icones/veti tireuse.png';"
onMouseOut="document.img_1.src='http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png';">
<img name="img_1" src="http://khi4.info/Aqua/Vetisphere/icones/vetisphere 2.png">
</a>
</map>
</center>