| Prochaine révision | Révision précédenteDernière révisionLes deux révisions suivantes |
| script-javascript-images-defilantes [04/08/2015 20:17] – créée zonewebmaster | script-javascript-images-defilantes [08/10/2019 17:02] – modification externe 127.0.0.1 |
|---|
| |
| * FireFox : Toutes versions | * FireFox : Toutes versions |
| * Mozilla : 1 et + | * Google Chrome : 1 et + |
| * Internet Explorer : 4 et + | * Internet Explorer : 4 et + |
| * Netscape Navigator : 3 et + | * Netscape Navigator : 3 et + |
| On remplace, dans le code ci-dessus, (n) par le numéro de l'image sachant que la première image porte le numéro 0, on remplace //url_image(n)// par l'URL de l'image et on remplace Lien(n) par la cible vers laquelle doit pointer l'image,donc on obtient : | On remplace, dans le code ci-dessus, (n) par le numéro de l'image sachant que la première image porte le numéro 0, on remplace //url_image(n)// par l'URL de l'image et on remplace Lien(n) par la cible vers laquelle doit pointer l'image,donc on obtient : |
| |
| exemple : l'image a afficher se trouve a l'adresse http://www.zonewebmaster.eu/images/carte_cuisine_g.png et si on clique sur l'image on arrive sur la page HTML suivante : http://www.zonewebmaster.eu | exemple : l'image a afficher se trouve a l'adresse http://www1.zonewebmaster.eu/images/chg-web.png et si on clique sur l'image on arrive sur la page HTML suivante : http://www.chg-web.com |
| |
| <code javascript> | <code javascript> |
| i0 = new Image; | i0 = new Image; |
| i0.src = 'http://www.zonewebmaster.eu/images/carte_cuisine_g.png'; | i0.src = 'http://www1.zonewebmaster.eu/images/chg-web.png'; |
| SiClickGoTo[0] = "http://www.zonewebmaster.eu"; | SiClickGoTo[0] = "http://www.chg-web.com"; |
| imgPath[0] = i0.src; | imgPath[0] = i0.src; |
| </code> | </code> |
| Le code est prévu pour faire défiler 3 images, si vous voulez en faire défilez deux, suffit de supprimer le dernier bloc (de //i2=new image;// jusqu'à //imgPath[2] = i2.src;//). Et pour mettre plus d'image(s) suffit de rajouter un bloc de 4 lignes comme ci-dessus. | Le code est prévu pour faire défiler 3 images, si vous voulez en faire défilez deux, suffit de supprimer le dernier bloc (de //i2=new image;// jusqu'à //imgPath[2] = i2.src;//). Et pour mettre plus d'image(s) suffit de rajouter un bloc de 4 lignes comme ci-dessus. |
| |
| La fonction //StartAnim()// est la fonction principale du code, elle génère la création du code HTML pour l'affichage de l'image et si la version du navigateur est trop ancienne, elle génère un code HTML qui permet d'afficher la première image sans défilement. Nous devons apportez quelques modifications ici aussi, il faut remplacer //url_image0// par l'URL de l'image de la première image, dans l'exemple ci-dessus, on remplace //url_image0// par http://www.zonewebmaster.eu/images/carte_cuisine_g.png puis on remplace Lien0 par la cible définit pour la première image, dans l'exemple ci-dessus, on remplace Lien0 par http://www.zonewebmaster.eu. On obtient ceci : | La fonction //StartAnim()// est la fonction principale du code, elle génère la création du code HTML pour l'affichage de l'image et si la version du navigateur est trop ancienne, elle génère un code HTML qui permet d'afficher la première image sans défilement. Nous devons apportez quelques modifications ici aussi, il faut remplacer //url_image0// par l'URL de l'image de la première image, dans l'exemple ci-dessus, on remplace //url_image0// par http://www1.zonewebmaster.eu/images/chg-web.png puis on remplace Lien0 par la cible définit pour la première image, dans l'exemple ci-dessus, on remplace Lien0 par http://www.chg-web.com. On obtient ceci : |
| |
| <code javascript> | <code javascript> |
| if (version >= 3) | if (version >= 3) |
| { | { |
| document.write('<a href="#" onclick="ImgDest();return(false)"><img src="http://www.zonewebmaster.eu/images/carte_cuisine_g.png" border="0" alt="Menu" name="defil" /></a>'); | document.write('<a href="#" onclick="ImgDest();return(false)"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" alt="Menu" name="defil" /></a>'); |
| defilimg() | defilimg() |
| } | } |
| else | else |
| { | { |
| document.write('<a href="http://www.zonewebmaster.eu"><img src="http://www.zonewebmaster.eu/images/carte_cuisine_g.png" border="0" /></a>') | document.write('<a href="http://www.chg-web.com"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" /></a>') |
| } | } |
| } | } |
| |
| Vous pouvez voir un exemple en ligne en suivant ce lien : http://www1.zonewebmaster.eu/script/menu_defilant.html | Vous pouvez voir un exemple en ligne en suivant ce lien : http://www1.zonewebmaster.eu/script/menu_defilant.html |
| | |
| | ===== Notes de version ===== |
| | |
| | * [18/11/2017] : Harmonisation de la page |
| | |
| | ===== Auteurs et sources ===== |
| | |
| | * Auteur : [[:user:montuy337513]] |
| | |
| | ===== Navigation ===== |
| | |
| | * [[:accueil|Accueil]] |
| | * [[:gestion-site-internet]] |
| | * [[:tutoriel-javascript]] |
| | * [[:tutoriel-html]] |
| | * [[:tutoriel-php-mysql]] |
| | * [[:tutoriel-referencement-seo]] |
| | |
| | <nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser"> |