conflit d'images javascript

Version imprimable

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:

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>

23/05/2008, 05h57
Capt. Flame

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.

bonjour

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

Citation:

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.

Citation:

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:

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

Citation:

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

Tu devrais essayer un truc du genre:

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
<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>

Citation:

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:

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

23/05/2008, 13h56
zukuzu

merci je pourrai testait sa que tout a l'heure
merci encore pour l'aide ^^
23/05/2008, 14h57
Capt. Flame

Pas de quoi...

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

Merci

cela fonctionne un grand merci au Capt. Flame

mais puis-je pousser le principe plus loin..

1_si je désire le refaire sur plusieurs images, dans la même page?

puis-je utiliser la virgule comme en css pour additionner a d'autre "id" comme ci dessou..?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script language="javascript" type="text/javascript">
            var change_image = function(){
                // Si l'image 1 est visible
                if(document.getElementById('img_01','img_01a','img_01b',).style.display == 'block'){
                    // Cacher l'image 1
                    document.getElementById('img_01''img_01a','img_01b',).style.display = 'none';
 
                    // Montrer l'image 2
                    document.getElementById('img_02''img_02a','img_02b',).style.display = 'block';
                }
                else{// Si non
                    // Montrer l'image 1
                    document.getElementById('img_01''img_01a','img_01b',).style.display = 'block';
 
                    // Cacher l'image 2
                    document.getElementById('img_02''img_02a','img_02b',).style.display = 'none';
                }
 
            }
        </script>

et

2_si lorsque je survole une image, je veux en faire apparaitre 2 d'un coup dans la page, comme un "onmouseover multiple" tu pense pouvoir m'expliquer?

Non, il n'est pas possible d'utiliser la virgule. Maintenant, pour éviter un code illisible avec un grand nombre de "document.getElementById()", tu devrais créer des variables. Voici un exemple de comment tu devrais t'y prendre:

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
 
var change_image = function(){
    // Déclaration des variables
    var img01  = document.getElementById('img_01');
    var img01a = document.getElementById('img_01a');
    var img01b = document.getElementById('img_01b');
 
    var img02  = document.getElementById('img_02');
    var img02a = document.getElementById('img_02a');
    var img02b = document.getElementById('img_02b');
 
    // Maintentant, tu peux utiliser les variables
 
    // Si l'image img_01 ou img_01a ou img_01b est visible
    if(img_01.style.display == 'block' || img_01a.style.display == 'block' || img_01b.style.display == 'block'){
        // Cacher les images img_01, img_01a, img_01b
        img01.style.display = 'none';
        img01a.style.display = 'none';
        img01b.style.display = 'none';
 
        // Montrer les images img_02, img_02a, img_02b
        img02.style.display = 'block';
        img02a.style.display = 'block';
        img02b.style.display = 'block';
    }
    else{// Si non
        // Montrer les images img_02, img_02a, img_0b
        img01.style.display = 'block';
        img01a.style.display = 'block';
        img01b.style.display = 'block';
 
        // Cacher les images img_02, img_02a, img_02b
        img02.style.display = 'none';
        img02a.style.display = 'none';
        img02b.style.display = 'none';
    }
 
}

Et l'ensemble de ton "if" pourrait s'écrire sur 3 lignes:

Code:

1
2
3
4
 
var isImg1On = img_01.style.display == 'block' || img_01a.style.display == 'block' || img_01b.style.display == 'block';
img01.style.display = img01a.style.display = img01b.style.display = isImg1On?'none':'block';
img02.style.display = img02a.style.display = img02b.style.display = isImg1On?'block':'none';

Mais ça c'est quand tu veux faire ton frais! ;)

24/05/2008, 13h24
zukuzu

ça ne marche pas

j'ai vu qu'il ni a pas de : "_" dans les noms des variables
mais je sais pas si ça viens de la.

car lorsque je le rajoute cela fait apparaitre tout les dessin en meme temps sur ma page des que je survole un element

si je survole "img01" il y a "img01a","img01b","img01c"..
si je survole "img01a" il y a "img01","img01b","img01c"..

ça ne fonctionne plus au cas par cas

Toutes mes excuses...

Code:

1
2
3
4
5
 
// Il faut changer:
if(img_01.style.display == 'block' || img_01a.style.display == 'block' || img_01b.style.display == 'block')
// Pour:
if(img01.style.display == 'block' || img01a.style.display == 'block' || img01b.style.display == 'block')