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

2007

12/27

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

使用方法
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」サンプル

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加するこのページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

前の記事:今更のMyMiniCity
次の記事:Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」


コメント投稿












画像も角丸にするjavascript「roundedcorners」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

トラックバック一覧


Random Entry Images

[prototype]Protoload
faviconを表示するjavascript「Hyperlink Cues with Favicons」
テーブルの表を伸縮させるjavascript「ElasticTable」
日本語OKの日付選択javascript「PBBDatePicker」

Powered by Movable Type 4.1
RSSリーダーで購読

Copyright © skuare.net All rights reserved.