Vous en rêviez ? Le voilà ! Le script qui arrondi les coins des images, en plus de son extrême facilité à installer ce script offre une multitude de configurations possibles. Une fois le script appelé dans l'en-tête de la page il ne vous reste plus qu'à appliquer des classes aux images.
Télécharger l'archive et placer le fichier "justcorners.js" dans votre dossier "js". Si vous décidez de le placer ailleurs, n'oubliez pas de modifier le chemin d'accès au fichier dans vos pages HTML.
Copiez-collez cette ligne de code dans la/les page(s) HTML ou vous souhaitez utilisez l'arrondi sur les images.
<script type="text/javascript" src="js/justcorners.js"></script>
Ci-dessous un apérçu des différentes possibilités permise par le script.
Les quatres coins sont arrondis à 32px
class ="corners iradius32"
Tous les bords sont arrondis à une valeur de 16px
class ="corners iradius16"
Dans cette exemple on ajoute au tour de l'image une bordure dont la taille est spécifiée dans la classe "iborder", puis la couleur de la bordure avec la classe "icolor"
class ="corners iborder2 icolor666666"
Dans ce dernier exemple on montre qu'il est possible de jouer avec les angles qui doivent être arrondis et ceux qui ne le sont pas. Pour ce faire, la classe "iradiae0110" sans oublier la classe "iradius" plus la valeur en px associées pour les angles affectés aux arrondis.
class ="corners iradiae0110 iradius32"
Les paramètres que vous pouvez définir sont les suivants :
"corners" : initialisation de la classe
"irradius" : ouverture de l'angle d'arrondi (en px)
"iborder" : largeur de la bordure (en px)
"icolor" : couleur de la bordure (en hexadécimal)
Comme vous avez surement pu le constater dans les exemples ci-dessus, les classes peuvent s'additionner sans aucun problème, c'est même un bon moyen de donner une touche de personnalisation à vos images.