Mémento WEB

Un fichier swf conforme au W3C :

<object type="application/x-shockwave-flash" data="fichierflash.swf" width="604" height="20">
<param name="movie" value="fichierflash.swf" />
<param name="wmode" value="transparent" />
<p>Image ou texte alternatif</p>
</object>

Redirection html

Ajouter dans le "Head" :

<meta http-equiv="refresh" content="3; URL=http://www.manouvelleadresse.com">

Dans cet exemple : "3" est le temps d'attente avant la redirection.

Centrage horizontal et vertical d'une div

Dans cet exemple nous voulons une interface de site web de 850px X 450px centrée sur n'importe quel écran.


<style type="text/css">
#global {
position:absolute;
background-color:#999999;
left: 50%;
top: 50%;
width: 850px;
height: 450px;
margin-top: -225px; /* moitié de la hauteur */
margin-left: -425px; /* moitié de la largeur */
border: 1px solid #000;
}
</style>

Exemple

CSS : IE VS FIREFOX

Vous connaissaient certainement les soucis liés à l'interprétation des CSS selon les navigateurs, (Qui as dit IE ?) Donc, une astuce pour palier à ce problème:

Insérer deans le "head"

<!--[if IE]>

<link href="mon_fichier.css" rel="stylesheet" type="text/css" />

<![endif]-->

Retour pages précédentes

Retour à la page précédente

<a href="javascript:history.back()">page pr&eacute;c&eacute;dente</a>

Retour de x pages en arrière, ici 3 pages

<a href="javascript:history.go(-3)">3 pages en arri&egrave;re</a>

Changement du style CSS à la volée

1 - On créé plusieurs styles CSS externes

2 - On défini le style CSS par défaut (standard) dans le <HEAD>

<link rel="stylesheet" href="nomdufichier.css" type="text/css">

3 - On défini le style suivant

<link rel="alternate stylesheet" href="nomdufichier_01.css" type="text/css" title="css_01">

4 - On apelle le fichier JS dans le <HEAD>

<script type="text/javascript" src="styleswitcher.js"></script>

5 - Dans le <BODY> on créé le lien

<a href="#" onclick="setActiveStyleSheet('css_01'); return false;">Nom du lien </a>

"css_01" correspond à l'attribut de la balise "title" dans la code d'appel du css alternatif.

Skin par défaut    Skin alternative

Date de mise à jour auto

Avec ce script, la date se met à jour en fonction de la dernière modification du fichier

<?php
$page_courante = substr(strrchr($_SERVER['SCRIPT_NAME'], "/"), 1 ) ;
$stat = stat($page_courante);
echo 'Date et heure de modification : ' . date("d/m/Y",$stat['mtime']);
?>

Un retour "Haut de page" animé en Jquery

Ajouter les liens JavasScript suivants entre les balises <head> et </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/ScrollTop.js"></script>

En gras : Chemin du fichier ersonnalisable

Créer le fichier "js"suivant et enregistrer le dans le répertoire "js":

// JavaScript Document
$(document).ready(function() {
$('a[href=#header]').click(function(){
$('html').animate({scrollTop:0}, 'slow');
return false;
});
});

En gras : #header correspond dans cet exemple à la "div" à atteindre.

Un menu qui reste "éclairé"

Afin de savoir dans quelle page / section ou rubrique se situe la page en cours il est préférable que le lien dans le menu reste "éclairé".

Pour cela 2 techniques :

Le code surligné correspond à la page ou se situe l'internaute (il n'y a aucun lien)

Les liens ont une class "normal". ( Ex : font-weight : normal; )
Le nom de la page as une class "hover". ( Ex : font-weight : bold; )

<div id="menu">
<a href="index.php" class="normal">Accueil</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="actu.php" class="normal">Actualit&eacute;s</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<span class="hover"> A propos d'ARCHI-MED</span>&nbsp; |&nbsp;&nbsp;
<a href="rejoindre.php" class="normal"> Nous rejoindre</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="acces.php" class="normal">Nous trouver</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="contact.php" class="normal"> Contact</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="plan_site.php" class="normal">Plan du site</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="BO/index.php" class="normal">&nbsp;Intranet</a></div>

<?php
$nom_page = substr(strrchr( $_SERVER['SCRIPT_FILENAME'], '/'),1);

?>
<a href="index.php"
<?php if ( ($nom_page =='index.php') ) {echo 'style="color:#1e7ac1";';}?> >Accueil</a>
<!--On notifie la page correspondant à "Accueil"-->

|<a href="present.php"
<?php if ( ($nom_page =='present.php')
|| ($nom_page =='objectif.php') ) {echo 'style="color:#1e7ac1";';}?> > Pr&eacute;sentation</a>

|<a href="quand_consulter.php"
<?php if ( ($nom_page =='quand_consulter.php')
|| ($nom_page =='qui_consulter.php')
|| ($nom_page =='prise_charge.php')
|| ($nom_page =='surveillance.php')
|| ($nom_page =='cas_difficile.php')
|| ($nom_page =='prevention.php') ) {echo 'style="color:#1e7ac1";';}?> > Parcours de soins</a>
<!-- Ici plusieurs page correspondent au menu "Parcours de soins" -->

|<a href="questce_la_peau.php"
<?php if ( ($nom_page =='questce_la_peau.php')
|| ($nom_page =='questce_la_peau_02.php')
|| ($nom_page =='lesion_precancereuse.php')
|| ($nom_page =='basocellulaire.php')
|| ($nom_page =='spinocellulaire.php')
|| ($nom_page =='melanome.php')
|| ($nom_page =='melanome_02.php')
|| ($nom_page =='autres_tumeurs.php') ) {echo 'style="color:#1e7ac1";';}?> >Cancers de la peau</a>

|<a href="en_pratique.php"
<?php if ( ($nom_page =='en_pratique.php')
|| ($nom_page =='hospitalisation.php')
|| ($nom_page =='anesthesie.php')
|| ($nom_page =='technique.php')
|| ($nom_page =='soins_post.php') ) {echo 'style="color:#1e7ac1";';}?> >Votre intervention</a>

|<a href="lexique.php"
<?php if ( ($nom_page =='lexique.php')
|| ($nom_page =='faq.php') ) {echo 'style="color:#1e7ac1";';}?> >Lexique</a>

|<a href="contact.php"
<?php if ( ($nom_page =='contact.php')
|| ($nom_page =='acces.php')
|| ($nom_page =='anesthesie.php')
|| ($nom_page =='partenaires.php')
|| ($nom_page =='infos_legales.php') ) {echo 'style="color:#1e7ac1";';}?> >Contact / Moyens d'acc&egrave;s</a>

Insérer un fichier FLV / F4V en 3 lignes de code - JW Player V4

 

Tout d'abord, télécharger le player swf (player.swf) qui sera chargé de lire votre vidéo FLV ou F4V.

Insérer le code suivant selon vos paramètres :

<object type="application/x-shockwave-flash" width="320" height="240" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="file=sablier.flv" />
</object>

Exemples

Insérer un fichier FLV / F4V en quelques lignes de code - JW Player V5

La version permet le plein écrans

Tout d'abord, télécharger les fichiers (mediaplayer-viral.zip).

Insérer le code suivant selon vos paramètres :

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="315">
<param name="movie" value="player-viral.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=video.flv&image=preview.jpg" />
<embed
type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player-viral.swf"
width="400"
height="315"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=video.flv&image=preview.jpg"
/>
</object

Exemples

Div full screen

#div_fullscreen{

position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:#0F0; background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
z-index: 1100;
/* display: none;*/

}

Exemple

Habiller un formulaire en CSS
Informations personnelles

/ /

Voir le CSS

HTML Color Picker

Source : http://jscolor.com/

Autres

 


bottom