begin process at 2012 05 29 17:34:12
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

redimensionner une image


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

redimensionner une image

lundi 10 janvier 2011 à 18:07:07 | redimensionner une image

xzonz

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>

<body>
<div id="bulle" style="position: absolute;"></div>
<script>
decal_x = 25;
decal_y = -15;
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = "<table border='1'bordercolor='red'style='background-color: #000000;'cellpadding='6' cellspacing='0'><tr><td><font color='#ffffff'face='comic sans ms'size='2'><b>"+contenu+"</b></font></td></tr></table>";
}
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>


<a href="file:///D|/chemin image.JPG"onMouseOver="pop0('<img src=\'file:///D|chemin image.JPG\' />')" onMouseOut="disparaitre0()">nassim1</a><br>
<a href="file:///D|/chemin image.JPG.jpg"onMouseOver="pop0('<img src=\'file:///D|/chemin image.jpg\' />')" onMouseOut="disparaitre0()">nassim2</a><br>
<a href="file:///D|/chemin image.JPG.jpg"onMouseOver="pop0('<img src=\'file:///D|/chemin image.JPG.jpg\' />')" onMouseOut="disparaitre0()">nassim3</a><br>
<a href="file:///D|/chemin image.JPG.jpg"onMouseOver="pop0('<img src=\'file:///D|/chemin image.JPG.jpg\' />')" onMouseOut="disparaitre0()">nassim4</a><br>
<a href="file:///D|/chemin image.JPG.jpg"onMouseOver="pop0('<img src=\'file:///D|chemin image.JPG.jpg\' />')" onMouseOut="disparaitre0()">nassim5</a><br>
<a href="file:///D|/chemin image.JPG.jpg"onMouseOver="pop0('<img src=\'file:///D|chemin image.JPG.jpg\' />')" onMouseOut="disparaitre0()">nassim6</a><br>
</body>
</html>





mercredi 12 janvier 2011 à 16:56:30 | Re : redimensionner une image

squonk14


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
Code HTML :
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="bulle" style="position: absolute;"></div>
<script>
decal_x = 25;
decal_y = -15;
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = '<div><img src="'+contenu+'" width="200" border="3" style="border-color:red"></div>';
}
function pop1(contenu)
{
document.getElementById("bulle").innerHTML = '<div>'+contenu+'</div>';
}

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>


<a href="../../Documents GAL1/Mes images/1x1280x1024.jpg" onMouseOver="pop0('../../Documents GAL1/Mes images/1x1280x1024.jpg')" onMouseOut="disparaitre0()">nassim1</a><br>
<a href="../../Documents GAL1/Mes images/2x1280x1024.jpg" onMouseOver="pop0('../../Documents GAL1/Mes images/2x1280x1024.jpg')" onMouseOut="disparaitre0()">nassim3</a><br>
<a href="../../Documents GAL1/Mes images/3x1280x1024.jpg" onMouseOver="pop0('../../Documents GAL1/Mes images/3x1280x1024.jpg')" onMouseOut="disparaitre0()">nassim4</a><br>
<a href="../../Documents GAL1/Mes images/4x1280x1024.jpg" onMouseOver="pop0('../../Documents GAL1/Mes images/4x1280x1024.jpg')" onMouseOut="disparaitre0()">nassim5</a><br>
<a href="../../Documents GAL1/Mes images/5x1280x1024.jpg" onMouseOver="pop1('\x3Cimg src=\x22../../Documents GAL1/Mes images/5x1280x1024.jpg\x22 width=\x22200\x22 border=\x223\x22 style=\x22border-color:red\x22\x3E')" onMouseOut="disparaitre0()">nassim6</a><br>

</body>
</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.


Cette discussion est classée dans : image, var, document, onmouseout, disparaitre0


Répondre à ce message

Sujets en rapport avec ce message

redimensionner une miniature sur un onmouseover [ par xzonz ] bonsoir tout le monde [^^clinoeil1] quand on passe la souris sur les liens ca affiche l'image qui apparait en taille réelle j'aimerais juste qu'elle galerie simple avec image grossissante au survol et replacement auto [ par The Pooh ] Bonjour à tous. peut être que ce topic existe déjà (cela ne m'étonnerai pas :) mais je ne lai pas trouvé. Voilà j'ai ce script avec ses variable que document.images.src qui ne fonctionne pas sous IE [ par MrChrist ] Bonjour, je travaille présentement sur une boutique virtuelle... Chaque item a une photo principale et plusieurs thumbnails, je veux que la photo prin Positionnement par rapport à l'écran [ par Tiish ] Bonjour,Plutôt débutant, je tente désespérément de corriger le script suivant pour que l'image qui apparait se mette pile poil au centre de la page en recuperation coordonnees image pour base de données [ par elodielole ] Slt à tous j'ai donc un gros pbe ça fait plusieurs jour que je bosse dessus, en fait j'aimerais pouvoir recuperer les coordonnées dans ma table d'une Comment récupérer le style d'un élément ? [ par eplanet ] Bonjour à tous, J'essaie d'écrire script qui insère une image dans le document HTML et qui récupère ensuite sa position absolue.Voici mon script (simp Conflit entre 2 code javascript [ par leclanalucky ] salut, voici mon code javascript pour visionner des image, le problème est que du moment que j'inclut une 2e visionneuse plus rien ne marche, il y a u Problème avec REGEX sous IE [ par death83 ] Salut a tous,je suis entrain de faire un petit script qui fonctionne bien sauf sur IE. J'ai une fonction qui permet la génération automatique d'un tex Demande d'aide sur un code [ par bartok79 ] Bonjour, je ne savais pas trop quel thème choisir, excusez moi si je ne suis pas dans le bon.Je n'y comprends pas grang chose. J'ai téléc modifié neige en hiver [ par vollibre ] Bonjour à tousVoila j'ai decidé de mettre un peut les mains dans le cambuit :)et déja j'ai un petit soucis qui je pense dois etre tres simple a regler


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,371 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales