Affichage d'une image en taille réelle

bonjour voici les codes html et css:

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
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
        <title>Jo Deyris-Peintures</title> 
       <META NAME="description" lang="fr" content="">
       <META NAME="keywords" lang="fr"content=""> 
       <link rel="stylesheet" href="css1.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
  <title></title>
 
 
<script type="text/javascript">
<!--
var ChangeImage = function ChangeImage(Url)
{
document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
var ChangeImagebis = function ChangeImagebis(Url)
{
document.getElementById('titre').innerHTML = '<p>'+Url+'</p>';
}
-->
</script>
  </head>
<body>
 
<div class="conteneur-galerie-image">
 
<div class="gauche-galerie-image">
<ul class="miniature-galerie-image">
  <li><img src="1.jpg" alt="Chrysantheme" onmouseover="ChangeImage('1.jpg'),ChangeImagebis('My Way');"/></li>
  <li><img src="12.jpg" alt="Desert" onmouseover="ChangeImage('12.jpg'),ChangeImagebis('Encanto');"/></li>
  <li><img src="15.jpg" alt="Hydrangeas" onmouseover="ChangeImage('15.jpg'),ChangeImagebis('Quien eres');"/></li>
   <li><img src="34.jpg" alt="Hydrangeas" onmouseover="ChangeImage('34.jpg'),ChangeImagebis('Silencio');"/></li>
   <li><img src="785.jpg" alt="Hydrangeas" onmouseover="ChangeImage('785.jpg'),ChangeImagebis('Olvidados');"/></li>
</ul>
</div>
 
<div class="droite-galerie-image">
<div id="affiche-image"><img src="1.jpg" alt="Chrysantheme"/></div>
</div>
 
 
<div id="titre"><p>My Way</p></div>
 
 
</div>
 
 
 
  </body>
</html>

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
.conteneur-galerie-image{
margin:0 auto;
width:670px;
/*height:auto;
overflow:auto;
padding:5px;*/
}
.gauche-galerie-image{
width:100px;
height:auto;
float:left;
margin-top:302px;
}
.droite-galerie-image{
width:550px;
height:auto;
float:right;
margin-top:100px;
}
.droite-galerie-image img{
width:490px;
height:400px;
/*background:#D5F4FF;*/
/*padding:5px;*/
}
.miniature-galerie-image{
list-style-type:none;
/*padding:0;*/
}
.miniature-galerie-image li{
display:inline;
}
.miniature-galerie-image li img{
width:40px;
height:40px;
/*background:#EEE;*/
/*padding:5px;*/
margin:1px;*/
}
p{
color:black;
font-family:"Arial Black", Arial, Verdana, serif;
font-size:20px;
}

C une page qui affiche des images en miniature sur la gauche et a droite ya une grande image qui est celle qui saffiche lorsqu on passe la souris sur les petites, un agrandissement des petites donc voilà ce qu'est le grande image.
Ma question:comment faire pour que la grande image soit affichee avec ses dimensions relles, c est à dire les dimensions relles de l image concernée?

merci

Bonjour,

A tout hasard tes images ne seraient pas à ces dimensions ?
Code:

1 2 3 4 5 6 .droite-galerie-image img{ width:490px; height:400px; /*background:#D5F4FF;*/ /*padding:5px;*/ }
Parce que c'est ce que fait ton code, il applique ces dimensions à toutes images (img) dans le conteneur (droite-galerie-image).

Essaye de commenter ces deux lignes pour voir si ça change quelque chose.

Code:

var ChangeImage = function ChangeImage(Url){...}

Cette notation n'a pas de sens... C'est soit

Code:

var ChangeImage = function(Url){...}

soit

Code:

function ChangeImage(Url){...}