Discussion :

[nolcla]

Bon,

Le but est d'afficher un layer avec un texte au-dessus d'une image lorsqu'on passe la souris dessus. Il y a plusieurs layers et plusieurs images qui peuvent afficher ou non le même layer.

Voilà 2 semaines que je passe à tenter de résoudre un problème qui n'en est surement pas un pour la majorité des membre de ce forum. je suis un dinosaure du Web et je haïs la programmation. Je suis designer, pas programmateur moi!

Mon truc ne fonctionne pas correctement sur IE et FireFox (le calque reste collé à 20 px), et il n'y a rien qui s'affiche ni sur Safari, ni sur Opera.

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
<-- LA FONCTION DANS MON HEAD/SCRIPT/JAVASCRIPT

 function show(objt,posit) {
 if (document.getElementById){
       var objetStyle=document.getElementById(objt).style;
       objetStyle.visibility = 'visible';
       objetStyle.posTop = posit;
       } 
       else{
       if (document.all){
       document.all[objt].style.visibility = 'visible';
       document.all[objt].style.top = posit; 
       }  
       else{    
       if (document.layers && document.layers[object] != null){
       document.layers[object].top = posit;
       document.layers[object].visibility = 'show';
       }
       }
       }
       }

<-- LE TEXT/CSS EN MODE LOCAL (DANS LES STYLE DU HEAD)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#LayerG {
	position:absolute;
	left:20px;
	top:25px;
	width:799px;
	height:170px;
	z-index:10;
	background-color:#ffffff;
	visibility:hidden;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: justify;
}

<-- UNE DES IMAGES OU SE DÉCLENCHE L'ÉVÉNEMENT PAR ONMOUSEOVER

Code :

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

1
2
3
4
5
6
7
8
9
10
<A href="javascript:void(0)" onMouseOver="show('LayerG','1580')" onMouseOut="hide('LayerG')"><IMG src="images/DSC_0001.jpg" alt="Des corps &eacute;ventr&eacute;s..." width="722"></A>

<-- LE LAYER «DIV>

<DIV id="LayerG">
<TABLE width="100%" border="0" cellspacing="24" cellpadding="0"><TR><TD>Pour le simple motif de leur diff&eacute;rence, ils avaient &eacute;t&eacute; massacr&eacute;s le long d&rsquo;une grande cl&ocirc;ture coiff&eacute;e de barbel&eacute;s et leurs corps ensanglant&eacute;s gisaient encore l&agrave;.
 <BR>
Sous le regard des gardes en uniforme, leurs bourreaux, les villageois des alentours venaient reconna&icirc;tre les leurs, voir ces cadavres entour&eacute;s de nu&eacute;es de mouches, dont les mains agrippaient encore le grillage de la cl&ocirc;ture. 
 <BR>
L&rsquo;odeur &eacute;tait insoutenable, la vision, un cauchemar...</TD></TR></TABLE></DIV>

S.V.P. aidez-moi avant que je ne m'ais arraché les derniers cheveux qu'il me reste.

Merci

[emmanuel.remy]

Salut,

Tu modifies le top mais pas le left. Donc il me semble normal que ton texte apparaissent "collé", non ? Ou alors je n'ai pas compris ce que tu voulais faire.

Sinon, ton code fonctionne correctement sous mon FF et sous Chrome (donc devrait être bon sous Safari).

ERE

[nolcla]

Imaginez une suite de 22 photographies réparties verticalement sur ma page web et de sept différents textes qui sont rattachés à une ou plusieurs de ces images. Il faut donc faire apparaitre le bon texte au dessus de la bonne image.

En survolant un image, le mouseOver envoi à un layer contenant un texte précis la commande d'apparaitre au bon endroit. Cela se fait par les variables « OBJT » et « POSIT » qui sont transmises à la function SHOW.

Pour voir, allez à la page «*L'Exposition*».

http://pages.videotron.com/nolcla/SiteFlashCV.html

Merci