Accueil > Programmes > Projets PHP pour Sites WEB > Charlemagne > De Monito à Monitoo > Monito (HTML)

Monito (HTML)

dimanche 8 août 2010, par bluegyn_spip

Son utilisation est simplissime

Il suffit de placer une image nommée monito.gif dans un dossier quelconque

A côté de la page WEB index.html

Puis d’ouvrir la page WEB index.html, qui activera aussitôt le déroulement :

Le déroulement peut être contrôlé à l’aide des boutons de magnétoscope situés sous l’image

Début

Retour plus moins rapide

Stop

Avance plus ou moins rapide

Rejouer depuis le début

NOTE PRATIQUE

Ce mode d’emploi simplissime a comme corolaire une certaine rigidité dans l’organisation

Il faut une page INDEX.HTML pour chaque IMAGE

L’image doit obligatoirement s’appeler MONITO.GIF

Une version pour image JPG monito.jpg est également disponible

Le format GIF a été choisi après de nombreux essais car il semble le plus adapté à la compression des tracés de monitoring

Très forte compression (donc petit fichier très rapide à charger)

Sans perte de qualité (8 couleurs suffisent largement à sa reproduction)

NOTE TECHNIQUE

L’algorithme d’animation de l’image bénéficie de la technique moderne de l’HTML DYNAMIQUE encore appelé AJAX associant :

Balisage HTML de base

Script Javascript

Feuilles de Style C.S.S

N’importe quel navigateur est capable de l’interpréter (à condition d’autoriser le JAVASCRIPT)

Et donc n’importe quelle plateforme (PC, MAC, LINUX) est capable de l’utiliser

Enfin le script étant intégralement inscrit en clair dans la page HTML (cf affichage Code Source)

N’importe qui peut le modifier et l’améliorer,

Avec un simple éditeur de texte

CODE SOURCE

La lecture du code source distingue 3 sections :

-1- LA SECTION FEUILLE DE STYLE

Entre <STYLE> et </STYLE>

Décrit la présentation des différents objets de la page

Titre

Image

Boutons

On notera essentiellement le balisage du conteneur d’image CONTAINER

Donc l’argument overflow (dépassement) et réglé sur scroll

Ce qui fait apparaitre un ascenseur horizontal permettant de dérouler la bande "à la main"

-2- LA SECTION JAVASCRIPT

Entre <SCRIPT> et </SCRIPT>

Est très inspiré du travail libre suivant :

=> http://javascript.internet.com/misc...

Une fonction a été crée pour chaque bouton,

Ce qui donne ensuite une grande plasticité pour la maintenance et l’amélioration

-3- LA SECTION HTML

Entre les balises <BODY> et </BODY>

A noter que la nom de l’image se détermine dans la section

IMG

<div id="container">                    



<img alt="** Image 'monito.gif' manquante ! **" src="monito.gif">           



 </div>

On peut remplacer monito.gif, par un nom d’image quelconque

Voir en ligne : http://bluegyn.com/monito/

SOURCE

<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" class='spip_url spip_out auto' rel='nofollow external'>http://www.w3.org/TR/html4/loose.dtd</a>"></p>

<head>

<!--

body {

background: #333;

color: yellow;

}

a {

color: white;

}

h1 {

color: white;

background: blue;

border: 3px double;

margin: 1em;

width: 600px;

padding: .2em;

}

button {

background: blue;

color: white;

}

#container {

position: relative;

width: 700px;

/*max-height: 700px;

margin: auto;

padding: 0;

overflow: auto;

border: 3px inset black;

}

-->

</STYLE>

<!--[if IE]>

</style>

<! [endif]-->

/* This script and many more are available free online at

The JavaScript Source :: http://javascript.internet.com

Created by: Mr J :: http://www.huntingground.net/

http://javascript.internet.com/miscellaneous/scroll-div-horizontal.html#null

SCRIPT REVU FRANCISE & CORRIGE AOUT 2010 BlueGYN ***{:-

HTTP://bluegyn.com

setTimeout:

Object window.setTimeout(String fonc, Integer delai)

Déclenche une minuterie et appelle le code javascript = fonct dans delai = millisecondes.

clearTimeout :

window.clearTimeout(Object timer)

Suspend la minuterie timer déclarée par la méthode setTimeout().

/*** INITIALISE LES VARIABLES ***/

vit_lent=20;

vit_rapide=10;

inc_lent=1;

inc_rapide=2;

inc_super=4;

minuterie_AVANCE="";

minuterie_RETOUR="";

function Scroll_DEBUT(id){

// Désactive les minuteries avant et arrière

Scroll_STOP();

// Place le curseur au Début

document.getElementById(id).scrollLeft = 0;

}

// AVANCE (GAUCHE)

function Scroll_AVANCE(id){

clearTimeout(minuterie_AVANCE)

clearTimeout(minuterie_RETOUR)

vitesse = vit_lent;

increment = inc_lent;

// Scrolle le DIV a gauche d'un pas

document.getElementById(id).scrollLeft += increment

// RECURSIF = recul automatique toutes les "vitesses" millisecondes

minuterie_RETOUR = setTimeout("Scroll_AVANCE('"+id+"')",vitesse)

}

function Scroll_AVANCE_RAPIDE(id){

clearTimeout(minuterie_AVANCE)

clearTimeout(minuterie_RETOUR)

vitesse = vit_rapide;

increment = inc_rapide;

document.getElementById(id).scrollLeft += increment;

minuterie_RETOUR = setTimeout("Scroll_AVANCE_RAPIDE('"+id+"')",vitesse)

}

function Scroll_AVANCE_SuperRAPIDE(id){

clearTimeout(minuterie_AVANCE)

clearTimeout(minuterie_RETOUR)

vitesse = vit_rapide;

increment = inc_super;

document.getElementById(id).scrollLeft += increment;

minuterie_RETOUR = setTimeout("Scroll_AVANCE_SuperRAPIDE('"+id+"')",vitesse)

}

function Scroll_RETOUR(id){

clearTimeout(minuterie_RETOUR)

clearTimeout(minuterie_AVANCE)

vitesse = vit_lent;

increment = inc_lent;

// Scrolle le DIV a droite d'1 PAS

document.getElementById(id).scrollLeft-=increment

// Continue le scroll automatiquement

minuterie_AVANCE=setTimeout("Scroll_RETOUR('"+id+"')",vitesse)

}

function Scroll_RETOUR_RAPIDE(id){

clearTimeout(minuterie_RETOUR)

clearTimeout(minuterie_AVANCE)

vitesse = vit_rapide;

increment = inc_rapide;

document.getElementById(id).scrollLeft-=increment

minuterie_AVANCE=setTimeout("Scroll_RETOUR_RAPIDE('"+id+"')",vitesse)

}

function Scroll_RETOUR_SuperRAPIDE(id){

clearTimeout(minuterie_RETOUR)

clearTimeout(minuterie_AVANCE)

vitesse = vit_rapide;

increment = inc_super;

document.getElementById(id).scrollLeft-=increment

minuterie_AVANCE=setTimeout("Scroll_RETOUR_SuperRAPIDE('"+id+"')",vitesse)

}

function Scroll_FIN(id){

Scroll_STOP()

// Place le curseur à la du DIV

document.getElementById(id).scrollLeft = document.getElementById(id).scrollWidth

}

function Scroll_STOP(){

// Désactive les minuteries pour bloquer le déroulement avant ou arrière

clearTimeout(minuterie_RETOUR)

clearTimeout(minuterie_AVANCE)

}

</SCRIPT>

</head>

<center><h1>MONITORING</h1>

</noscript>

</div>

<p>

<button title="DEBUT" onclick="Scroll_DEBUT('container')"> |

<- </button>

<<<= </button>

<<= </button>

<= </button>

<button title="STOP" onclick="Scroll_STOP()"> Arrêt

</button>

</button>

</button>

</button>

<button title="FIN" onclick="Scroll_FIN('container')"> ->|

</button>

<button title="REJOUER DEPUIS LE DEBUT" onclick="Scroll_DEBUT('container');Scroll_AVANCE('container')"> @

</button>

</p>                        Pour télécharger le script enregitrez cette page et placez une image nommée "monito.gif" à côté

<br>

</body>

Monito (HTML)

NOTE PRATIQUE

NOTE TECHNIQUE

CODE SOURCE

SOURCE

Documents joints

Programmes

Dans la même rubrique