Home > スポンサー広告 > マウスオーバーが簡単にできるJavaScript(imagelink.js編)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

Comments: -

Comment Form
Only inform the site author.

Trackback+Pingback: -

TrackBack URL for this entry
http://kyotomemo.blog99.fc2.com/tb.php/20-dcb11a44
Listed below are links to weblogs that reference
スポンサーサイト from Memoのメモ

Home > スポンサー広告 > マウスオーバーが簡単にできるJavaScript(imagelink.js編)

Home > web小技 > マウスオーバーが簡単にできるJavaScript(imagelink.js編)

マウスオーバーが簡単にできるJavaScript(imagelink.js編)

  • Posted by: tomoko
  • 2009-08-13 Thu 20:33:15
  • web小技
同じようなロールオーバー処理が続いて、
わざわざマウスオーバー用画像を作るのが面倒くさい場合の方法です。

*完全に自己流です。間違ってる点等あればご指摘ください。
 いまのところ、IE7、Firefox3.2で動作確認できてます。





●JSを使ったマウスオーバー(imagelink.js)


通常の画像に、上からもう1枚画像を重ねるようなイメージです。



1.JSを用意

以下よりダウンロード。
imagelink.js


2.改修

オリジナルのファイルでは、リンクが張られた画像のすべてに反映されてしまうので、
こちらを参考に16行目、23行目を改修しました。


オリジナル
/*

Image Link, single style version
written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/post/1238/style-your-image-links for more info

*/

this.imagelink = function(){

// CONFIG


// css class of images that you want to apply this script to
// if you want to apply this script to all images inside anchor tags, leave this string blank
var imageClass = "";/*←ココ*/

// css class that defines how span that covers the image is styled by default
// if you don't want any styling, leave this string blank/**/
var defaultClass = "";

// css class that defines how span that covers the image is styled when rolled over
var overClass = "imageOver";/*←ココ*/

// END CONFIG


改修版
/*

Image Link, single style version
written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/post/1238/style-your-image-links for more info

*/

this.imagelink = function(){

// CONFIG


// css class of images that you want to apply this script to
// if you want to apply this script to all images inside anchor tags, leave this string blank
var imageClass = "imglink";/*←ココ*/

// css class that defines how span that covers the image is styled by default
// if you don't want any styling, leave this string blank
var defaultClass = "";

// css class that defines how span that covers the image is styled when rolled over
var overClass = "imagelink";/*←ココ*/

// END CONFIG


var imageClass = "imglink";
var overClass = "imagelink";
としてます。

この後、htmlの方で反映させたいimgだけにclass="imglink"と記述していきます。


3.上に重ねる画像を用意する


通常の画像に重ねたい画像を用意します。
通常の画像とサイズが異なってもOKです。

例:サンプル1
  を重ねています。


例2:サンプル2
  を重ねています。


4.CSSに追記する

以下の記述をCSSに追記します。

.imagelink{
background:url(over.gif) no-repeat right 50%;
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}

おおまかな内容はこんな感じのはずです。

・background:url(over.gif) :マウスオーバー時に重ねたい画像
・right 50%; :通常画像から見た、マウスオーバー用画像の位置(この場合、右端の上下中央)
・3行目~6行目:透明度の設定(この場合、75%)


5.htmlにclassを追記する。

反映させたいimgだけにclass="imglink"を記述していきます。

<a href="index.html" target="_blank">
<img class="imglink" src="***.jpg" alt="***" width="***" height="***" />
</a>




以上です。

本当は<span>タグを設定しないといけないはずなんですが、
とりあえず、これで動いてます。

・・・詳しい方おられたら、ご教授願いますm(__)m



関連サイト

スポンサーリンク

Comments: 0

Comment Form
Only inform the site author.

Trackback+Pingback: 0

TrackBack URL for this entry
http://kyotomemo.blog99.fc2.com/tb.php/20-dcb11a44
Listed below are links to weblogs that reference
マウスオーバーが簡単にできるJavaScript(imagelink.js編) from Memoのメモ

Home > web小技 > マウスオーバーが簡単にできるJavaScript(imagelink.js編)

最近読んだ本

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。