Style Your Image Links

• Aug 7, 2010
• Tags: javascript, tips

画像にマウスオーバーした時、虫眼鏡アイコンを表示するJavaScript、「Style Your Image Links」。

Style Your Image Links

使用方法

Style Your Image Linksのサイトから「Image Link」をダウンロードし、スクリプトを読み込みます。

<script type="text/javascript" src="js/imagelink.js"></script>

リンクが張られた画像全てに反映されるので、「imagelink.js」の16行目と23行目を修正します。

修正前

var imageClass = "";

var overClass = "imageOver";

修正後

var imageClass = "imglink";

var overClass = "imagelink";

imgにclass=”imglink”を指定します。

<img src="xxx.gif" width="xxx" height="xxx" alt="xxx" class="imglink" />

CSSに以下を指定します。

.imagelink {
 background: url(img/zoom.gif) center center no-repeat;
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}