Accueil > Forum > > > > Slideshow + lien
Slideshow + lien
vendredi 18 juillet 2008 à 10:51:59 |
Slideshow + lien

matix59
|
bonjour à tous , j'ai un code pour faire un slideshow en javascript , le problème c'est que je ne sais pas comment ajouter un lien URL à chaque image. <script language="JavaScript1.2"> //Fade-in image slideshow- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var slideshow_width='730px' //SET IMAGE WIDTH var slideshow_height='170px' //SET IMAGE HEIGHT var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]="http://img257.imageshack.us/img257/1958/admsonyjs6.jpg" fadeimages[1]="http://img141.imageshack.us/img141/9097/admnintendoil7.jpg" fadeimages[2]="adm_microsoft.jpg" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>') else document.write('<img name="defaultslide" src="'+fadeimages[0]+'">') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/100 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/100 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> |
|
En vous remerciant d'avance ,
|
|
vendredi 18 juillet 2008 à 11:06:00 |
Re : Slideshow + lien

Zobibol
|
Bien le bonjour, pour une fois du code y en a ;o)
voir en gras dans le source. <script language="JavaScript1.2"> //Fade-in image slideshow- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var slideshow_width='730px' //SET IMAGE WIDTH var slideshow_height='170px' //SET IMAGE HEIGHT var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]="http://img257.imageshack.us/img257/1958/admsonyjs6.jpg" fadeimages[1]="http://img141.imageshack.us/img141/9097/admnintendoil7.jpg" fadeimages[2]="adm_microsoft.jpg"
// Définition des liens. // Le liens 0 est lié à l'image 0 et ainsi de suite. var linkImage = new Array(); linkImage[0] = "http://www.javascriptFr.com"; linkImage[1] = "http://www.google.com"; linkImage[2] = "http://www.yahoo.fr";
////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>') else document.write('<a href="'+linkImage[0]+'" ><img name="defaultslide" src="'+fadeimages[0]+'"></a>') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/100 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<a href="'+linkImage[nextimageindex]+'" ><img src="'+fadeimages[nextimageindex]+'"></a>' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/100 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<a href="'+linkImage[curimageindex]+'"><img src="'+fadeimages[curimageindex]+'"></a>' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script>
et normalement ! ça doit être pas mal !
[o-_-o]
|
|
vendredi 18 juillet 2008 à 12:12:59 |
Re : Slideshow + lien

matix59
|
Un grand merci à toi de part ta rapidité et surtout de l'aide à insérer les liens.
Merci à toi
|
|
vendredi 18 juillet 2008 à 12:39:39 |
Re : Slideshow + lien

matix59
|
juste encore un petit truc , comment je peux faire pour enlever le contour du lien ( ligne bleue ) ?
|
|
vendredi 18 juillet 2008 à 12:45:14 |
Re : Slideshow + lien

Zobibol
|
utilise le style, j'avais pas percuter ce problème... un truc du genre <style> img{ border:0px; } </style>
devrait être amplement sufficant !
[o-_-o]
|
|
vendredi 18 juillet 2008 à 13:50:43 |
Re : Slideshow + lien

banbanfr
|
le px n'est pas obligatoire :)
img{border:0;}
|
|
vendredi 18 juillet 2008 à 14:05:13 |
Re : Slideshow + lien

matix59
|
merci beaucoup , tout fonctionne correctement.
merci
|
|
mercredi 3 décembre 2008 à 14:02:28 |
Re : Slideshow + lien

lolonaae
|
Petite contribution: Pour retirer le contour bleu du lien image il faut ajouter le code suivant : style="border:0" comme ci-dessous en gras:
<script language="JavaScript1.2"> //Fade-in image slideshow- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var slideshow_width='730px' //SET IMAGE WIDTH var slideshow_height='170px' //SET IMAGE HEIGHT var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]="http://img257.imageshack.us/img257/1958/admsonyjs6.jpg" fadeimages[1]="http://img141.imageshack.us/img141/9097/admnintendoil7.jpg" fadeimages[2]="adm_microsoft.jpg"
// Définition des liens. // Le liens 0 est lié à l'image 0 et ainsi de suite. var linkImage = new Array(); linkImage[0] = "http://www.javascriptFr.com"; linkImage[1] = "http://www.google.com"; linkImage[2] = "http://www.yahoo.fr";
////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>') else document.write('<a href="'+linkImage[0]+'" ><img name="defaultslide" src="'+fadeimages[0]+'"></a>') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/100 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<a href="'+linkImage[nextimageindex]+'" ><img src="'+fadeimages[nextimageindex]+'" style="border:0"></a>' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/100 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<a href="'+linkImage[curimageindex]+'"><img src="'+fadeimages[curimageindex]+'" style="border:0"></a>' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script>
|
|
Cette discussion est classée dans : var, document, crossobj, ie4, curcanvas
Répondre à ce message
Sujets en rapport avec ce message
pb compatibilité netscape 7 sur défilement texte et image [ par mozefoc ]
bonjour. j'utilise le script en dessous pour créer une zone dans laquelle je peux insérer texte/images/requetes php... cette zone est de largeure et d
script [ par thigat ]
voilà j'ai fais un script, mais je n'arrive pas a mettre un lien (url) dans ce script, voici le script :/* ATP - webmaster* Script - WebNet.News */va
probleme .js [ par mikedimoi ]
Salut!Je voudrais faire un fichier .js séparé.Voici ce que j'ai dans mon head:function fMike(){//------------------------------// variables declaratio
addition successive d'un champ de formulaire [ par Serialsiner ]
Bonjour,Je cherche à additionner des heures et minutes situées dans 2 champs différents et à afficher le résultat dans un troisième champ résultat.Le
Cookie : Aidez moi s'il vous plait [ par Gravity ]
Bonjour à tous !Je suis vraiment nul en Javascript... J'aurais aimé savoir comment ce code ci peut-être modifié ou alors, creer un nouveau code, pour
Calendrier Javascript incompatible mozilla!!! [ par jojomillenium ]
hello!Vala j'ai un bleme, mon calendrier marche nicke sous explorer mais sous mozilla rien a faire, il apparait pour le mois present, mais si je veux
Evènement onResize [ par initnocsib ]
Je souhaite afficher plus ou moins de photos dans un bandeau en fonction de la taille de la fenêtre. voici le code : if (document.body) { var larg =
Tableau 2D [ par malik7934 ]
Hello, En deux mots: j'ai fais ça: http://noisy.ch/smilies/smilies2.html mais je n'y connais rien à Javascript (c'est pour un chat en php). J'ai modi
Problème d'inscription ! [ par roxor666 ]
Svp je voudrais avoir un script, je sais qu'il existe mais je ne le trouve plus.LE but est que quand un gars s'inscrit sur mon site je recoit le pass
2 sources JScript [ par ProphetKy ]
Bonjour à tous, Voila j'ai un petit probleme avec mes script JavaScript lorsque j'en met deux il y a en a qui disparait. J'ai un Jscrip qui fait le
Livres en rapport
|
Derniers Blogs
XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|