Redimensionner une image

Messages postés
105
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
18 mai 2019
- - Dernière réponse : squonk14
Messages postés
16
Date d'inscription
mardi 20 avril 2010
Statut
Membre
Dernière intervention
20 juin 2012
- 12 janv. 2011 à 16:56
bonjour a toutes et tous

voila ma question:

j'ai une page toute simple (pour le moment)
sur laquelle il y a des liens pointant
vers des images.

il y a une fonction javascript qui me permet
d'afficher l'image quand on passe la souris sur le lien ... jusqu'ici rien de bien sorcier...
ca fonctionne.

maintenant je voudrai que l'image soit redimensionnée en gardant les proportions
quand on passe la souris sur le lien.
(quatre fois plus petite par exemple)
j'ai essayé plein de trucs ... sans succès

pourriez vous me donner un coup de main
svp ... car la je galère bien !!

voila le code de la page
merci de votre aide
--------------------------------------------
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>




<script>
decal_x = 25;
decal_y = -15;
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = ""+contenu+"
";
}
function suivre_souris0(e)
{
if (navigator.appName=="Microsoft Internet Explorer")
{
var x event.x + document.body.scrollLeft; var y event.y + document.body.scrollTop;
}
else
{
var x e.pageX;var y e.pageY;
}
document.getElementById("bulle").style.left x + decal_x; document.getElementById("bulle").style.top y + decal_y;
}
function disparaitre0()
{
document.getElementById("bulle").innerHTML = '';
}

</script>


[file:///D|/chemin image.JPG nassim1]

[file:///D|/chemin image.JPG.jpg nassim2]

[file:///D|/chemin image.JPG.jpg nassim3]

[file:///D|/chemin image.JPG.jpg nassim4]

[file:///D|/chemin image.JPG.jpg nassim5]

[file:///D|/chemin image.JPG.jpg nassim6]


</html>
Afficher la suite 

1 réponse

Messages postés
16
Date d'inscription
mardi 20 avril 2010
Statut
Membre
Dernière intervention
20 juin 2012
0
Merci
Bonjour,

j'ai essayé en rajoutant un % dans la balise img mais ça ne passe pas bien sur tous les navigateurs, et même lorsque ça passe le comportement est bizarre (la taille change légèrement lorsqu'on déplace la souris).
Faute de mieux je te propose un truc avec une taille fixe (j'ai mis 200).
Ca donne le code suivant
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>




<script>
decal_x = 25;
decal_y = -15;
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = '

';
}
function pop1(contenu)
{
document.getElementById("bulle").innerHTML = '
'+contenu+'
';
}

function suivre_souris0(e)
{
if (navigator.appName=="Microsoft Internet Explorer")
{
var x event.x + document.body.scrollLeft; var y event.y + document.body.scrollTop;
}
else
{
var x e.pageX;var y e.pageY;
}
document.getElementById("bulle").style.left x + decal_x; document.getElementById("bulle").style.top y + decal_y;
}
function disparaitre0()
{
document.getElementById("bulle").innerHTML = '';
}

</script>


[../../Documents GAL1/Mes images/1x1280x1024.jpg nassim1]

[../../Documents GAL1/Mes images/2x1280x1024.jpg nassim3]

[../../Documents GAL1/Mes images/3x1280x1024.jpg nassim4]

[../../Documents GAL1/Mes images/4x1280x1024.jpg nassim5]

[../../Documents GAL1/Mes images/5x1280x1024.jpg nassim6]



</html>


J'ai enlevé le table qui ne sert pas a grand chose ici et remplacé l'argument de ta fonction pop0 par le chemin de l'image. Si tu veux absolument mettre la balise entière comme argument de ta fonction, il faut faire attention aux quotes. Je t'ai créé une fonction pop1 qui est appelé sur nassim6 en remplaçant les quotes par leurs codes jesaisplusquoi.

Voilà, j'espère que ça t'aidera un peu.

-------------------------------------------------------------
Il ne suffit pas d'être inutile. Encore faut-il être odieux.
Commenter la réponse de squonk14