画像をツールチップで拡大表示

Ads

Result

jQuery

$(document).ready(function () {
         
    // サムネイル
    $('div.thumbnail-item').mouseenter(function(e) {
        // ツールチップの位置情報
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
        // z-indexを追加し、class="tooltip"のpositionの値を決める
        $(this).css('z-index','15').children("div.tooltip").css({'top':y + 10,'left': x + 20,'display':'block'});
        
    // マウスムーブイベント   
    }).mousemove(function(e) {
        // ツールチップの位置情報         
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
        // class="tooltip"のpositionの値を決める
        $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
        
    // マウスが離れたらイベント発火        
    }).mouseleave(function() {
        // 元に戻す
        $(this).css('z-index','1')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");//フェードアウト
    });
});

css

.thumbnail-item { 
    position: relative;  
}
.thumbnail-item a { 
    display: block; 
} 
.tooltip { 
    display: none; 
    position: absolute; 
}

html

<div class="thumbnail-item">
    <a href="javascript:void(0);"><img src="small.png" width="100" height="100" class="thumbnail" /></a>
    <div class="tooltip">
        <img src="big.png" alt="" width="330" height="330" />
    </div> 
</div> 

via

Useful and Practical jQuery Image ToolTips Tutorial | Queness


Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7