Se connecter avec
S'enregistrer | Connectez-vous

Modification de script pour traitement d'images

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  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='<a href="http://google.fr" target="_blank">http://google.fr</a>';" ><img src="mon image" alt="" name="image" border=0 /></a></div>
    

  45. <script language="javascript">
    

  46.  
  47. <!--
    

  48. //PLF-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  49. document.image.width = Math.round(larg/coeff);
    

  50. document.image.height = Math.round(haut/coeff);
    

  51. //-->
    

  52. </script>

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-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  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='<a href="http://google.fr" target="_blank">http://google.fr</a>';" ><img src="mon image" alt="" name="image" border=0 /></a>
    

  41. // Image 2
    

  42. <a href="#img" onmouseout="initial()" onmouseover="changer()" onclick="window.location='<a href="http://google.fr" target="_blank">http://google.fr</a>';" ><img src="mon image" alt="" name="image" border=0 /></a>
    

  43. // Etc...
    

  44. </div>
    

  45. <script language="javascript">
    

  46. <!--
    

  47. //PLF-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  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à

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
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde