Info-bulles Flash

Résolu

paulo_du75 Messages postés 179 Statut Membre -
paulo_du75 Messages postés 179 Statut Membre - 25 mai 2010 à 17:30

Bonjour,

Je suis un gros noob sur Flash Cs4 que je viens de découvrir. J'explique mon projet : j'ai créé une affiche sur Photoshop Cs4 qui contient plusieurs mot-clefs un peu partout et je voudrais que, lorsqu'on survole un de ces mots ou que l'on clique dessus, cela affiche un bulle contenant un texte explicatif sur ce mot. Je recherche donc un tuto mais je n'en trouve aucun :(
Merci beaucoup d'avance
Paul

Afficher la suite

A voir également:

Info-bulles Flash
Flash drive tester - Télécharger - Divers Utilitaires
Adobe flash player - Télécharger - Divers Web & Internet
Crystal disk info - Télécharger - Informations & Diagnostic
Info pc - Guide
Flash video downloader - Télécharger - Téléchargement & Transfert

21 réponses

Réponse 1 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Pas besoin d'utiliser Flash, c'est faisable avec du Javascript.
Pour définir les zones sur ton image, tu peux utiliser les balises <map> et <area /> en (x)HTML.

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Réponse 2 / 21

paulo_du75 Messages postés 179 Statut Membre 9

OK merci beaucou^p mais tu aurais un tuto plus détaillé ??

Réponse 3 / 21

paulo_du75 Messages postés 179 Statut Membre 9

De plus, ce n'est pas encore sur le net, c'est un projet, j'ai juste un JPEG pour l'instant ...

Réponse 4 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Je pourrais t'en donnais un pour t'apprendre à faire des zones sur une image et un autre pour l'infobulle, mais pas pour combiner les deux solutions.

Pour les zones sur images :
https://www.w3schools.com/TAGS/tag_area.asp
https://www.w3schools.com/TAGS/tag_map.asp

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 21

paulo_du75 Messages postés 179 Statut Membre 9

OK je regarde ça merci et je te dis les résultats merci ;)

Réponse 6 / 21

paulo_du75 Messages postés 179 Statut Membre 9

Bah je crois avoir compris comment mettre mon image puis mettre un rectangle de sélection dans mon image mais je ne sais pas utiliser

onmouseover

et je ne sais pas comment mettre une bulle ni du texte dedans (xD je suis un noob)
Pour l'instant voilà mon code tout pourri :

<img width="350" height="496" src="http://img692.imageshack.us/img692/6063/afficheap2010.jpg" alt="Affiche AP 2010" usemap ="#planetmap" />

name="AP 2010">  <map
<area shape="rect" coords="97,857,1329,1037" href="sun.htm" alt="Sun" /> </map> > </ Map

Réponse 7 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Il n'y a pas besoin d'utiliser onmouseover.
Regarde ici, c'est en français.

Réponse 8 / 21

paulo_du75 Messages postés 179 Statut Membre 9

J'ai une nouvelle solution qui me parait plus simple c'est Spry dans dreamweaver, j'ai un code comme ceci :

<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<img width="2103" height="2976" src="https://www.imagup.com" alt="Affiche AP 2010" /> 
<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
//-->
</script>
<span id="sprytrigger1" >

</span>
<div class="tooltipContent" id="sprytooltip1">Il existe deux gènes rapporteurs: la GFP qui est une protéine fluorescant en vert, et la luciférase qui est aussi une protéine mais qui engendre de la luminescence. <br />
Les gènes rapporteurs peuvent être des gènes codant des protéines fluorescentes ou des enzymes dont l'action provoquera l'apparition d'un produit coloré.</div>

Il y a un problème c'est que je ne sais pas comment indiquer l'emplacement de "sprytrigger1" et que mon idée ne fonctionne pas visiblement : eh oui je ne suis pas très bon codeur :(

paulo_du75 Messages postés 179 Statut Membre 9

J'irais même jusqu'à me qualifier de "noob" sisi ! :p

Réponse 9 / 21

paulo_du75 Messages postés 179 Statut Membre 9

Stp aides moi avion ;)

Réponse 10 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Je n'utilise pas DW, je ne saurais pas t'aider.

Réponse 11 / 21

paulo_du75 Messages postés 179 Statut Membre 9

OK bah je vais reposer une question merci ;)
Mais sinon dans le lien que tu m'as donné, c'est pareil je ne sais pas comment indiquer où est mon info bulle ni ou on met ce que l'on veut mettre dedans :(

Réponse 12 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Le texte qu'affichera ton infobulle sera ce que tu mets dans l'attribut title de l'élèment.

Pour sa position, elle suit le curseur.

Réponse 13 / 21

paulo_du75 Messages postés 179 Statut Membre 9

Ouaïe bah t'as pas compruis mon problème alors, je veux mettre des bulles sur des zones SPECIFIQUES de l'image, il me faut une bulle pour chaque mon de l'affiche ^^

paulo_du75 Messages postés 179 Statut Membre 9

*mot (dsl)

Réponse 14 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Si si, j'ai compris.
Mais c'est toi qui t'es mal exprimé : tu as dit « comment indiquer où est mon info bulle », et pas comment définir les zones où l'infobulle doit apparaître lors du passage de la souris.

Et j'y ai déjà répondu à cette question : avec les balises <map> et <area /> en (x)HTML.

Réponse 15 / 21

paulo_du75 Messages postés 179 Statut Membre 9

Ouais mais j'ai pas réussi, tu pourrais pas me donner un exemple avec un recte de coordonnées : 97,857,1329,1037 ?? stp

Réponse 16 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

<img src="image.png" alt="Affiche" usemap="#affiche" />

<map name="affiche">
    <area shape="rect" coords="97,857,1329,1037" href="cible.html" alt="Description de la zone" class="tooltip" title="Texte de l'infobulle" />
</map>

paulo_du75 Messages postés 179 Statut Membre 9

J'arrive pas à répondre (bug ??!)
Sinon ça ne marche toujours pas et je désespère un peu, voici mon code :

<html
<title>Affiche apprentis chercheurs 2010-2011</title>
<img width="701" height="992" src="http://img96.imageshack.us/img96/6063/afficheap2010.jpg" alt="Affiche AP 2010" />
<map name="affiche">
    <area shape="rect" coords="19,164,262,213" alt="Description de la zone" class="tooltip" title="Texte de l'infobulle" />
</map> </html>

Ps : merci de ta patience ;)

Réponse 17 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Et la balise <head> elle est où ?
Tu inclus nul part JQuery et le plugin !

Réponse 18 / 21

paulo_du75 Messages postés 179 Statut Membre 9

Ah ok, j'avais pas compris qu'il fallait mettre ça aussi ^^ dsl je réessaie et je te dis ;)

Réponse 19 / 21

paulo_du75 Messages postés 179 Statut Membre 9

ok je crois que j'y suis presque, je te recontacte demain midi merci beaucoup ;)

paulo_du75 Messages postés 179 Statut Membre 9

Bah ça ne marche toujours pas :( voici mon code qui me semble être pas mal ...

<!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>
<img width="701" height="992" src="http://img96.imageshack.us/img96/6063/afficheap2010.jpg" alt="Affiche AP 2010" />
<title>Affiche AP 2010</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
this.screenshotPreview  = function(){   
        /* CONFIG */
               
                xOffset = 10;
                yOffset = 30;
               
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result
               
        /* END CONFIG */
        $("a.screenshot").hover(function(e){
                this.t = this.title;
                this.title = "";       
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                                                                
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");                                               
    },
        function(){
                this.title = this.t;   
                $("#screenshot").remove();
    }); 
        $("a.screenshot").mousemove(function(e){
                $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });                    
};
this.imagePreview = function(){ 
        /* CONFIG */
               
                xOffset = 10;
                yOffset = 30;
               
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result
               
        /* END CONFIG */
        $("a.preview").hover(function(e){
                this.t = this.title;
                this.title = "";       
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                                                
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");                                               
    },
        function(){
                this.title = this.t;   
                $("#preview").remove();
    }); 
        $("a.preview").mousemove(function(e){
                $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });                    
};
this.tooltip = function(){     
        /* CONFIG */           
                xOffset = 10;
                yOffset = 20;          
                // these 2 variable determine popup's distance from the cursor
                // you might want to adjust to get the right result            
        /* END CONFIG */               
        $("a.tooltip").hover(function(e){                                                                                        
                this.t = this.title;
                this.title = "";                                                                         
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast");               
    },
        function(){
                this.title = this.t;           
                $("#tooltip").remove();
    }); 
        $("a.tooltip").mousemove(function(e){
                $("#tooltip")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });                    
}; </script>
<script type="text/javascript">
$(document).ready(function(){
        tooltip();//active les tooltip simple
        imagePreview();//active les tooltip image preview
        screenshotPreview();//active les tooltip lien avec preview
});</script>
</meta>
<style>
body {
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}

h1{
	font-size:180%;
	font-weight:normal;
	color:#555;
}
a{
	text-decoration:none;
	color:#f30;	
}
p{
	clear:both;
	margin:0;
	padding:.5em 0;
}
pre{
	display:block;
	font:100% "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	overflow:auto;
	width:800px;
}


/*  */

#tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:2px 5px;
	color:#333;
	display:none;
	}	

/*  */
</style>

</head>

<body>
<map name="affiche">
    <area shape="rect" coords="19,164,262,213" alt="Description de la zone" class="tooltip" title="Texte de l'infobulle" />
</map>
</body>
</html>

Réponse 20 / 21

avion-f16 Messages postés 20367 Statut Contributeur 4 509

Tu n'avais pas inclus JQuery.
De plus, il y a avait un "</meta>" qui se baladait, l'image dans le head, ...

<!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>Affiche AP 2010</title>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	this.tooltip = function(){
		    /* CONFIG */
		            xOffset = 10;
		            yOffset = 20;
		            // these 2 variable determine popup's distance from the cursor
		            // you might want to adjust to get the right result
		    /* END CONFIG */
		    $(".tooltip").hover(function(e){
		            this.t = this.title;
		            this.title = "";
		            $("body").append("<p id='tooltip'>"+ this.t +"</p>");
		            $("#tooltip")
		                    .css("top",(e.pageY - xOffset) + "px")
		                    .css("left",(e.pageX + yOffset) + "px")
		                    .fadeIn("fast");
		},
		    function(){
		            this.title = this.t;
		            $("#tooltip").remove();
		});
		    $(".tooltip").mousemove(function(e){
		            $("#tooltip")
		                    .css("top",(e.pageY - xOffset) + "px")
		                    .css("left",(e.pageX + yOffset) + "px");
		    });
	};
	
	$(document).ready(function(){
		    tooltip();
	});
	</script>
	
	
	<style>
	body {
		margin:0;
		padding:40px;
		background:#fff;
		font:80% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
	}

	h1{
		font-size:180%;
		font-weight:normal;
		color:#555;
	}
	a{
		text-decoration:none;
		color:#f30;	
	}
	p{
		clear:both;
		margin:0;
		padding:.5em 0;
	}
	pre{
		display:block;
		font:100% "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		overflow:auto;
		width:800px;
	}


	/*  */

	#tooltip{
		position:absolute;
		border:1px solid #333;
		background:#f7f5d1;
		padding:2px 5px;
		color:#333;
		display:none;
		}	

	/*  */
	</style>
</head>
<body>

<img src="http://img96.imageshack.us/img96/6063/afficheap2010.jpg" style="width:701px; height:992px;" alt="Affiche AP 2010" usemap="#affiche" />
<map name="affiche">
    <area shape="rect" coords="19,164,262,213" href="#" alt="Description de la zone" class="tooltip" title="Texte de l'infobulle" />
</map>

</body>
</html>

Discussions similaires

Logiciel équivalent à Crystal Disk Info pour Mac.

sms reçu d'Intrum justitia

Infobulle survol souris

Info Free: Votre encours sur le service internet est supérieur à 10 €.

Info-bulles Flash

21 réponses

Votre réponse

Discussions similaires

Newsletters