Blog Dreaminvasion - développement et administration réseaux - CSS

Polices : Conversion Pixels, Points, Ems, Pourcentages

Gerald Lonlas — Sun, 09 Sep 2007 16:00:00 +0200

Pour la création des sites web ou des feuilles de style de votre site, vous êtes souvent confronté au problèmes des tailles des polices, doit-on utiliser des pixels ? des points ?

Personnellement j’utilise les mesures en Pixels pour le rendu sur écran (ce qui me semble le plus approprié à nos jolis écrans d’ordinateur). Et les mesures en points pour les feuilles de style destinés à l’impression.

Afin de simplifier le travail de recherche de la bonne taille, voici un tableau de conversion de pixels, points, ems, et pourcentages.

Les valeurs sont approximatives, car elles dépendent du type de polices utilisé, du navigateur et du système d’exploitation.

Pixels	Points	Pourcentage	Ems
8px	6pt	50%	0.5em
9px	6.8pt	56.3%	0.56em
10px	7.5pt	62.5%	0.63em
11px	8.3pt	68.8%	0.69em
12px	9pt	75%	0.75em
13px	9.8pt	81.3%	0.81em
14px	10.5pt	87.5%	0.88em
15px	11.3pt	93.8%	0.94em
16px	12pt	100%	1em
17px	12.8pt	106.3%	1.06em
18px	13.5pt	112.5%	1.13em
19px	14.3pt	118.8%	1.19em
20px	15pt	125%	1.25em
21px	15.8pt	131.3%	1.31em
22px	16.5pt	137.5%	1.38em
23px	17.3pt	143.8%	1.44em
24px	18pt	150%	1.5em
25px	18.8pt	156.3%	1.56em
26px	19.5pt	162.5%	1.63em
27px	20.3pt	168.8%	1.69em
28px	21pt	175%	1.75em
29px	21.8pt	181.3%	1.81em
30px	22.5pt	187.5%	1.88em
31px	23.3pt	193.8%	1.94em
32px	24pt	200%	2em
33px	24.8pt	206.3%	2.06em
34px	25.5pt	212.5%	2.13em
35px	26.3pt	218.8%	2.19em
36px	27pt	225%	2.25em
37px	27.8pt	231.3%	2.31em
38px	28.5pt	237.5%	2.38em
39px	29.3pt	243.8%	2.44em
40px	30pt	250%	2.5em
41px	30.8pt	256.3%	2.56em
42px	31.5pt	262.5%	2.63em
43px	32.3pt	268.8%	2.69em
44px	33pt	275%	2.75em
45px	33.8pt	281.3%	2.81em
46px	34.5pt	287.5%	2.88em
47px	35.3pt	293.8%	2.94em
48px	36pt	300%	3em

Javascript : Script de rotation d’image

Gerald Lonlas — Tue, 04 Sep 2007 22:56:00 +0200

Des scripts de rotation d’image en javascript il en existe, il suffit de faire la recherche des mots clés « slideshow javascript » sur google pour le nombre de script prêt à l’emploi.

Et me voila en train d’ajouter ma contribution.

Je me permets de mettre à disposition un script que j’avais fais il y a quelques années pour le site E-tudiant.com, et que j’ai dépoussiéré très récemment pour DreamCommerce (le e-commerce que je développe actuellement).

Le javascript

Voici l’ensemble du javascript, le mieux est de l’intégrer dans un fichier .js et l’inclure dans votre page HTML.

// variables
var imgList = new Array();
var zInterval = null;
var indice=0;

// Change Opacité de l'image
function setOpacity(objet)
{
if(objet.xOpacity>.99)
{
objet.xOpacity = .99;
return;
}

objet.style.opacity = objet.xOpacity;
objet.style.MozOpacity = objet.xOpacity;
objet.style.filter = 'alpha(opacity=' + (objet.xOpacity*100) + ')';
}

// Fonction de changement des images (rotation)
function rotation()
{
cOpacity = imgList[indice].xOpacity;
nIndex = imgList[indice + 1]? indice + 1 : 0;
nOpacity = imgList[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgList[nIndex].style.display = 'block';
imgList[indice].xOpacity = cOpacity;
imgList[nIndex].xOpacity = nOpacity;

setOpacity(imgList[indice]);
setOpacity(imgList[nIndex]);

if(cOpacity<=0)
{
imgList[indice].style.display = 'none';
indice = nIndex;
setTimeout(rotation, 3000);
}
else
{
setTimeout(rotation, 50);
}
}

// Initialisation du rotation
function rotationInit(elementId)
{
if(document.getElementById || document.createElement)
{
imgList = document.getElementById( elementId ).getElementsByTagName('img');

for(i=1;i<imgList.length;i++)
{ imgList[i].xOpacity = 0; }

imgList[0].style.display = 'block';
imgList[0].xOpacity = .99;

setTimeout(rotation, 3000);
};
}

Le xHTML

Pour ce qui est du xHTML il suffit de mettre vos images les unes derrières les autres dans un conteneur auquel vous donnerez un id.

<div id="galerie" class="rotation">

<a href="http://www.dreaminvasion.com/realisations/23-mbolabs.html"><img src="http://www.dreaminvasion.com/images/mini-mbolabs.jpg" alt="Mbolabs" title="Mbolabs" /></a>

<a href="http://www.dreaminvasion.com/realisations/21-4l-trophy-toulouse.html"><img src="http://www.dreaminvasion.com/images/mini-4l-trophy-toulouse.jpg" alt="4L Trophy Toulouse" title="4L Trophy Toulouse" /></a>

<a href="http://www.dreaminvasion.com/realisations/11-dreaminvasion-v2-0.html"><img src="http://www.dreaminvasion.com/images/mini-dreaminvasion.com-v2.jpg" alt="Dreaminvasion v2.0" title="Dreaminvasion v2.0" /></a>

</div>

Enfin lancer la rotation via la fonction rotationInit('galerie');

<script type="text/javascript">
rotationInit('galerie');
</script>

La feuille de style

La mise en page se fera via votre feuille de style (CSS), vous appliquerez un classe CSS au conteneur des photos.

La classe CSS devra comporter les attributs : width, height qui fixera la taille du conteneur à la dimension d’une image.
Les autres images seront simplement cachées.

.rotation {
    border: 1px solid #000;
    cursor: pointer;
    overflow: hidden;
    margin: 50px auto 10px;
    position: relative;
    width: 155px;
    height: 140px;
}

.rotation img {
    border: 0;
    cursor: pointer;
    width: 155px;
    height: 140px;

}

Cliquez ici pour télécharger le fichier rotation.js (1,6 Ko).

Ultimate Web developer bookmark : 109 Links

Gerald Lonlas — Mon, 16 Jul 2007 09:00:00 +0200

Toujours à la recherche de la perle rare sur le Web, surtout en ce qui concerne les technologies du développement web, je vous mets à disposition ma liste de tous les sites que j'utilise :

DHTML AJAX Javascript

CSS

PHP / MySQL

PHP.net

Flash

Inspiration

Banque d'image

Icones

Police / Brush / Patterns

Tuto Graphisme

Good-Tutorials.com (Moteur de recherche de tutoriaux)

Framework

Web Tools

Logiciels

Si vous avez des sites à faire découvrir, je vous invite à faire de meme sur votre blog et me poster un commentaire avec le lien de votre article, je mettrais cette liste à jour.