logoMemo クラウド環境でのメモ帳

同じ画像を拡大表示

demo
 
<script>
$(function(){ $('.enlarge img').hover(
  function(){ $(this).stop().animate({ 'width':'800px', 'height':'450px', 'marginTop':'0px'},'fast'); },
  function () { $(this).stop().animate({ 'width':'100px', 'height':'75px', 'marginTop':'0px'},'fast');});
});
</script>
<div class="enlarge">
 <img src="/assets/img/001.jpg" width="100" height="75" />
</div>
 

別の画像で置き換えるとき

 000_off.jpgを a.enlarge2のimgに書く。このスクリプトは _off を _on に置き換えるので、マウスを重ねると 000_on.jpg が表示される。表示サイズはスクリプトの中に書く。
<script>
$(function(){
  $('.enlarge2 img').hover(
  function(){
     $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
     $(this).attr('width','960'); $(this).attr('height','555');
    }, 
  function(){
      if (!$(this).hasClass('currentPage')) {
       $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
       $(this).attr('width', '32'); $(this).attr('height','32');
      }
   });
 });
</script>
<a class="enlarge2" href="http://goo.gl/maps/i47Yl"><img src="/assets/img/000_off.jpg" width="32" height="32" /></a>
 

show/hideを使った表示

JQueryスクリプトを書くだけで簡単に表示できる。画像を使わずテキストだけでもよい。

〔例〕ここにマウスを重ねると次のDIVがトグル表示される。


ここが表示される。style="display:none;"を書いておく。
<script>
$(function () {
 $('.show').hover(function() {
    $(this).next('div').show();
  }, function(){
    $(this).next('div').hide();
  });
});
</script>
<p class="show"><span style="border-bottom:1px dotted;">ここにマウスを重ねる</span>とつぎのDIVがトグル表示される。</p>
<div style="display:none;"><img src="001_on.jpg"><br>ここが表示される。style="display:none;"を書いておく。</div>

Feedburner BACK | HOME | ARCHIVE 天気予報