Présentoir page/sujet

Commenter

Contenu du snippet

c'est un ensemble de javascript et de html permettant de faire une présentation succincte de 4 sujets,
la configuration du script s'effectue dans les variables max, tumbd, back, tittle, text et link au début du script

il est recommandé de mettre le script dans une iframe pour le démarrage de la rotation automatique des sujets:
<iframe src="direct.html" style="border: 0px none; width: 550px; height: 220px;" scrolling="NO"></iframe>

V0.1 sortie initiale
V0.2 ajout de la rotation automatique des sujets et dégraissage du code,possibilité de mettre plus de 4 sujets ceux après les 4 premiers n'aurons pas leur miniatures
v0.2.1 Correctif
V0.3 changement d’apparence et de fonctionnement

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
	#caroussel_backdiv{
		width:550px;
		height:220px;
		}
	#caroussel_case{
		display:block;
		border:1px #A0A0A0 solid;
		height:50px;
		width:110px;
		}
	#caroussel_textfield
		{
		background-image:url('backfield.png');
		width:540px;
		height:100px;
		position:absolute;
		bottom:3px;
		right:5px;
		}
	#caroussel_title
		{
		color:#FFC600;
		font-size:22px;
		font-weight:bold;
		margin-top:3px;
		margin-left:10px;
		}
	#caroussel_step
		{
		color:#dddddd;
		font-size:22px;
		float:right;
		}
	#caroussel_text
		{
		color:#dddddd;
		font-size:18px;
		margin-top:5px;
		margin-left:10px;
		}
	.change_step
		{
		cursor:pointer;
		color:#404040;
		font-size:22px;
		float:right;
		}
</style>
<head>

	<body id="caroussel_backdiv">
	<script type="text/javascript">
		var tumbd = new Array();
		var back = new Array();
		var tittle = new Array();
		var text = new Array();
		var link = new Array();
	
		//variables de paramettrage
		var max=4;//nombre maximum de sujets
		var space=9;//temps d'attente par rotation en secondes
		
			//déclaration sujet 1
		tumbd[1]="tumbd1.png";
		back[1]="back1.jpg";
		tittle[1]="tit 1";
		text[1]="txt1";
		link[1]="#";
		
		tumbd[2]="tumbd2.png";
		back[2]="back2.png";
		tittle[2]="tit 2";
		text[2]="txt 2";
		link[2]="#";
		
		tumbd[3]="tumbd3.png";
		back[3]="back3.png";
		tittle[3]="tit 3";
		text[3]="txt 3";
		link[3]="#";
		
		tumbd[4]="tumbd4.png";
		back[4]="back4.png";
		tittle[4]="tit 4";
		text[4]="txt 4";
		link[4]="#";
		
		//variables
		var nodiv=0;
		var rotatio=true;
		var timer;
		
		function changetitle(notumbd)
			{
			if(notumbd>max)
				notumbd=1;	
			if(notumbd<1)
				notumbd=max;	
			document.getElementById("caroussel_backdiv").style.background = "url("+back[notumbd]+") no-repeat";
			document.getElementById("caroussel_title").innerHTML = tittle[notumbd];
			document.getElementById("caroussel_text").innerHTML = text[notumbd];
			document.getElementById("caroussel_step").innerHTML = notumbd+"/"+max;
			document.getElementById("caroussel_case").style.background = "url("+tumbd[notumbd]+")";
			document.getElementById("caroussel_case").href = link[notumbd];
			}
		function switchdiv()
			{
			if(rotatio==true)
				{
				nodiv = nodiv + 1;
				if(nodiv>max)nodiv=1;
				changetitle(nodiv);
				timer=setTimeout('switchdiv()',space*1000);
				}			
			}
		function next()
			{
			clearTimeout(timer);
			rotatio=false;
			nodiv = nodiv + 1;
			if(nodiv>max)nodiv=1;
			changetitle(nodiv);
			rotatio=true;
			timer=setTimeout('switchdiv()',space*1000);
			}
		function prev()
			{
			clearTimeout(timer);
			rotatio=false;
			nodiv = nodiv - 1;
			if(nodiv<1)nodiv=max;
			changetitle(nodiv);
			rotatio=true;
			timer=setTimeout('switchdiv()',space*1000);
			}
	</script>
		<div id="caroussel_textfield">
			<div style="display:inline;">
				<span id="caroussel_title" ></span>
				<a class="change_step" onclick="next();">&#9658;</a>
				<span id="caroussel_step"></span>
				<a class="change_step" onclick="prev();">&#9668;</a>
			</div>
			<table><tbody><tr><td style="vertical-align:middle;height:87px;">
				<a id="caroussel_case" href="" target="_parent"></a>
			</td><td>			
			<p id="caroussel_text">					
			</p>
			</td></tr></tbody></table>
		</div>
	<script type="text/javascript">
		//initialisation du caroussel
		
		document.getElementById("caroussel_step").innerHTML = "1/"+max;
		document.getElementById("caroussel_backdiv").style.background = "url("+back[1]+") no-repeat";
		document.getElementById("caroussel_title").innerHTML = tittle[1];
		document.getElementById("caroussel_text").innerHTML = text[1];
		document.getElementById("caroussel_case").style.background = "url("+tumbd[1]+")";
		document.getElementById("caroussel_case").href = link[1];
		var i;var j=0;var imag=new Array();
		//préchargement des images suivant les premières
		for(i=2;i<=max;i++)
			{
			imag[j] = new Image;
			imag[j].src = tumbd[i];
			imag[j+1] = new Image;
			imag[j+1].src = back[i];
			j = j + 2;
			}
		//démarage du script de rotation
		switchdiv();
	</script>
	</body>
</html>

Conclusion :


voila un petit présentoir léger et rapide de chargement
les miniatures doivent faire 110x53 px et les images de fond 550x220 px
démo http://kevboulain.free.fr/prez/ (attention les liens pointent sur un site +18 dans la démo, site pour lequel il à été développé à la base)

il est recommandé de mettre le script dans une iframe pour le démarrage automatique
<iframe src="direct.html" style="border: 0px none; width: 550px; height: 220px;" scrolling="NO"></iframe>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.