Gérer click droit

**malabarbe** · 09/02/2008, 20h06

Bonsoir,

J'affiche une image en miniature (avec une résolution réduite)

Je voudrais en faisant un click droit sur la miniature ouvrir l'image
(en haute définition) et en gérer les dimentions.

J'ai fait des recherches pour le click droit, mais je n'ai trouvé que
des scripts n'affichant qu'un message Alert !

Pouvez-vous m'aiguiller en JavaScript ou en PHP ?

Merci à tous.

**sachav** · 09/02/2008, 20h55

Pour gerer le clique droit, il faut utiliser oncontextmenu.

Edit: pouvez-vous nous envoyer votre code pour un peu plus de precision ?

**malabarbe** · 09/02/2008, 21h55

Voici le 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>zzz.php</title>
 
<body bgcolor="#CCFF99">
</head>
 
<body>
<p align="center"></p>
<target=bas_droite>
 
<?
$fichier="mini/";
$fichier=$fichier.$_GET['jaq'];
$fichier=$fichier.".jpg";
 
 
/// Teste l'existance de l'image ///
$filename = $fichier;
if (file_exists($filename))
   {
    print "Le fichier $filename existe";
   } 
   else
       {
        $fichier='mini/0000.jpg';
        }
echo ("<img src='$fichier' width='715' height='460' onclick='history.back()' Target='bas_droite' title='   Click = Retour à la Liste   ' />");
?>
 
</body>
</html>

**KawaJVC** · 10/02/2008, 09h01

Bonjour ,

J'ai fait un script pour afficher une image en grand avec des boutons a coté pour la redimensionner. Si tu veux voir un exemple du script : http://xpetera.free.fr/js/script9.htm

Si tu remarques dans ce script j'ai une fonction afficherimage(chemindelimage) donc en fait pour toi (si j'ai bien compris) il te faudrait une fonction du genre qui se fasse lors du clic droit sur ton image. Donc en fait par exemple pour toi :

Code :

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

1
2
 
<img src="image.jpg" oncontextmenu="afficherimage('image.jpg');">

Si tu veux que je t'explique comment utiliser mon script , demande moi (ou alors tu comprendras seul

)

**malabarbe** · 10/02/2008, 11h57

Oui, je veut bien des explications pour le script

Ce que je voudrais est simple :

C'est qu'en faisant un click droit sur une image,
elle soit remplacée par une autre.

**sachav** · 10/02/2008, 16h08

Quelque chose comme ca ?

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
 
<script language="javascript">
var Counter = -1;
var NbOfImages = 5; // NOMBRE D'IMAGES
var imgPrefix = "monimage"; 
var imgExtension = "jpg";
function changeImage(idn) {
if(Counter==NbOfImages) {
Counter = 0; 
} else {
Counter++;
}
document.getElementById(idn).src = imgPrefix + "." + imgExtension;
}
</script>
<img src="#" id="img1" oncontextmenu="changeImage('img1')" />
<script language="javascript">
changeImage('img1');
</script>

Nom des images ;

monimage0.jpg
monimage1.jpg

etc...

**KawaJVC** · 10/02/2008, 20h54

Ben en gros dans ta page tu mets ca :
Javascript :

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
54
55
56
57
58
59
 
function afficherimage(chemin)
{
document.getElementById('imageaf').style.background="url('fondimg.png');";
 
document.getElementById('imageaf').style.position='absolute;';
document.getElementById('imageaf').style.top='0px;';
document.getElementById('imageaf').style.left='0px;';
 
document.getElementById('imageaf').style.width='100%;';
document.getElementById('imageaf').style.height='100%;';
 
document.getElementById('imageaf').innerHTML='<div style="position:absolute;right:0px;top:0px;"><button OnClick="fermer();" >Fermer</button><button OnClick="zoomout();">-</button><b>Zoom</b><button OnClick="zoomin()">+</button><button OnClick="resetpic(\''+chemin+'\');">Remettre l\'image a la taille normale</button></div><br><br><br><br><br><br><center><div id="imagee"><img id="imaget" src="'+chemin+'"></div></center>';
 
 
 
}
function fermer()
{
document.getElementById('imageaf').innerHTML='';
document.getElementById('imageaf').style.background="none;";
document.getElementById('imageaf').style.width='0%;';
document.getElementById('imageaf').style.height='0%;';
}
function zoomin()
{
 
if(document.getElementById('imaget').width == "")
{
document.getElementById('imaget').width='50';
document.getElementById('imaget').height='50';
}
 
else
{
document.getElementById('imaget').width = document.getElementById('imaget').width + 10;
document.getElementById('imaget').height = document.getElementById('imaget').height + 10;
}
 
}
function zoomout()
{
if(document.getElementById('imaget').width == "")
{
document.getElementById('imaget').width='50';
document.getElementById('imaget').height='50';
}
 
else
{
document.getElementById('imaget').width = document.getElementById('imaget').width - 10;
document.getElementById('imaget').height = document.getElementById('imaget').height - 10;
}
 
}
function resetpic(url)
{
document.getElementById('imagee').innerHTML="<img id='imaget' src='"+url+"'>";
}