Transformer une image jpg en image html
Les fichiers images, c'est une invention géniale : on peut les comprimer pour qu'ils tiennent peu de place, on peut les afficher dans une page web à la taille souhaitée, on peut les recopier, les envoyer par messagerie, les stocker...
C'est infiniment plus pratique qu'une image définie point par point dans le fichier qui l'héberge.
Et pourtant, maintenant que la puissance des ordinateurs et le haut débit autorisent tous les excès, dans quelques cas particuliers...
- par exemple pour protéger votre image contre le piratage
- ou pour que votre image ne soit pas bloquée comme pièce jointe suspecte par les messageries
- pour rendre votre page web indépendante de toute pièce liée,
- pour créer une image interactive
- ou simplement pour ne pas faire comme tout le monde
il peut être intéressant de revenir à une image très basique : affichage de l'image pixel par pixel dans la page html.
En voilà une (en 7 000 points, regardez le code source de la page) :
Le convertisseur en ligne qui est mis à votre disposition vous permet de transformer vos images jpg en images html utilisables dans vos pages web (cliquez)
Le principe est simple, on affiche un pixel de la bonne couleur au bon endroit pour constituer l'image !
Un pixel, c'est juste un carré de couleur, par exemple un SPAN :
<SPAN STYLE='background-color:red;width:3px;height:3px;'></SPAN>
ou mieux (meilleure compatibilité avec certains navigateurs) :
<SPAN STYLE='background-color:red;width:3px;height:3px;font-size:0px;'> </SPAN>
Reste à positionner le pixel :
- on peut le positionner de manière absolue par rapport aux bordures de l'image :
<SPAN STYLE='position:relative;border:blue solid 2px;width:60px;height:40px;font-size:0px;'>
<SPAN STYLE='position:absolute;top:10px;left:20px;background-color:red;width:3px;height:3px;font-size:0px;'> </SPAN>
</SPAN>
- Mais, pour un affichage plus rapide, on peut se contenter d'aligner les <span> les uns au bout des autres ligne par ligne (en séparant les lignes par un simple <BR>) :
... et le tour est joué !
A un petit détail près : comment récupérer les couleurs des quelques milliers de pixels de l'image initiale sans y passer des journées ?
Certainement pas manuellement ! Un petit programme en PHP va nous aider (cliquez ici).
>>>> SUITE >>>>>>>>>