Affichage d'une image en taille réelle

**programmeur400** · 08/12/2011, 14h53

bonjour voici les codes html et css:

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

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

**Torgar** · 08/12/2011, 15h27

Bonjour,

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

Code :

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

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.

**Bovino** · 08/12/2011, 16h47

Code javascript :

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

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

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

Code javascript :

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

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

soit

Code javascript :

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

function ChangeImage(Url){...}

Affichage d'une image en taille réelle

HTML

Discussions similaires

Partager

Partager