Présentoir page/sujet

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 489 fois - Téléchargée 16 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

Presentoir body minute
Tumbd - Meilleures réponses
Visual Basic / VB.NET : Outlook mail(sujet et message) / ouvrir une page net (vérification de - Guide
Exemple de code html page d'accueil ✓ - Forum - Graphisme/design
Exemple page d'authentification html - Conseils pratiques - PHP
Code source html page d'accueil - Guide
Architecture d'une page web - Conseils pratiques - Javascript

Ajouter un commentaire Commentaires

Signaler

carmelites87

Messages postés: 2
Date d'inscription: mercredi 15 juin 2011
Statut: Membre
Dernière intervention: 2 août 2011

2 août 2011 à 17:37

ok, comme tu veux, merci !

Signaler

tiranus

Messages postés: 9
Date d'inscription: dimanche 1 juillet 2007
Statut: Membre
Dernière intervention: 2 août 2011

2 août 2011 à 16:59

tu préfèrerais une archive ?

Signaler

carmelites87

Messages postés: 2
Date d'inscription: mercredi 15 juin 2011
Statut: Membre
Dernière intervention: 2 août 2011

2 août 2011 à 10:51

thanks,il n'y a pas des fichiers en annexe....

Signaler

tiranus

Messages postés: 9
Date d'inscription: dimanche 1 juillet 2007
Statut: Membre
Dernière intervention: 2 août 2011

24 juil. 2011 à 22:56

ajout de la rotation automatique des sujets, levée de la restriction des 4 sujets(mais affichage uniquement de 4 miniatures)

Signaler

tiranus

Messages postés: 9
Date d'inscription: dimanche 1 juillet 2007
Statut: Membre
Dernière intervention: 2 août 2011

24 juil. 2011 à 21:53

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

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.

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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