CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 14:31:37

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

PRÉSENTOIR PAGE/SUJET

Information sur la source

Note :
Aucune note

Catégorie :Navigation Classé sous :javascript, html, css, slideshow, presentoir Niveau :Initié Date de création :24/07/2011 Date de mise à jour :26/07/2011 08:13:07 Vu :2 600

Auteur : tiranus

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<!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();">►</a>
<span id="caroussel_step"></span>
<a class="change_step" onclick="prev();">◄</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>

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

Historique

24 juillet 2011 22:37:04 :: 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
24 juillet 2011 22:55:21 :: v0.2.1 Correctif
26 juillet 2011 08:06:43 :: V0.3 changement d’apparence et de fonctionnement
26 juillet 2011 08:13:07 :: dépersonnalisation du script (enlèvement liens et texte)

Sources de la même categorie

ANTI-ROBOTS V 1.0 par MacGaliver

NAVIGATEUR INTERNET HAVRET par HAVRETos

WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator

NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh

MENU DE GAUCHE WIN XP par micking

Toutes les sources de la catégorie Navigation

Sources en rapport avec celle ci

POUR LES DÉBUTANTS EN JAVASCRIPT par lecurieux41

DICOFOU DICTIONNAIRE FANTAISISTE EN JAVASCRIPT par lecurieux41

MODIFIER LE CONTENU D'UN DIV AVEC JAVASCRIPT par lecurieux41

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

QUIZ HTML CSS ET JAVASCRIPT par lecurieux41

Commentaires et avis

Commentaire de tiranus le 24/07/2011 16:36:47

si vous voulez faire un commentaire je suis tout ouïe

Commentaire de coucou747 le 24/07/2011 19:24:35 administrateur CS

Bonjour,
ne pas limiter à 4 sujets serait utile.
L'utilisation des boucles tiendrait ton code plus court, plus simple et plus modifiable.

Commentaire de tiranus le 24/07/2011 21:53:54

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

Commentaire de tiranus le 24/07/2011 22:56:52

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

Commentaire de carmelites87 le 02/08/2011 10:51:13

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

Commentaire de tiranus le 02/08/2011 16:59:46

tu préfèrerais une archive ?

Commentaire de carmelites87 le 02/08/2011 17:37:30

ok, comme tu veux, merci !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

création d'un menu en javascript/HTML/CSS [ par marty91410 ] bonjour, je cherche a créer un menu dynamique pour mon site web. le mieux serait un logiciel genre DHTML MENU STUDIO que j'ai testé et que j'aime be [API google Maps javascript] affichage page html dans une infobulle [ par abir01 ] bonjour, je travaille sur google maps javascript, j'ai besoin d'afficher ma page html (qui contient du code JavaScript, et jquery) dans l'infobulle Programmation web HTML et JavaScript [ par aminos88 ] Bonjour, Je suis en train de réalisé une application web, ma problème est comment je peux réalisé un barre d'attente qui se déclenche au moment de cli Creer une page CSS à partir d'une page html [ par karimfellah ] slt tous le monde, j'aimerai bien vous posez une question:j'ai besoin d'un code source qui permet de creer une page css à partir d'une page html je m' CSS vérifier le chargement du css [ par claudecnx ] Je souhaite vérifier le chargement d'un fichier contenant du CSS. Je charge le CSS de manière classique: Puis je lance une classe en javascript. Je convertir lien html/javascript en fonction [ par delorentis ] Bonjour, j'essaie depuis quelques jours de convertir un lien html/javascript dans une simple fonction javascript: mes liens html/javascript:(liens Passer valeur de javascript vers HTML [ par jytest ] Bonjour à tous. Mons souci est simple. Je valide un formulaire HTML grâce à une routine javascript : Dans le javascript, dès qu'une erreur est renco Positionnement [ par Sator ] Bonjour à vous, voilà mon soucis... je cherche une solution j'ai fais un menu en mélangeant du css et du javascript( un menu simple en vertical sans s Javascript / HTML : onglet actif ? [ par newArray ] Bonsoir. Dans le cadre de la réalisation d'un site internet éducatif, je souhaiterais savoir s'il existe une fonction permettant de repérer : 1/ que l Developpement Web CSS-Javascript [ par jeanMOULIN54 ] Bonjour à tous, étant nouveau dans le développement Javascript je cherche à mettre en place une page web avec différent document PDF à télécharger et

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP