CODEWITHSUNDEEP
javascriptjquery
brno792
brno792

Reputation: 6799

javascript image popup on text mouse over

I want images to popup when I mouse over some HTML text, using JavaScript and jQuery. There are multiple lines and each line should popup a different image. I don't mean an actual popup window, just the image popping out or blowing up in the screen.

So if my html code looks something like:

<p id="item1">item1 text</p>
<p id="item2">item2 text</p>
<p id="item3">item3 text</p>

When I mouse over the text “item1 text” on the HTML page, I want an image called “image1” to popup on the text. I also want to the popup to include some text above the picture. When I move the mouse pointer off of that item1 text, the popup should go away. Likewise, when I mouse over “item2 text”, image2 should pop up.

How do I do this using JavaScript, then how would I use jQuery to do it better?

I am a complete JavaScript and jQuery novice, sorry in advance for my lack of knowledge.

Upvotes: 1

Views: 5990

Answers (2)

jec
jec

Reputation: 156

Hi I found this excellent tutorial: jQuery for Absolute Beginners, he used the <a> tag for the html code, here's how he did it: http://jsfiddle.net/k2E7W/2/

Upvotes: 4

David M&#252;ller
David M&#252;ller

Reputation: 5351

Take a look at the excellent jQuery plugin Powertip which will save you lots of hazzle. Typically, such mouseover / mouseout - things are kind of tricky regarding cross browser compatibility and positioning.

Code would then look something like

$('#element')
    .data('powertipjq', $('<p>Some text</p><img src="yourImage.png" />'));
    .powerTip({
        placement: 'e',
        mouseOnToPopup: true
    });

Upvotes: 0

Related Questions