Sujet Précédent Sujet Suivant

Création d'une page

95colibri Messages postés 3 Statut Membre -  
Ozimandias Messages postés 528 Statut Membre -
Bonjour,
J'ai mon écran divisé en 2 verticalement, je désirerais mettre des vignettes sur la partie droite et en cliquant sur un vignette, afficher l'image sur la partie gauche.

j'ai essaye mais quand je clique sur une image horizontale c'est OK mais sur une image verticale elle est tassée.

quelqu'un pourrait-il m'expliquer comment faire.
Par avance merci.
A voir également:

3 réponses

Réponse 1 / 3
Ozimandias Messages postés 528 Statut Membre 46
 
Je pense que c'est du au fait que tu forces la taille d'affichage de l'image au départ et lors de la modification de source, elle n'est pas mise à jour.

Fais voir ton code, si je peux je t'aiderai.
0
95colibri Messages postés 3 Statut Membre
 
Bonjour,
C'est un exemple que j'ai copier mais je ne suis par sur que cela est bon, je débute.
Par avance merci.






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="JavaScript" type="text/javascript">
//----------------- gestion album photos mariage -------------------------
function galerie() {
// On récupère l'élément ayant pour id 'galerie'
var vignettes = document.getElementById('galerie');
// On récupère dans une variable tous les liens contenus dans la liste
var liens = vignettes.getElementsByTagName('a') ;
// Ici c'est l'élément ayant pour id photo qui est récupéré
var photo = document.getElementById('photo') ;
// Et enfin le commentaire de la photo de taille normale
var titre_photo = document.getElementById('contenu').getElementsByTagName('h3')[0] ;
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title;
// On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
}
}
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = galerie;
//--------------- Fin gestion album photos mariage ----------------------
</script>

<style type="text/css">

body {background-color:#000000;}
.Style1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
.Style2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style:italic}
.Style3 { font-family: Arial, Helvetica, sans-serif; font-size: 50px}

</style>
</head>
<!---
---------couleur-----------Couleur---------couleurs--------couleur---------couleur----
-------font écran-----------texte--------cadre image-----texte image----image visitée-
----->
<body bgcolor="#000000" text="#0080FF" link="#FFFFFF" vlink="#FFFFFF" alink="#FF0000">

<table width="480" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1024" align="center"><p class="Style3">EXPOSITION ATELIER13 2009</p></td>
</tr>
</table>
<table width="1024" height="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="480" height="360" height="360">

<a href="index.html" target="_self" title="Atelier 13"><img src="img/01.jpg" width="480" height="360" border="2" id="photo" longdesc="Images_Atelier13/img/01.jpg" /></a></td>
<td width="443" align="right" id="photos"> <div id="galerie">
<div id="contenu"><h3 class="Style2" align="center" style="color:#FFFF00">Atelier13</h3></div>
<a href="img/01.jpg" width="360" height="480"title="image 01" onfocus="this.blur();"><img src="vig/01.jpg" width="77" height="60" border="0"/></a>
<a href="img/02.jpg" width="480" height="360"title="image 02" onfocus="this.blur();"><img src="vig/02.jpg" width="47" height="60" border="0"/></a>
<a href="img/03.jpg" width="480" height="360"title="image 03" onfocus="this.blur();"><img src="vig/03.jpg" width="46" height="60" border="0"/></a>
<a href="img/04.jpg" width="480" height="360"title="image 04" onfocus="this.blur();"><img src="vig/04.jpg" width="46" height="60" border="0"/></a>
<a href="img/05.jpg" width="360" height="480"title="image 05" onfocus="this.blur();"><img src="vig/05.jpg" width="77" height="57" border="0"/></a>
<a href="img/06.jpg" width="480" height="360"title="image 06" onfocus="this.blur();"><img src="vig/06.jpg" width="46" height="60" border="0"/></a>

</div>
</td>
</tr>
</table>
<table width="1024" border="0" cellspacing="10" cellpadding="0">

</table>
</td>
</tr>
</table>
</body>
</html>
0
Réponse 2 / 3
95colibri Messages postés 3 Statut Membre
 
Merci d'avance

<body bgcolor="#000000" text="#0080FF" link="#FFFFFF" vlink="#FFFFFF" alink="#FF0000">

<table width="480" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1024" align="center"><p class="Style3">EXPOSITION ATELIER13 2009</p></td>
</tr>
</table>
<table width="1024" height="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="480" height="360" height="360">

<a href="index.html" target="_self" title="Atelier 13"><img src="img/01.jpg" width="480" height="360" border="2" id="photo" longdesc="Images_Atelier13/img/01.jpg" /></a></td>
<td width="443" align="right" id="photos"> <div id="galerie">
<div id="contenu"><h3 class="Style2" align="center" style="color:#FFFF00">Atelier13</h3></div>
<a href="img/01.jpg" width="360" height="480"title="image 01" onfocus="this.blur();"><img src="vig/01.jpg" width="77" height="60" border="0"/></a>
<a href="img/02.jpg" width="480" height="360"title="image 02" onfocus="this.blur();"><img src="vig/02.jpg" width="47" height="60" border="0"/></a>
<a href="img/03.jpg" width="480" height="360"title="image 03" onfocus="this.blur();"><img src="vig/03.jpg" width="46" height="60" border="0"/></a>
<a href="img/04.jpg" width="480" height="360"title="image 04" onfocus="this.blur();"><img src="vig/04.jpg" width="46" height="60" border="0"/></a>
<a href="img/05.jpg" width="360" height="480"title="image 05" onfocus="this.blur();"><img src="vig/05.jpg" width="77" height="57" border="0"/></a>
<a href="img/06.jpg" width="480" height="360"title="image 06" onfocus="this.blur();"><img src="vig/06.jpg" width="46" height="60" border="0"/></a>
0
Réponse 3 / 3
Ozimandias Messages postés 528 Statut Membre 46
 
C'est bien ce que je disais:

<img src="img/01.jpg" width="480" height="360" border="2" id="photo" longdesc="Images_Atelier13/img/01.jpg" />

quand tu clique sur un lien, le src="" est modifié mais pas le width et le height. Donc quelque soit ton image, elle s'affichera en 480 x 360 px.

A la place de :

// Au clique sur ces liens
liens[i].onclick = function() {
photo.src = this.href;

essaye:

// Au clique sur ces liens
liens[i].onclick = function() {
photo.src = this.href;
photo.width = this.width;
photo.height = this.height;

ça devrai fonctionner.
0

Discussions similaires

Impossible de créer ou gérer une page Facebook
Cathou18 -
Cathou18 -

4 réponses