カテゴリ:   CSS/Jquery
タグ:

画像見づらかったので、マウスオーバーした時に虫眼鏡を出すのを探してたところ


↓こういうの。
ea303369


imagelink.jsというので出来るらしいんだけど、本家がリンク切れになってるぜ…

んで、漁ってたら見つかったので紹介。

こちらで公開してますた。

https://code.google.com/p/backstageweb/source/browse/trunk/scripts/imagelink.js?r=3

とりあえずこれをテキストエディタにコピペして、

1)imagelink.js みたいな名前で保存、アップロード
 
2)<script src="js/imagelink.js"></script> みたく読み込む。パス名は各自変更してちょ

3)今度はcss内に
----------------------------
.imageOver{
background:url(重ねたい画像) no-repeat 50% 50%;
filter:alpha(opacity=75); ←こっからしたは全部透明度、変更可
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}
----------------------------

これでリンク付きの画像には全てマウスオーバーで虫眼鏡の画像が出るようになりますた

めでたしめでたし


参考にしたブログ
http://exyz.cocolog-nifty.com/good_sleep/2008/05/javascript_5809.html


追記

だったんだけどなんかうまいこといかないので現在外してます(´・ω・`)


さらに追記

やっとこさいけたわ 

jsそのままだとページ全てに虫眼鏡がついてえらいことになるので

http://exyz.cocolog-nifty.com/good_sleep/2008/05/javascript_5809.html

このブログみたく

 ---
        // 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 = "imageOver";
        
        // 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";
 ---
                       
一番上のvarをblankじゃなくして、適用したいimgタグ個々に設定しなきゃいけないっぽい。




で。個々に設定するのはくそだるいので、前にも書いたみたく


 ---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.article-body-inner a img').each(function(i){ //.article-body-inner の中の aタグ の中のimg探せ
            $(this).attr('class','imageOver'); //あるならclass="imageOver"をつけろ
    });
});
</script>

 ---


をheaderあたりに書いとけばOKかと。





 

Comment & Trackbacks

コメント
コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット

関連記事

新着一覧