Mes images ne s'affichent pas

Question

gaya_102

6 Mar 2009 à 13:52

Bonjour
je voudrais savoir pourquoi mes images ne s'affichent pas?

Voila mon code html

<!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>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Robots" content="follow" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />

<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>

 <!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>

<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
    @import "design_emeline411.css";
</style>



<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
</head><body>



<!-- liste imbriquée de liens qui fera office de menu -->
<div>
<a href="emeline_index.html"><img src="image/emeline_rub.jpg"></a>
<ul id="menu">
    <li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
 

        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a>
                <ul>
                    <li><a href="#">élément 1</a></li>

                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a>
                        <ul>
                            <li><a href="#">élément 1</a></li>
                            <li><a href="#">élément 2</a></li>
                            <li><a href="#">élément 3</a></li>

                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 3</a>
                <ul>
                    <li><a href="#">élément 1</a></li>

                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a></li>
                </ul>
            </li>
        </ul>
					<ul><img src="image/oiseau1_rub.jpg" style="float: left"></ul>

    </li>
    <li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>

        <ul>

            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
		<ul>
		<img src="image/oiseau2_rub.jpg">
		</ul>
    </li>
    <li><a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
	
        <ul>

            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
		<ul>
		<img src="image/oiseau3_rub.jpg">
		</ul>
    </li>
</ul>
</div>
<script type="text/javascript">
    initMenu();
</script>
<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
</body></html>

merci d'avance[/i][/i][/i][/i]

KalNex

6 Mar 2009 à 14:16

Tu veux dire qu'aucune de tes images ne s'affichent ?

On peut voir une page en ligne ?
Il manque les scripts et la feuille de style.

Ton mouseOver il est possible et a mon avis mieux de le faire en css avec :hover sur les liens.
Tu peux faire des class/id par balise <a> qui contient les images, les mettres en background et sur le :hover changer la source du background.

gaya_102

6 Mar 2009 à 14:23

voila la page
http://www.sandrineetgwen.fr/emelinepresentation.html
Les images "oiseau1_rub.jpg" par exemple ne s'affichent pas. Les autres oui

gaya_102

6 Mar 2009 à 14:24

voici les script de la feuille de style

body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B;
 margin: 0;
 padding: 0;
}


#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

/* CSS du menu horizontal, bieler batiste */

.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
    }

.menu ul{
    position:absolute;
    display:block;
    width:124px;
    /*margin:0;*/
    padding:0;
    }
    
.menu li ul{
    visibility:hidden;
    }

.menu li li ul{
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    }
    
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
    
.menu li li{
    display:block;
    float:none;
    }
    
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }

.menu a{
    text-align:center;
    background-color: #9cf;
    border:0px #666 solid;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:0px 0;
    margin:0spx;
    }
    
.menu a:hover{
    background-color: #eee;
     }
    
.menu a:focus{
    background-color: #aaf;
}

a.linkOver{
    background-color: #eee;
    }

~~supprimé~~

16 Mar 2009 à 15:59

Les images s'affichent, par contre ça casse de partout sous Firefox...

fvsch

16 Mar 2009 à 17:29

Bonjour,

Sujet déplacé car pas en rapport avec JavaScript.

(En passant, utiliser l'attribut alt pour stocker l'URL de la deuxième image est une bêtise. Rien de pire pour l'accessibilité.)

uMa-xou

16 Mar 2009 à 22:33

<img src="image/oiseau2_rub.jpg">

>>>

<img src="image/oiseau2_rub.jpg" alt="" />

Je ne sais pas si ça change énormément mais c'est mieux !

Perso avec firefox j'ai toutes les images mais au secours c'est laid !

Et peut être que le problème est bien du à javascript ! qui sait ? (pas moi!)
Modifié par uMa-xou (16 Mar 2009 - 22:33)

Laurie-Anne

17 Mar 2009 à 08:54

Les images s'affichent également sous IE6, et c'est aussi très laid.

~~supprimé~~

17 Mar 2009 à 21:14

De même pour IE7 : j'ai quitter la page d'urgence.
Désolé.
++

artistik

4 Apr 2009 à 00:57

Bonjour,

Pourquoi ne codes tu pas tout en css?
On peut aussi changer d'image au survol de la souris sans passer par java.

J'édite parce que j'ai oublié de te donner le code.

#image1 { display: block; background-image: url("image1.gif"); /* Image au repos */ width: xxpx; height: xxpx; } #image1:hover, #image1:focus { background-image: url("image2.gif"); /* Image affiché au passage de la souris */ } #limage1 img { display: none; }

Dans ton code html:

<a href="" id="image1"></a>

C'est valide! mais un peu fastidieux pour chaques images selon la nature du rendu que l'on souhaite, puisque ca oblige à faire autant de groupes d'identificateurs que d'image.

Mais au moins, tu sera sûr que ton code html sera net.
Modifié par artistik (04 Apr 2009 - 01:06)

Sujet clos

Sémantique web et HTML

Mes images ne s'affichent pas