Databases
StackOverflow2013
Postsdbo
POImage popup on mouseover of li without hyperlink?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImage popup on mouseover of li without hyperlink?
    text
    copied!<p>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 <code>&lt;li&gt;</code> tags...and the problem is that I don't want to click through to the link...just have an image popup. No link.</p> <p>Anyone know how to do this? I can modify the script I found to work with <code>&lt;li&gt;</code>s but then it can't show different images...I can insert a fixed image, but not have it choose different ones for each <code>&lt;li&gt;</code>.</p> <p>Thanks for any suggestions or help!</p> <p>Edit: Here's the current Javascript I'm trying to modify -- does exactly what I want...only for links, not LI elements:</p> <pre><code>(written by Alen Grakalic (http://cssglobe.com)) $("a.preview").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "&lt;br/&gt;" + this.t : ""; $("body").append("&lt;p id='preview'&gt;&lt;img src='"+ this.href +"' alt='Image preview' /&gt;"+ c +"&lt;/p&gt;"); $("#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(); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload