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