Présentoir page/sujet

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 190 fois - Téléchargée 15 fois

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

Ajouter un commentaire

Commentaires

Signaler
tiranus
Messages postés
9
Date d'inscription
dimanche 1 juillet 2007
Statut
Membre
Dernière intervention
2 août 2011
si vous voulez faire un commentaire je suis tout ouïe
Signaler
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 30
Bonjour,
ne pas limiter à 4 sujets serait utile.
L'utilisation des boucles tiendrait ton code plus court, plus simple et plus modifiable.
Signaler
tiranus
Messages postés
9
Date d'inscription
dimanche 1 juillet 2007
Statut
Membre
Dernière intervention
2 août 2011
la limitation à 4 sujet et uniquement liée à la place disponible d'affichage mais je vais y reflechir, quand aux boucles et bien je vais utiliser des tableaux pour le rendre possible
Signaler
tiranus
Messages postés
9
Date d'inscription
dimanche 1 juillet 2007
Statut
Membre
Dernière intervention
2 août 2011
ajout de la rotation automatique des sujets, levée de la restriction des 4 sujets(mais affichage uniquement de 4 miniatures)
Signaler
carmelites87
Messages postés
3
Date d'inscription
mercredi 15 juin 2011
Statut
Membre
Dernière intervention
2 août 2011
thanks,il n'y a pas des fichiers en annexe....
Afficher les 7 commentaires
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.