Votre question

Modification de script pour traitement d'images

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
28 Mai 2008 14:02:49

Bonjour,

je fais un site ou j'ai besoin de faire un défilement d'images sur le haut de la page ainsi que l'arret du défilement et un zoom de l'image quand on passe la souris dessus.

Et si possible une redirection quand on clique dessus!

J'ai déjà un script fonctionnel qui me permet d'afficher une image et la zoomer lorsque l'on passe la souris dessus.

Il faudrait donc si c'est possible, adapter ce script pour effectuer le défilement et le stop ainsi que la redirection au clique.


Voici le script que j'ai utilisé:



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Contact</title>
<!-- #EndEditable -->
<link href="../styles/style2.css" rel="stylesheet" type="text/css" />

<script language="javascript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=300;//largeur maxi de l'image
var haut=300;//hauteur maxi de l'image
var coeffinit=coeff;
function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',1);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',1);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>

</head>

<body>

<div align="center">
<a name="img"></a>
<a href="#img" onmouseout="initial()" onmouseover="changer()" onclick="" ><img src="mon image" alt="" name="image"/></a></div>
<script language="javascript">

<!--
//PLF-http://www.jejavascript.net/
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
//-->
</script>


Merci d'avance pour votre aide! :) 

Neophyte

Autres pages sur : modification script traitement images

30 Mai 2008 16:44:13

Bonjour,
j'espère que j'ai bien compris ce que vous désiriez

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <!-- #BeginEditable "doctitle" -->
  4. <title>Contact</title>
  5. <!-- #EndEditable -->
  6. <link href="../styles/style2.css" rel="stylesheet" type="text/css" />
  7.  
  8. <script language="javascript">
  9. <!--
  10. //PLF-http://www.jejavascript.net/
  11. var coeff=4;//Coefficient de reduction
  12. var larg=300;//largeur maxi de l'image
  13. var haut=300;//hauteur maxi de l'image
  14. var coeffinit=coeff;
  15. function changer() {
  16. if (document.image.width < larg) {
  17. coeff = coeff-0.2;
  18. document.image.width = Math.round(larg/coeff);
  19. document.image.height = Math.round(haut/coeff);
  20. chang=window.setTimeout('changer();',1);//vitesse de l'effet
  21. }
  22. else {window.clearTimeout(chang);}
  23. }
  24. function initial() {
  25. if (document.image.width > larg/coeffinit) {
  26. window.clearTimeout(chang);
  27. coeff = coeff+0.2;
  28. document.image.width = Math.round(larg/coeff);
  29. document.image.height = Math.round(haut/coeff);
  30.  
  31. initi=window.setTimeout('initial();',1);//vitesse de l'effet
  32. }
  33. else {window.clearTimeout(initi);}
  34. }
  35. //-->
  36. </script>
  37.  
  38. </head>
  39.  
  40. <body>
  41.  
  42. <div align="center">
  43. <a name="img"></a>
  44. <a href="#img" onmouseout="initial()" onmouseover="changer()" onclick="window.location='http://google.fr';" ><img src="mon image" alt="" name="image" border=0 /></a></div>
  45. <script language="javascript">
  46.  
  47. <!--
  48. //PLF-http://www.jejavascript.net/
  49. document.image.width = Math.round(larg/coeff);
  50. document.image.height = Math.round(haut/coeff);
  51. //-->
  52. </script>
Contenus similaires
1 Juin 2008 16:55:18

Hello,

Merci ta réponse!

mais il manque encore pour l'ajout de plusieurs images et le défilement des images quand on ne met pas la souris dessus!

Donc si t'arriverai à m'aider encore pour ça, ça serait super cool! :-)

Merci d'avance.

Neophyte


1 Juin 2008 19:57:07

De rien :) 

Pour avoir plusieurs images, il suffit de rajouter le code des images :

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <!-- #BeginEditable "doctitle" -->
  4. <title>Contact</title>
  5. <!-- #EndEditable -->
  6. <link href="../styles/style2.css" rel="stylesheet" type="text/css" />
  7. <script language="javascript">
  8. <!--
  9. //PLF-http://www.jejavascript.net/
  10. var coeff=4;//Coefficient de reduction
  11. var larg=300;//largeur maxi de l'image
  12. var haut=300;//hauteur maxi de l'image
  13. var coeffinit=coeff;
  14. function changer() {
  15. if (document.image.width < larg) {
  16. coeff = coeff-0.2;
  17. document.image.width = Math.round(larg/coeff);
  18. document.image.height = Math.round(haut/coeff);
  19. chang=window.setTimeout('changer();',1);//vitesse de l'effet
  20. }
  21. else {window.clearTimeout(chang);}
  22. }
  23. function initial() {
  24. if (document.image.width > larg/coeffinit) {
  25. window.clearTimeout(chang);
  26. coeff = coeff+0.2;
  27. document.image.width = Math.round(larg/coeff);
  28. document.image.height = Math.round(haut/coeff);
  29. initi=window.setTimeout('initial();',1);//vitesse de l'effet
  30. }
  31. else {window.clearTimeout(initi);}
  32. }
  33. //-->
  34. </script>
  35. </head>
  36. <body>
  37. <div align="center">
  38. <a name="img"></a>
  39. // Image 1
  40. <a href="#img" onmouseout="initial()" onmouseover="changer()" onclick="window.location='http://google.fr';" ><img src="mon image" alt="" name="image" border=0 /></a>
  41. // Image 2
  42. <a href="#img" onmouseout="initial()" onmouseover="changer()" onclick="window.location='http://google.fr';" ><img src="mon image" alt="" name="image" border=0 /></a>
  43. // Etc...
  44. </div>
  45. <script language="javascript">
  46. <!--
  47. //PLF-http://www.jejavascript.net/
  48. document.image.width = Math.round(larg/coeff);
  49. document.image.height = Math.round(haut/coeff);
  50. //-->
  51. </script>


Pour le défilement, à vous de trouver un script et de le joindre au script que vous avez déjà
2 Juin 2008 08:50:47

Ok! Merci beaucoup! :) 

Je vais voir ce que je peux trouver!

A++
2 Juin 2008 14:30:56

Re-salut!

J'ai testé pour plusieurs images mais, lorsque j'en met une 2ème, les 2 images s'affichent en taille réel sur la page et donc il n y a plus le zoom et tout!

Alors que si j'en met qu'une, l'image est bien réduite au début et peut être zoomée!

si t'as la raison je suis prenant! :-)

Merci
2 Juin 2008 18:45:46

Oui, j'ai vu mais cela ne marche pas :s

Désolé, je ne sais pas.
3 Juin 2008 14:39:30

SiMax86 a dit :
Oui, j'ai vu mais cela ne marche pas :s

Désolé, je ne sais pas.



mmm ben cherche! loool :D 

Ben écoute si tu trouve des infos la dessus reviens par ici! ;-)

En attendant je vais chercher un peu partout!

A++
3 Juin 2008 20:43:11

Ok :) 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS