Changer et la taille et l'image

**doowy38** · 18/09/2009, 08h10

Bonjour,

Je débute tout juste en JS et donc je viens solliciter votre aide.
J'affiche sur mon site des miniatures, et j'aimerais que quand on clique sur l'une d'entre elle, elle soit remplacée (et non pas agrandie) par l'originale, qui est donc plus grande, et que lorsqu'on clique sur l'originale elle soit de nouveau remplacée par la miniature, tout ça sans recharger la page.
Les miniatures sont dans un dossier et les originales dans un autre.

Est-ce possible ? J'ai cherché sur google mais je ne trouve que des effets de zoom (ce n'est pas ce que je veux) ou des remplacements de photos mais ayant les mêmes dimensions.

Merci d'avance !

**andry.aime** · 18/09/2009, 08h53

Bonjour,
Modifie l'attribut src de l'image avec l'url de l'image original et vise versa selon l'état lors du click.

**doowy38** · 18/09/2009, 21h15

D'accord, mais comment je fais pour récupérer l'état ?

Je pense qu'il faut que j'appelle une fonction à partir des balises img, qui prendrait en argument le nom de l'image concernée, qui testerait le chemin associé à cette image, et le changerais.

Seulement, je ne sais pas vraiment comment faire ça... appeler une fonction quand on clique sur une image, ça c'est bon. Lui donner comme argument le nom de l'image ça je ne sais pas faire, et ensuite tester le chemin d'accès à l'image je ne sais pas faire non plus... de plus si je change le chemin d'accès, il faut aussi que je spécifie les nouvelles dimension de l'image que je souhaite afficher...

Bref le concept ça va, la réalisation est par contre un peu plus confuse...

**PapyWeb** · 18/09/2009, 23h10

Et quelque chose comme çà ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script>
var enlarge=0;
function change(objet){
if (enlarge==0){
	objet.src='57.gif'
	enlarge=1
}else {objet.src='thumb57.gif';enlarge=0;}
 }
</script>
</head>
<body>
<img src="thumb57.gif" width="100" height="125" onclick="javascript: change(this) ;">

Bien sûr "change(objet,image)" avec image='57' et (...) src='thumb'+image+'gif' serait encore mieux.

Salutations,

**doowy38** · 18/09/2009, 23h15

Ca a l'air plutôt bien, mais si je ne me trompe pas la variable enlarge est dite globale ?
Ce qui veut dire qu'elle serait la même pour toutes les images.
Donc si quelqu'un agrandi une image, puis une autre sans réduire la première, enlarge sera déjà à 1 et il ne se passera rien. Il faudra attendre un deuxième clic.

Ai-je raison ? Si non, peux-tu m'expliquer où je me trompe ?

Et également, ne faut-il pas indiquer les nouvelles dimensions de l'image ?

En tout cas merci pour ton aide !

**doowy38** · 19/09/2009, 00h21

Donc comme je le pensais, la variable est bien globale, il faut donc que je trouve un autre moyen de tester si l'image est une miniature ou une originale. Je pensais faire un test sur la taille de l'image, est-ce que je peux le faire si cette taille n'est spécifiée nulle part ? Ou faut-il obligatoirement qu'elle apparaisse dans la balise <img /> ?

Sinon, comme je l'ai dit, mes images sont dans différents dossiers. J'ai adapté le code qui a été donné un peu plus haut pour que la fonction marche avec différentes images du même dossier, en rajoutant name="" dans les balises <img />. Cependant, si je change de dossier, ma fonction ne marche plus. En effet, je ne sais pas comment faire pour récupérer le nom du dossier où se trouve l'image... Une idée ?

Voici mon code :

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
var taille=0;
 
function changerPhoto(photo)
{
	if (taille==0)
	{
		photo.src='09-06-09/' + photo.name + '.JPG';
		taille=1;
	}
	else
	{
		photo.src='09-06-09_mini/' + photo.name + '.JPG';
		taille=0;
	}
}

**Bovino** · 20/09/2009, 15h38

Salut

En effet, je ne sais pas comment faire pour récupérer le nom du dossier où se trouve l'image...

Ca, tu ne pourras pas le déterminer avec JavaScript...

**doowy38** · 21/09/2009, 20h50

Ah... comment puis-je faire alors ?

Et une autre question : l'attribut name dans la balise <img /> rend mon code invalide quand je le passe au validateur du w3. Est-ce parce que je suis en XHTML 1.0 Strict ? Si oui, à quelle version dois-je passer ?

Merci

Changer et la taille et l'image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager