Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>try something like this. the trick is <code>position</code> you can put the div wherever you want. read something <a href="http://www.w3schools.com/css/css_positioning.asp" rel="nofollow noreferrer">here</a>. and you can read about hover <a href="http://api.jquery.com/hover/" rel="nofollow noreferrer">here</a></p> <p>here is an html example. (copy this to a text file and open it withyour browser)</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;Test&lt;/title&gt; &lt;script text="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li class=""&gt;Lynx&lt;/li&gt; &lt;li&gt;Jaguar&lt;/li&gt; &lt;/ul&gt; &lt;div id="picture" style="position:absolute; top:0px; right:0px;"&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; var animal = { "Lynx": "http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg", "Jaguar" : "http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg" } var hovered = function(e) { //you can get what to show from the elemnt, instead of the content // you could use an id. var name = $(e.target).html() $('#picture').append("&lt;img src='" + animal[name] +"'/&gt;") } var unhovered = function() { $('#picture').empty(); } //here you bind mouseenter and mouseleave $('li').hover(hovered, unhovered); &lt;/script&gt; &lt;/body&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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