Bonjour,
Comment on fait pour qu'une image affiche un texte préconfiguré lors d'un clic sur elle.
Merci
Version imprimable
Bonjour,
Comment on fait pour qu'une image affiche un texte préconfiguré lors d'un clic sur elle.
Merci
Salut,
Si tu mets le texte dans un div caché au-dessus de l'image et que tu l'affiches lors du click?
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:
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');"> ?>
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