Trucsweb.com

Forum de discussion

 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">
<!-- multiple scrolling content script, javascript scroller, dhtml scroller, text scroller, DHTML scripts -->
<a name="top"></a>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="body">
<!--DWLayoutTable-->
<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">
<!--DWLayoutTable-->
<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>
<!-- Scroller start -->
<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>
<!-- Scroller end -->

</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

 sp spRe: script pour défilement d'images Oznog29/3/2004
 sp spRe: script pour défilement d'images lazycoconut1/4/2004
 sp spRe: script pour défilement d'images Dexter0028/3/2004
Aucun médias sociaux
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@