conflit d'images javascript

**zukuzu** · 23/05/2008, 00h34

hello et merci de vous être arrêtés,

voila il y a peu on m'a aidé sur ce forum et d'une manière très rapide et efficace, je débute et là je suis bloqué à nouveau.. alors je vous sollicite encore ^___________^

j'ai appris à faire apparaitre une image quelque part sur mon écran lorsque je survole un élément choisi.
dans mon probleme, c'est un dessin qui fait apparaitre un nouveau dessin.

lorsque je le fais apparaitre "disons a 50px" du dessin d'origine ça marche nikel.

mais si je désire le faire apparaitre sur le même dessin pour qu'il le superpose, alors les deux dessins clignotent comme si ils étaient sur le même plan et qu'ils se battaient..

j'ai lu des post sur "visibility, z-index, transformer l'image en background et je doit avouer que je me perds assez facilement.

j'espere avoir été assez claire merci d'avance..

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>noir et blanc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS externe du monde de zukuzu" href="yo.css" />
<script type="text/javascript" language="javascript">
 
 
var ns4 = (document.layers)? true:false;         //NS 4
var ie4 = (document.all)? true:false;         //IE 4
var dom = (document.getElementById)? true:false;   //NS 6 ou IE 5
 
var code1 =    "<img  class=\"sharpman_emplacement01\" src=\"images/sharpman02 galerie.png\"alt=\"D_01\" title=\"D_01\"/>"
				+"<img  class=\"case_emplacement01\" src=\"images/case galerie.png\" alt=\"D_01\" title=\"D_01\"/>";			
 
function affiche(monCodeHtml){
      if (dom) {
      document.getElementById("apercu").innerHTML = monCodeHtml;
         return;
      }
      if (ie4) {
          document.all["apercu"].innerHTML = monCodeHtml;
         return;
      }
      if (ns4) {
          with (eval('document.'+"apercu"+'.document')) {
             open();
             write(monCodeHtml);
             close();
         }
         return;
      }
}
 
</script>
 
</head>
 
<body class="sharpman_menu">
 
<img onClick='CATEGOTESTO.html' onMouseOver="affiche(code1)" OnMouseOut="affiche('&nbsp;');"class="bulle01" src="images/bulle galerie.png"  alt="D_01" title="D_01"/>
 
<img class="sharpman_emplacement" src="images/sharpman01.png"  alt="D_01" title="D_01">
 
</body>
</html>
 
<div id="apercu">&nbsp;</div>

**Capt. Flame** · 23/05/2008, 05h57

Premièrement, merci d'avoir fait l'effort de mettre ton code dans une balise mais la prochaine fois utilise la balise CODE et non QUOTE

Ceci dit, j'aimerais avoir plus de détails sur ton besoin... Est-ce que tu veux remplacer ta première image par la seconde ou est-ce que tu veux que les deux soient présentent en même temps?

Si tu veux qu'elles soient l'une sur l'autre en même temps, tu devras jouer avec les styles css suivants: position, top et left.

Autrement, si tu veux en faire apparaître une et faire disparaître l'autre, tu devrais jouer avec les avec le style css display.

Pour l'instant il y a deux petits changements à apporter dans ton code:

1- Tu as ton <div id="apercu"> </div> qui est à l'extérieur de ton <body>... Tu doit mettre tout ton code dans la balise <body>

2- Dans une de tes images tu as mis "CATEGOTESTO.html" comme valeur à l'attribut onClick. Ça ne fait aucun sens... Tu devrais avoir du javascript et non une url.

**zukuzu** · 23/05/2008, 13h09

bonjour

je voudrai en faire apparaitre une, et faire disparaitre l'autre.

1- Tu as ton <div id="apercu"> </div> qui est à l'extérieur de ton <body>... Tu doit mettre tout ton code dans la balise <body>

oui, en fait je me suis servis d'un code qu'on m'avais donnée pour faire apparaitre tout mes dessins
dans un même tableau a un endroit precis.
mais, là je voulais faire autre chose.. alors je savais plus trop quoi en faire.

2- Dans une de tes images tu as mis "CATEGOTESTO.html" comme valeur à l'attribut onClick. Ça ne fait aucun sens... Tu devrais avoir du javascript et non une url.

oki,
j'ai virée onclick car de toute façon je veux que sa soit l'image qui apparait qui soit un lien vers une autre page.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>noir et blanc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS externe" href="yo.css" />
<script type="text/javascript" language="javascript">
 
 
var ns4 = (document.layers)? true:false;         //NS 4
var ie4 = (document.all)? true:false;         //IE 4
var dom = (document.getElementById)? true:false;   //NS 6 ou IE 5
 
var code1 =    "<img class=\"sharpman_emplacement01\" src=\"images/sharpman02 galerie.png\"alt=\"D_01\" title=\"D_01\"/>"
				+"<img class=\"case_emplacement01\" src=\"images/case galerie.png\" alt=\"D_01\" title=\"D_01\"/>";			
 
 
function affiche(monCodeHtml){
      if (dom) {
      document.getElementById("apercu").innerHTML = monCodeHtml;
         return;
      }
      if (ie4) {
          document.all["apercu"].innerHTML = monCodeHtml;
         return;
      }
      if (ns4) {
          with (eval('document.'+"apercu"+'.document')) {
             open();
             write(monCodeHtml);
             close();
         }
         return;
      }
}
 
</script>
 
</head>
 
<body class="sharpman_menu">
 
<img  onMouseOver="affiche(code1); "OnMouseOut="affiche('&nbsp;');"class="bulle01" src="images/bulle galerie.png"  alt="D_01" title="D_01"/>
 
	<img class="sharpman_emplacement" src="images/sharpman01.png"  alt="D_01" title="D_01">
 
 
<div id="apercu"></div>
 
</body>
</html>

merci

**Capt. Flame** · 23/05/2008, 13h48

je voudrai en faire apparaitre une, et faire disparaitre l'autre

Tu devrais essayer un truc du genre:

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
<html>
    <head>
        <script language="javascript" type="text/javascript">
            var change_image = function(){
                // Si l'image 1 est visible
                if(document.getElementById('img_01').style.display == 'block'){
                    // Cacher l'image 1
                    document.getElementById('img_01').style.display = 'none';
                    // Montrer l'image 2
                    document.getElementById('img_02').style.display = 'block';
                }
                else{// Si non
                    // Montrer l'image 1
                    document.getElementById('img_01').style.display = 'block';
                    // Cacher l'image 2
                    document.getElementById('img_02').style.display = 'none';
                }
 
            }
        </script>
    </head>
    <body>
        <img onmouseover="change_image()" id="img_01" style="display:block" src="http://www.developpez.net/forums/image.php?u=72905&dateline=2006" />
        <img onmouseout="change_image()" id="img_02" style="display:none" src="http://tbn0.google.com/images?q=tbn:T96-_2qFyEZS4M:http://www.justinbrothers.com/Images/drooling_homer.gif" />
    </body>
</html>

je veux que sa soit l'image qui apparait qui soit un lien vers une autre page

Pour ça, place ton image dans une ancre:

Code :

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

<a href="CATEGOTESTO.html" target="_blank"><img src="images/sharpman01.png" /></a>

**zukuzu** · 23/05/2008, 13h56

merci je pourrai testait sa que tout a l'heure
merci encore pour l'aide ^^

**Capt. Flame** · 23/05/2008, 14h57

Pas de quoi...

Si ça répond à tes questions, juste marquer la discussion comme

Merci

conflit d'images javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager