begin process at 2012 02 14 04:40:46
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Slideshow + lien


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

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

Membre Club
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


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
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,621 sec (4)

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