Forum « script pour défilement d'images »

Forum « Programmation Javascript » (archives)

script pour défilement d'images

Envoyé: 28 mars 2004, 10h56 par Lazycoconut

Salut,

Je cherche un script pour faire défiler des images de gauche à droite ou de droite à gauche uniquement lorsque l'on clique ou survole la flèche appropriée.

J'en ai trouvé un qui malheureusement fait défiler le contenu de haut en bas.

Voici le code, qqn peut-il m'aider à repérer quels sont les paramètres à changer pour obtenir le défilement horizontal ? :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>content text scroller script</title>
<link rel="stylesheet" href="scripts.css" type="text/css">
<style type="text/css">
body {width:100%; height:100%; margin:0px;}
#links {position:absolute; left:120px; top:280px;}
#up {position:absolute; left:380px; top:556px; cursor:pointer;}
#down {position:absolute; left:601px; top:556px; cursor:pointer;}
#cont {position:relative; left:120px; top:0px; width:600px; height:200px; border:1px solid #006699; overflow:hidden;}
.txt {position:absolute; left:0px; top:0px; width:690px; font-family:verdana,arial,helvetica,sans-serif; font-size:11px; text-align:left; padding:5px; visibility:hidden;}
</style>
<script type="text/javascript">

timerID = null;
var active = 0;

function ChangePage(num){
if(document.getElementById){
obj[active].style.visibility = "hidden";
active = num;
obj[active].style.top = 0;
obj[active].style.visibility = "visible";
}
}

function ScrollUp(speed){
if(document.getElementById){
if(parseInt(obj[active].style.top) < 0){
obj[active].style.top = parseInt(obj[active].style.top) + speed + "px";
}
timerID = setTimeout("ScrollUp("+speed+")",30);
}
}

function ScrollDown(speed){
if(document.getElementById){
if(parseInt(obj[active].style.top) > document.getElementById('cont').offsetHeight - obj[active].offsetHeight){
obj[active].style.top = parseInt(obj[active].style.top) - speed + "px";
}
timerID = setTimeout("ScrollDown("+speed+")",30);
}
}

function ScrollStop(){
if(document.getElementById){
clearTimeout(timerID);
}
}

function ScrollPageInit() {
if(document.getElementById){
obj = document.getElementById("cont").getElementsByTagName("div");
obj['page1'].style.visibility = "visible";
obj['page1'].style.top = 0;
}
if(document.addEventListener){
for(i=0;i<document.getElementsByTagName('a').length;i++){
document.getElementsByTagName('a')[i].style.position = "relative";
}
}
}
</script>
</head>
<body onload="ScrollPageInit();" bgcolor="#FFFFFF" text="#000000" link="#0000A0" vlink="#0000A0" alink="#0000A0" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<a name="top"></a>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="body">

<tr>
<td width="111" height="19" bgcolor="#C0C0C0"> </td>
<td width="863"></td>
</tr>
<tr>
<td height="663" bgcolor="#C0C0C0"> </td>
<td valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="99%" class="body">

<tr>
<td width="854" height="76"> </td>
</tr>
<tr>
<td class="body" valign="top"> <p class="author">
<p class="author">
<p class="author">
<p class="author">
<p class="author">
<p> </p>
<p align="left"><b></b></p>

<img id="up" src="left.gif" width="22" height="20" border="0" alt="" name="b1" onmouseover="ScrollUp(5);" onmouseout="ScrollStop();" >
<img id="down" src="right.gif" width="22" height="20" border="0" alt="" name="b2" onmouseover="ScrollDown(5);" onmouseout="ScrollStop();">
<div id="cont">
<div id="page1" class="txt">
<br>
Professional business planning software to provide you with trend
setting templates and financial projections.<br>
<br>
<b>Program features:</b><br>
<ul>
<li>easy-to-use browser interface easy-to-follow comprehensive business guide</li>
<li>built-in marketing concept clear goals and strategy settings</li>
<li>easy to use in known word processor formats historic information pre-defined spreadsheets with automatic calculations between sheets</li>
<li>assumptions sheet to enter variables such as tax rates, etc..</li>
<li>fully automated charts complete financial data and automatic ratios complete investment budget</li>
<li>capitalization and balance sheet projections sales, profit loss, cashflow projections</li>
<li>automatic completion of financials in sequence advertising budget and personnel plan</li>
<li>quick one year projection best case/worst case scenarios product line and products per product line generator</li>
</ul>
<i><a href="http://planmagic.com/business_planning.html";>Click
here to know more</a></i><br>
<br>
</div>
</div>


</body>
</html>

________________________________________

sinon j'ai ce script là, mais le défaut c'est que une fois lancé, le défilement ne s'arrête pas, du coup les images sortent totalement de l'écran :

<html>
<head>
<title>diaporama horizontal</title>
<style>
#cadre {position:absolute;}
</style>
<script language="javascript">
function init()
{
//============Debut parametre modifiable===================
largeur_image = 500;
hauteur_image = 260;
position_cadre_top = 250;
position_cadre_left = 150;
vitesse_scrool = 100;
longueur_scrool = 5;
nb_image = 3;
//============Fin parametre modifiable===================
no_image = 1;
enmouvement = false;
recttop = 0;
rectright = largeur_image;
rectbottom = largeur_image;
rectleft = 0;
posleft = position_cadre_left;
cadreobjet = document.layers?document.layers['cadre']:document.all?document.all('cadre'):document.getElementById('cadre');
scannerobjet = document.layers?document.layers['scanner']:document.all?document.all('scanner'):document.getElementById('scanner');
if (document.layers)
{
cadreobjet.top = position_cadre_top;
scannerobjet.top = hauteur_image + position_cadre_top;
scannerobjet.left = Math.floor(position_cadre_left+(largeur_image -40)/2);
}
else
{
cadreobjet.style.top = position_cadre_top;
scannerobjet.style.top = hauteur_image + position_cadre_top;
scannerobjet.style.left = Math.floor(position_cadre_left +(largeur_image -40)/2);

}
appliquerclip();
}
function gauche()
{
if (no_image == 1) return;
if (gauche.arguments.length != 0) {scrool = longueur_scrool; longscr = largeur_image; enmouvement = true;}
if ( longscr == 0) {clearTimeout(gauchearret);enmouvement =false;no_image--;return;}
posleft += scrool;
rectright -= scrool;
rectleft -= scrool;
longscr -= scrool;
scrool = longscr>=longueur_scrool?longueur_scrool:longscr;
appliquerclip();
gauchearret = setTimeout("gauche()", vitesse_scrool);
}
function droite()
{
if (no_image == nb_image) return;
if (droite.arguments.length != 0) {scrool = longueur_scrool; longscr = largeur_image; enmouvement = true;}
if ( longscr == 0) {clearTimeout(droitearret);enmouvement =false;no_image++;return;}
posleft -= scrool;
rectright += scrool;
rectleft += scrool;
longscr -= scrool;
scrool = longscr>=longueur_scrool?longueur_scrool:longscr;
appliquerclip();
droitearret = setTimeout("droite()", vitesse_scrool);
}
function appliquerclip()
{
if (document.layers)
{
cadreobjet.clip.top = recttop;
cadreobjet.clip.right = rectright;
cadreobjet.clip.bottom = rectbottom;
cadreobjet.clip.left = rectleft;
cadreobjet.left = posleft;
}
else
{
cadreobjet.style.clip = "rect("+recttop+" "+rectright+" "+rectbottom+" "+rectleft+")";
cadreobjet.style.left = posleft;
}
}
</script>
</head>
<body onload="init();">
<div id="cadre">
<table border=0 cellspacing=0 cellpadding=0><tr>
<td><img src="comediens/axelki.jpg" alt="" border="0" width="176" height="127"></td>
<td><img src="comediens/bordin.gif" alt="" border="0" width="113" height="166"></td>
<td><img src="comediens/cbouvier.jpg" alt="" border="0" width="132" height="212"></td>
<td><img src="comediens/fmismetti.gif" alt="" border="0" width="115" height="170"></td>
<td><img src="comediens/karimo.jpg" alt="" border="0" width="93" height="141"></td>
</tr></table>
</div>

<div id="scanner" style="position:absolute;">
<img border="0" src="left.gif" width="22" height="20" onclick="if (!enmouvement) droite('go');">
<img border="0" src="right.gif" width="22" height="20" onclick="if (!enmouvement) gauche('go');">
<div>
</body>
</html>
________________________________________

Bref ça serait sympa de m'aider à rendre l'un de ces scripts potable, ou de m'en indiquer un tout prêt pour avoir l'effet que je veux !

Merci bcp et ciao ciao

Réponses

Re: script pour défilement d'images	Oznog	29/3/2004
Re: script pour défilement d'images	lazycoconut	1/4/2004
Re: script pour défilement d'images	Dexter00	28/3/2004