954,561 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

image as tooltip

i want to view image as tooltip of small image on mouseover on that so what is the code for that?using javascript how it can be done?

manish_gajjar
Newbie Poster
6 posts since Dec 2007
Reputation Points: 10
Solved Threads: 0
 

maybe it would be wiser to ask in the javascript forum

Fungus1487
Posting Pro in Training
459 posts since Apr 2007
Reputation Points: 66
Solved Threads: 56
 
i want to view image as tooltip of small image on mouseover on that so what is the code for that?using javascript how it can be done?

This does seem a bit out of place for the php forum... and I'm not sure what the code is to do it in Javascript.

However, you can do this with plain CSS.

Here's the basic premise:

You wrap the text you want to "mouse-over" in an anchor tag, without any href element. It helps to use a separate class of anchor tags, like "info".

You create a span element within that anchor tag. By default, the css for that span (a.info span) would be display:none.

When you mouse-over the anchor, you change the span's display to block (a.info:hover span {display:block}). You'd also want to give the span element a "position: relative" declaration, so that it appears on top of the text instead of running into the surrounding text.

Don't have a full tutorial handy, but that's the basic concept. It's pretty nifty when it's all done. Pure CSS, no Javascript required. It works fine with text, so I'd think that you could put an img tag inside the span tag and have it work just fine as well.

- Walkere

Walkere
Junior Poster in Training
57 posts since Jan 2008
Reputation Points: 29
Solved Threads: 5
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You