Discussion :

[Tackichi]

Bonjour,
Comment on fait pour qu'une image affiche un texte préconfiguré lors d'un clic sur elle.
Merci

[Bovino]

Bonjour,
Comment on fait pour qu'une image affiche un texte préconfiguré lors d'un clic sur elle.
Merci

C'est-à-dire ?
Désolé, mais je ne comprends pas ta demande !

[andry.aime]

Salut,
Si tu mets le texte dans un div caché au-dessus de l'image et que tu l'affiches lors du click?

[nauax]

salut

pour modifier une image en javascript ce n'est pas possible à ma connaissance. la solution du div est la meilleure sinon il faut passer par un autre langage comme du php.

voici un script que j'ai créé pour faire un bouton input de type image. je m'en sert pour générer automatiquement des boutons grêce à la balise php que j'insère dans le html d'une page php. le graphiste qui travaille avec moi apprécie ce genre de script qui lui permet de générer automatiquement des boutons avec la forme la couleur et la police qu'il souhaite. tu devrait trouver les commandes que tu veux dans mon script. ensuite une petite visite des pages php de ce site devrait suffire à ton bonheur....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
###CRÉATION BOUTON SUBMIT###
#contrainte(s) : bouton en png
#paramètre(s) : evt_js, nom1, R1, V1, B1, nom2, R2, V2, B1, texte, font, taille, class
//evt_js : evenement javascript
//nom : c'est le nom de l'image sans l'extension ; 1 pour l'image par défaut, 2 pour l'image alternative
//R V B : les couleurs des textes sur les images
//font : nom de la police ttf ou otf avec l'extension (mettre le fichier de la police dans "backoffice/images/boutons/"
/*exemple dans le HTML :
<?=auto_bout('onclick="javascript:window.document.form_authentification.reset()"','bout_blanc_2reset','255','255','255','bout_blanc_2','255','255','255','Effacer','ITCAvantGardeStd-Demi.otf','12','nom de class css')?>*/
 
function auto_bout($evt_js,$nom1,$r1,$v1,$b1,$nom2,$r2,$v2,$b2,$texte,$font,$taille,$css){
#les caractéristiques de l'image source
	list($largeur, $hauteur, $format, $attr) = getimagesize('images/boutons/'.$nom1.'.png');//taille de l'image de fond
/*format : 1 = GIF  , 2 = JPG  , 3 = PNG  , 4 = SWF  , 5 = PSD  , 6 = BMP  , 7 = TIFF  (Ordre des octets Intel), 8 = TIFF  (Ordre des octets Motorola), 9 = JPC  , 10 = JP2  , 11 = JPX  , 12 = JB2  , 13 = SWC  , 14 = IFF
attr : la chaîne à placer dans les balises IMG  : height="xxx" width="yyy"*/
 
#création de l'image source côté serveur
	$destination = imagecreatefrompng('images/boutons/'.$nom1.'.png');
	$alternative = imagecreatefrompng('images/boutons/'.$nom2.'.png');
 
#texte du bouton
	//couleur du texte
	$couleur1= ImageColorAllocate($destination,$r1,$v1,$b1);
	$couleur2= ImageColorAllocate($alternative,$r2,$v2,$b2);
	//insertion
/*imagettfbbox ( float   size  , float   angle  , string   fontfile  , string   text  )
0 	Coin inférieur gauche, abscisse - 1 	Coin inférieur gauche, ordonnée - 2 	Coin inférieur droit, abscisse - 3 	Coin inférieur droit, ordonnée
4 	Coin supérieur droit, abscisse - 5 	Coin supérieur droit, ordonnée - 6 	Coin supérieur gauche, abscisse - 7 	Coin supérieur gauche, ordonnée*/
	list($x_bas_gauche,$y_bas_gauche,$x_bas_droite,$y_bas_gauche,$x_haut_droite,$y_haut_droite,$x_haut_gauche,$y_haut_gauche)=imagettfbbox($taille,0,'/images/boutons/'.$font,$texte);//taille du texte
	$x_texte=(($largeur-($x_bas_droite-$x_bas_gauche))/2)+2;//centrage
/*imagettftext ( resource   image  , float   size  , float   angle  , int   x  , int   y  , int   color  , string   fontfile  , string   text  )*/
	imagettftext($destination,$taille,0,$x_texte,16,$couleur1,'/images/boutons/'.$font,$texte);//incrustation sur l'image
	imagettftext($alternative,$taille,0,$x_texte,16,$couleur2,'/images/boutons/'.$font,$texte);//'/images/boutons/'.$font.'.otf'
 
	#transparence de l'image source
	Imagealphablending($destination,false);
	Imagesavealpha($destination,true);
	Imagealphablending($alternative,false);
	Imagesavealpha($alternative,true);
 
	//copie de l'image serveur dans tmp
	$a=rand();
	imagepng($destination, "images/tmp/id$nom1$a.png");
	imagepng($alternative, "images/tmp/bis$nom2$a.png");
 
	return '<input type="image" id="id'.$nom1.$a.'" src="images/tmp/id'.$nom1.$a.'.png" '.$evt_js.' class="'.$css.'" onMouseOver="image_alternative(\'id'.$nom1.$a.'\',\'bis'.$nom2.$a.'\');" onMouseOut="image_alternative(\'id'.$nom1.$a.'\',\'id'.$nom1.$a.'\');">';
	}
//<input type="image" id="idbout_rose_31768295826" src="images/tmp/idbout_rose_31768295826.png" onclick="enrg_ordre();" class="boutons" onMouseOver="image_alternative('idbout_rose_31768295826','bisbout_blanc_31768295826');" onMouseOut="image_alternative('idbout_rose_31768295826','idbout_rose_31768295826');">
?>

[Tackichi]

Merci pour vos réponses,
Je vais expliquer ce que je voudrais atteindre :
Je voudrais créer un mini BBcode pour un système de news, par exemple quand je clique sur une image une certaine balise apparaît, comme c'est le cas de ce site .
Merci