Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : Slideshow + lien [ CSS / Général ] (matix59)

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é 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...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



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
Temps d'éxécution de la page : 0,484 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.