affichage au survol de la souris

**tarang** · 11/07/2007, 13h36

hello

Je cherche un javascript permettant l'affichage d'un texte ou d'une image dans une cellule au survol d'un lien par la souris. Ceci afin d'afficher dans une même cellule la légende d'images et les agrandissements.

Merci à vous

**Matthieu2000** · 11/07/2007, 13h40

http://javascript.developpez.com/faq...ript#InfoBulle

**tarang** · 11/07/2007, 14h30

Merci Matthieu,

peut-être n'ais-je pas été assez précis. J'aimerais par exemple qu'au survol d'une image miniature, s'affiche son agrandissement ou une légende (au choix). Et ceci à un emplacement fixe de la page (ne dépendant pas de la position de la souris).
Si j'ai un lien à 100px/100 et un autre à 100/120, la cible serait toujours identique (p.ex. 200/200). Mes recherches sur le web n'ont pas été frustueuses

**Matthieu2000** · 11/07/2007, 14h36

il suffit de changer un peu le code

Code :

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

1
2
bulle.style.left= "200px";
bulle.style.top= "200px";

!

**tarang** · 11/07/2007, 15h08

En effet, ca fonctionne!
Tu l'auras deviné, je ne suis pas très connaisseur en javascript.
Je m'embrouille un peu. Comment modifier le contenu pour, par exemple, qu'il affiche l'agrandissement d'une image A et B...
grand merci

**tarang** · 11/07/2007, 16h18

Ne faisant pas de programmation, je crains que ce ne soit trop compliqué a éditer pour moi. Sauf si quelqu'un parvient a me l'expliquer mais actuellement je ne comprend pas la logique du script.
Existe-t-il un script plus facile a éditer?

merci

**Xann_71** · 11/07/2007, 16h27

Tu peux etre plus précis? Il doit afficher les deux images en même temps?

**tarang** · 11/07/2007, 16h50

J'ai deux cas de figure:

- lors du survol d'une des miniatures la légende de celle-ci s'affiche dans la cellule. P. ex. si je survole la miniature de mon chien, s'affiche: voici Foulcan, mon chien. Si je survole la miniature du canari s'affiche: voici cuitcuit le canari.

- Lors du survol d'une miniature, sa version agrandie s'affiche pour chacune d'elles dans l'espace approprié

voir le fichier attaché
Suis-je confus?

**Xann_71** · 11/07/2007, 16h55

ben pour le message avec foulcan ou cuicuit, faut faire un title dans les balises img

Pour la second solution j'y réfléchit

**Xann_71** · 11/07/2007, 16h56

Ce que je vois sur le coup, c'est faire un nouveau div, avec une balise img ou ton image est plus grande.
ensuite il te faut du code javascript mais j'ai pas le temps ce soir je vais partir, j'essai de te redire ça demain.

**tarang** · 11/07/2007, 17h03

Tu es un as, je vais faire la java

**Matthieu2000** · 11/07/2007, 17h04

http://www.developpez.net/forums/sho...image+agrandir

http://www.developpez.net/forums/sho...image+agrandir

**tarang** · 12/07/2007, 11h19

J'ai trouvé plusieurs choses.
Tout d'abord ce code pour l'affichage d'images:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>test</title>
 
 
</head>
<body>
<!-- DEBUT DU SCRIPT -->
 
/******
DEFINITION DES VARIABLE DU SCRIPT
******/
nb_photo_ligne = 5;
numero_photo = 1;
 
/******
ENREGISTREMENT DES PHOTOS
******/
ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;
 
var HazMess=new Array();
	ejs_des[0]= 'legende1'
	ejs_vignet[0]= '01.jpg'
	ejs_big[0]= '02.jpg'
	ejs_des[1]= 'legende2'
	ejs_vignet[1]= '03.jpg'
	ejs_big[1]= '04.jpg'
 
 
/******
FONCTION POUR CHANGER LES PHOTOS
******/
function ChageImage(num)
	{
	if(document.getElementById)
		document.getElementById("ejs_dyn_img").innerHTML = '<A HREF="javascript:killImage()"><IMG SRC="'+ejs_big[num]+'" BORDER=0 HSPACE=5 VSPACE=5 ALT="Cliquez ici pour faire disparaitre"></A><BR><FONT FACE="Verdana, Arial" SIZE=1>'+ejs_des[num]+'</FONT>';
	else
		window.open(ejs_big[num],"_blank")
	}
 
/******
FONCTION POUR EFFACER LES PHOTOS
******/
function killImage(num)
	{
	if(document.getElementById)
		document.getElementById("ejs_dyn_img").innerHTML = "";
	}
 
/******
CREATION DU TABLEAU
******/
document.write('<TABLE>')
for(a=0;a<ejs_big.length;a++)
	{
	if(numero_photo == 1)
		document.write('<TR>');
	if(numero_photo == ejs_big.length)
		document.write('<TD ALIGN=center COLSPAN='+(((ejs_big.length)+1)-numero_photo)+'>');
	else
		document.write('<TD ALIGN=center>');
	document.write('<A HREF="javascript:ChageImage('+a+')"><IMG SRC="'+ejs_vignet[a]+'" HSPACE=5 VSPACE=5 ALT="Cliquez ici pour voir en grand" BORDER=0></A></TD>')
if(numero_photo == nb_photo_ligne)
		{
		document.write('</TR>');
		numero_photo=0;
		}
	numero_photo++;
	}
document.write('<TR><TD COLSPAN='+ejs_big.length+' ALIGN=center><DIV ID=ejs_dyn_img></DIV></TD></TR></TABLE>');
</SCRIPT>
</body>
</html>

et ceci concernant l'affichage de légendes:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>JScript - onMouseOver, principe de base</title>
  <script language="JavaScript">
//D'autres scripts sur http://www.multimania.com/jscript
//Si vous utilisez ce script, merci de m'avertir !
function changer(txt) {
document.forms[0].elements[0].value=txt
}
  </script>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td></td>
      <td align="center">
      <form><font color="#333333" face="Arial" size="-1"><textarea rows="2" cols="30">Bougez
la souris</textarea>
<!-- Script développé par Olivier Hondermarck Mail: jscript@multimania.com --><!-- D'autres scripts et des conseils sur http://www.multimania.com/jscript -->
        </font></form>
      </td>
      <td></td>
    </tr>
    <tr align="center">
      <td><font color="#333333" face="Arial" size="-1"><a href="misc00.html" onmouseover="javascript:changer('l&eacute;gende premier lien')" onmouseout='javascript:changer("")'><img src="01.jpg"></a></font></td>
      <td><font color="#333333" face="Arial" size="-1"><a href="misc00.html" onmouseover="javascript:changer('l&eacute;gende deuxi&egrave;me lien')" onmouseout='javascript:changer("")'><img src="02.jpg"></a></font></td>
      <td><font color="#333333" face="Arial" size="-1"><a href="misc00.html" onmouseover="javascript:changer('l&eacute;gende troisi&egrave;me lien')" onmouseout='javascript:changer("")'><img src="03.jpg"></a></font></td>
    </tr>
  </tbody>
</table>
 
</body>
</html>

Je cherche désormais a pouvoir afficher les commentaires dans un cadre superposé à l'image cliquable, seulement je ne parviens pas a mettre les coordonnées MAP de l'image pour un background.
Est-il par exemple possible de passer ces informations via une class css? comment?
merci

**Xann_71** · 12/07/2007, 11h39

background-image: url("url_image");
C'est ça que tu veux? c'est la fonction à déclarer dans un css pour afficher une image en fond.
Tu n'as plus qu'à saisir ce code dans la balise css correspondant à ton cadre et elle aura en fond ton image.
Et si tu ne veu pas prendre le risque que l'image se répète:
background-repeat: no-repeat;

**tarang** · 12/07/2007, 12h37

Par exemple si je place l'image de mon chat Piteau comme background, est-il possible d'afficher du contenu sur sa médaille lorsque je clique sur son nez?
J'adore les animaux

**Xann_71** · 12/07/2007, 12h50

Oui faut que tu place un lien ou un bouton invisible sur le nez, et un div pour afficher l'image ou le texte sur la medaille.Ensuite en css tu fais... euh lol. Je sais faire disparaitre ou apparaitre le lien avec du css en cliquant dessus mais pour faire apparaitre disparaitre d'autres éléments, j'utilise javascript. Mais il doit y avoir une technique pour le faire en css.
Tout ce que je sais:
display: none; fait disparaitre ton élément
display: inline (ou block); le fait réapparaitre d'une façon différente pour chaque solution.
regarde sur un cours de css si il n'explique pas comment faire, et si oui sa serais sympa si tu peux me passer la solution. Si j'ai le temps j'irai mais pour le moment j'ai un prob à résoudre sur lequel je galere depuis le début de la semaine

affichage au survol de la souris

JavaScript

Discussions similaires

Partager

Partager