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){...}

08/12/2011, 16h47	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	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){...} __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email