Créez un fichier en JS en le nommant "ejs_slidein.js" , insérez le code suivant en n'oubliant pas de mettre l'adresse de l'image (250 X 250) et l'adresse du lien.

(compatible avec Firefox seulement)

<p> if(!document.all && document.getElementById)<br /> ejs_hauteur = window.innerHeight-300;<br /> else<br /> ejs_hauteur = document.body.clientHeight-300;</p> <p> document.write('<style type="text/css">\n');<br /> document.write('#ejs_slide_box ');<br /> document.write(' {');<br /> document.write(' position:absolute;');<br /> document.write(' -moz-border-radius: 20px;');<br /> document.write(' width:280px;');<br /> document.write(' height:270px;');<br /> document.write(' top:'+ejs_hauteur+'px;');<br /> document.write(' left:-260px;');<br /> document.write(' background-color:#ffffff;');<br /> document.write(' border-color:#000000;');<br /> document.write(' border-width:3px;');<br /> document.write(' border-style:solid;');<br /> document.write(' }\n');</p> <p> document.write('#ejs_slide_bouton ');<br /> document.write(' {');<br /> document.write(' position:absolute;');<br /> document.write(' color:#ffffff;');<br /> document.write(' -moz-border-radius: 20px;');<br /> document.write(' top:30px;');<br /> document.write(' left:270px;');<br /> document.write(' background-color:#000000;');<br /> document.write(' font-family:arial;');<br /> document.write(' font-weight:bold;');<br /> document.write(' font-size:15px;');<br /> document.write(' }\n');</p> <p> document.write('#ejs_slide_image ');<br /> document.write(' {');<br /> document.write(' position:relative;');<br /> document.write(' -moz-border-radius: 20px;');<br /> document.write(' top:7px;');<br /> document.write(' left:7px;');<br /> document.write(' }\n');</p> <p> document.write('.ejs_slide_blanc\n');<br /> document.write(' {\n');<br /> document.write(' color:#ffffff;');<br /> document.write(' font-family:arial;');<br /> document.write(' font-weight:bold;');<br /> document.write(' font-size:15px;');<br /> document.write(' text-decoration:none;');<br /> document.write(' }');<br /> document.write('</style>');</p> <p> var slide_tempo;<br /> slide_url_image = 'adresse de l'image';<br /> slide_url_click = 'adresse du lien';<br /> slide_x = -260;<br /> slide_ismoving = false;<br /> slide_first = true;</p> <p> function slide_start()<br /> {<br /> if(slide_x == -260 && !slide_ismoving)<br /> slide_deballe();<br /> else if(!slide_ismoving)<br /> slide_remballe();<br /> }</p> <p> function slide_deballe()<br /> {<br /> slide_ismoving = true;<br /> if(slide_x < 10)<br /> {<br /> slide_x += 5;<br /> slide_move();<br /> setTimeout("slide_deballe()", 10);<br /> }<br /> else<br /> {<br /> slide_ismoving = false;<br /> if(slide_first)<br /> slide_tempo = setTimeout("slide_start()", 5000);<br /> slide_first = false;<br /> } <br /> }</p> <p> function slide_remballe()<br /> {<br /> clearTimeout(slide_tempo);<br /> slide_ismoving = true;<br /> if(slide_x > -260)<br /> {<br /> slide_x -= 5;<br /> slide_move();<br /> setTimeout("slide_remballe()", 10);<br /> }<br /> else<br /> slide_ismoving = false;<br /> }</p> <p> function slide_move()<br /> {<br /> if(document.getElementById)<br /> {<br /> document.getElementById("ejs_slide_box").style.left=slide_x+'px';<br /> }<br /> }</p> <p> function slide_close()<br /> {<br /> if(document.getElementById)<br /> {<br /> document.getElementById("ejs_slide_box").innerHTML = '';<br /> document.getElementById("ejs_slide_box").style.top = -100;<br /> document.getElementById("ejs_slide_box").style.left = -100;<br /> document.getElementById("ejs_slide_box").style.width = 1;<br /> document.getElementById("ejs_slide_box").style.height = 1;<br /> }<br /> }</p> <p> window.onload = slide_start;</p> <p> document.write('<div id="ejs_slide_box">');<br /> document.write('<div id="ejs_slide_image">');<br /> document.write('<a href="'+slide_url_click+'" target="_blank"><img src="'+slide_url_image+'" border="0" alt="" /></a>');<br /> document.write('</div>');<br /> document.write('<div id="ejs_slide_bouton"><a href="#" onclick="slide_start();this.blur();return(false)" class="ejs_slide_blanc">><br /><</a><br /><a href="#" onclick="slide_close();return(false)" class="ejs_slide_blanc">x</a></div>');<br /> document.write('</div>');</p>

hébergez votre fichier et entrez l'adresse dans le code suivant:

entre les balises <body> et </body> (à l'endroit où vous voulez placez le slide)

(l'exemple sur votre gauche ouvrant l'image suivante)
MQDLP

Publicité Slide-in

Partager cet article