如何让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(); 
});