28173 sujets

CSS et mise en forme, CSS3

Problème de position d'images ?

Bonjour,

J'ai un soucis avec la mise en page de ma bannière.

En effet, je souhaiterai que mes images se mettent les une derrière les autres afin de faire un scrolling horizontal.

Voici mon code de test :

<html>
	<head>
		<title>xxx</title>
		<style type="text/css">
			#banniere
			{
				position			: absolute;
			}
		</style>
		<script language="javascript">
			function LoadBanniere(nombre)
			{
				var nom = '';
				var i = 0;
				for (i=1; i<=nombre; i++)
				{
					if (i<10)
					{
						nom = '0' + i + '.png';
					}
					else
					{
						nom = i + '.png';
					}				
					document.getElementById('banniere').innerHTML = document.getElementById('banniere').innerHTML + '<img src="images/banniere/' + nom + '" alt=""/>';
				}
			}
		</script>
	</head>
	<body onload="javascript:LoadBanniere(10);">
		<div id="banniere"></div>
	</body>
</html>


Merci,
ZiP
Salut,

J'ai pas mal avancé, voici mon code :

<html>
	<head>
		<title></title>
		<script>
var ListeImages = new Array()

function image(nom,largeur)
{
	this.nom = nom
	this.largeur = largeur
}

ListeImages[0] = new image('01.png',131)
ListeImages[1] = new image('02.png',131)
ListeImages[2] = new image('03.png',131)
ListeImages[3] = new image('04.png',131)
ListeImages[4] = new image('05.png',131)
ListeImages[5] = new image('06.png',136)
ListeImages[6] = new image('07.png',131)
ListeImages[7] = new image('08.png',139)
ListeImages[8] = new image('09.png',154)
ListeImages[9] = new image('10.png',131)
			
var vitesse = 50

var kk = ListeImages.length
var ii
var hhh
var nnn
var Interval
var Pause
var imgArray = new Array(kk)
var myLeft = new Array(kk)

for (ii=0; ii<kk; ii++)
{
	imgArray[ii] = new Image()
	imgArray[ii].src = ListeImages[ii].nom
	imgArray[ii].width = ListeImages[ii].largeur
	hhh=0 
	for (nnn=0; nnn<ii; nnn++)
	{
		hhh = hhh + ListeImages[nnn].largeur
	}
	myLeft[ii] = hhh
}

function Chargement()
{
	for (ii=0; ii<kk; ii++)
	{ 
		if (document.images[ii].complete == false)
		{
			return false	
			break
		}
	}
	return true
}

function demarre_defilement()
{
	if (Chargement() == true)
	{
		window.clearInterval(Pause)
		Interval = setInterval("defilement()",vitesse)	
	}
}
	
function defilement()
{
	for (ii=0; ii<kk; ii++)
	{
		myLeft[ii] = myLeft[ii] - 1
		if (myLeft[ii] == -(ListeImages[ii].largeur))
		{
			hhh = 0
			for (nnn=0; nnn<kk; nnn++)
			{
				if (nnn!=ii)
				{
					hhh = hhh + ListeImages[nnn].largeur
				}
			}
			myLeft[ii] =  hhh
		}
		document.images[ii].style.left = myLeft[ii]
	}
}

Pause = setInterval("demarre_defilement()",3000)
		</script>
		<style type="text/css">
			body
			{
				background-color	: #C7E7D5;
				color				: #000000;
				font-family			: Verdana, sans-serif;
				font-size			: 11px;
			}		
			#banniere
			{
				background-color	: #00FF00;
				height				: 98px;
				width				: 600px;
			}
		</style>
	</head>
	<body>
		<div id="banniere">
			<script>
				for (ii=0; ii<kk; ii++)
				{
					document.write('<img space=0 hspace=0 vspace=0 border=0 height=98 style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=images/banniere/' + ListeImages[ii].nom + '>')
				}
			</script>
		</div>
	</body>
</html>


On aperçoit le cadre vert en dessous qui fait 98px x 600px et dans lequel je souhaiterai afficher le défilement.

Cependant, actuellement il défile sur toute la largeur de la page et je ne sais pas comment faire.

Merci,
ZiP
Sujet clos
Aller à