如何讓jQuery在mouseover上做一件事，並點擊另一件事？

Question

我正在構建一個照片庫，它有兩種查看圖像的方式，第一種方法是將鼠標懸停在圖片上，以便顯示工具提示預覽圖像，第二種方法是點擊圖像將預覽圖帶到新頁面，有關圖像的更多信息，就像你會對iStock圖片：http://www.istockphoto.com/stock-photo-2159036-hot-air-balloons.php

你可以在這裏查看我的開發頁面：http://ee.rouviere.com/%5Ehtml/photography/index.html

目前我使用的fancybox這很好地工作，彈出預覽圖像，當你點擊在縮略圖上。但是，我想改變它，以便在將鼠標懸停在縮略圖上時顯示。就像它在本頁面上所做的一樣：http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/實際上，如果單擊圖像，它會將您帶到圖像詳細信息頁面，而不是僅在新窗口中加載圖像，這將是完美的。

目前的fancybox jQuery代碼是這樣的：

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $("a.view-preview").fancybox({ 
     'titleShow'  : false, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic' 
    }); 
}); 
</script> 

我想感謝所有幫助我能得到這個。謝謝！

Answer 1

這聽起來像你想要的是一個工具提示，而不是一個燈箱（fancybox）。嘗試使用工具提示插件，如jQueryTools Tooltip。

---

更新：我更新了插件代碼以使用以下HTML佈局。將<a>標記中的#替換爲用戶在單擊圖像時要轉到的頁面。另外，這裏是demo。

<ul> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" data-caption="Lake and a mountain" alt="gallery thumbnail" /> 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" data-caption="Fly fishing" alt="gallery thumbnail" /> 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" data-caption="Autumn" alt="gallery thumbnail" /> 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" data-caption="Skiing on a mountain" alt="gallery thumbnail" /> 
    </a> 
    </li> 
</ul> 

這是更新後的腳本：

/* 
* Image preview script 
* powered by jQuery (http://www.jquery.com) 
* 
* written by Alen Grakalic (http://cssglobe.com) 
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery 
* 
*/ 

this.imagePreview = function(){ 
    /* CONFIG */ 

    xOffset = 10; 
    yOffset = 30; 

    // these 2 variable determine popup's distance from the cursor 
    // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $("img.preview").hover(function(e){ 
    var t = $(this).attr('data-caption'); 
    var c = (t != "") ? "<br/>" + t : ""; 
    $("body").append("<p id='preview'><img src='"+ $(this).attr('data-fullimg') +"' alt='Image preview' />"+ c +"</p>"); 
    $("#preview") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast"); 
    }, function(){ 
    $("#preview").remove(); 
    }); 
    $("img.preview").mousemove(function(e){ 
    $("#preview") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px"); 
    }); 
}; 

// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
});