By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,436 Members | 2,979 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,436 IT Pros & Developers. It's quick & easy.

popup image onMouseOver

P: 7
HI can somebody explain (with sample of code) how to enlarge an image using popup when mouse is over a small image + close the popup when mouse is out

Thanks for help
Jan 15 '08 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
By popup, I assume you mean a div containing the image.

Just use a div tag and keep it hidden:
Expand|Select|Wrap|Line Numbers
  1. <div id="largeImgContainer" style="visibility:hidden">
  2.  <img id="largeImg">
  3. </div>
Then when you mouseover an image, display it:
Expand|Select|Wrap|Line Numbers
  1. <img src="pic.gif" onmouseover="showImage(this.src)" onmouseout="hideImg();">
Expand|Select|Wrap|Line Numbers
  1. function showImage(src) {
  2.     document.getElementById("largeImg").src = src;
  3.     document.getElementById("largeImgContainer").visibility = "visible";
  4. }
Jan 15 '08 #2

P: 7
Thanks Acoder
the onlyn poblem with it the large image opens on the lace of the small one and becoase of that it is not displayed. How to set a position of the large image?

Thanks again
Jan 16 '08 #3

Expert Mod 15k+
P: 16,027
To set the position, use the left and top properties and you may want to position it absolutely rather than relatively, so set the position to "absolute":
[html]<div style="position:absolute; left:100px; top:100px;...">[/html]
Jan 16 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.