473,320 Members | 1,722 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

popup image onMouseOver

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
3 3708
acoder
16,027 Expert Mod 8TB
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
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
acoder
16,027 Expert Mod 8TB
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

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

Similar topics

2
by: Kevin Lyons | last post by:
Hello, Can anyone assist me with what I am trying to do with the following code (six different scenarios to try to make the functionality work correctly)? I want to always (and ONLY) display...
9
by: Karl Burrows | last post by:
I am working on a Website for a non-profit group and for some reason I have one link that doesn't want to cooperate. All the image links work fine with the onmouseover and onmouseout script except...
3
by: niv | last post by:
Hi, I have an asp.net button control on a webform. I would like to show a drop down window when the user moves their mouse over the button. The information in this dropdown or popup is going to...
6
by: abdullah1983 | last post by:
Hi Guys, I need some clarification regarding the problem with safari browser. Please find my code below. I'm setting the image src, mouseover and mouseout using javascript. The mouseover and...
4
by: Jon | last post by:
Hi, I am calling the function showpopupWindow(item) to open and write a popup window. When testing in IE6 locally the popup window displays my text in both the title and status bars but when...
4
by: jobs | last post by:
the javascript: function ShowTooltip(L1in) { document.getElementById("L1").innerText=L1in; y = event.clientY + document.documentElement.scrollTop; var Popup= document.getElementById("Popup")...
3
Loftlore
by: Loftlore | last post by:
Confession. This is my first post here. Wish me luck please. I am trying to get a .jpg called from a javascript hiLite to popup rather than to load as a full page. The example can be found at...
5
by: jpk872 | last post by:
I've got an image, when I mouse over it a popup window shows and the person's hobbies are displayed using a CSS popup window. It works in IE, but not Firefox. Any idea why? (lines 23-31) <img...
11
by: Evolution445 | last post by:
I got this code, and it somehow doesnt work. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center"> <TR> <TD background="{image-path}navfiller.gif" HEIGHT=40...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.