画像も角丸にするjavascript「roundedcorners」 : skuare.net

画像も角丸にするjavascript「roundedcorners」

2007

12/27

今回はjavascriptライブラリ「mootools」で角丸を実現します。
roundedcornersでは、画像も角丸にできるjavascriptを公開しています。
＊画像も使用しているので少し煩雑かもしれません。

使用方法
roundedcornersからroundedcorners.jsとroundedcorners.cssをmootoolsからmootools.jsをダウンロードします。
またcssで使用している画像（各角に1つ）を作成するなどしてください。
＊画像サンプル：topLeft.gif
<script type="text/javascript" src="http://yourdomain/mootools.js"></script> <script type="text/javascript" src="http://yourdomain/roundedcorners.js"></script> <link rel="stylesheet" href="http://yourdomain/roundedcorners.css" type="text/css"> <script type="text/javascript"> window.addEvent('domready', function(){ round = new RoundedCorners('.roundedImage', {radius: 角丸の半径}); }); </script>
上記を記述したら、対応するclass名を付与した要素を書き込んでください。
<img src="画像パス" alt="" width="" height="" class="roundedImage">
画像も角丸にするjavascript「roundedcorners」サンプル