开发者

Image popup on mouseover of li without hyperlink?

开发者 https://www.devze.com 2023-03-11 01:26 出处:网络
I have a list and would like to have additional info (a graphic) pop up when someone mouses over the individual list items.I thought I\'d found the answer online, but this method works only on hyperli

I have a list and would like to have additional info (a graphic) pop up when someone mouses over the individual list items. I thought I'd found the answer online, but this method works only on hyperlinks within <li> tags...and the problem is that I don't want to click through to the link...just have an image popup. No link.

Anyone know how to do this? I can modify the script I found to work with <li>s but then it can't show different images...I can insert a fixed image, but not have it choose different ones for each <li>.

Thanks for any suggestions or help!

Edit: Here's the current Javascript I'm trying to modify -- does exactly what I want...only for links, not LI eleme开发者_开发问答nts:

(written by Alen Grakalic (http://cssglobe.com))

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

$(document).ready(function(){
imagePreview();
});


You can add a href (or some other named) attribute to your LI tags, then access the image's url like this (example using href attribute):

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

精彩评论

暂无评论...
验证码 换一张
取 消