• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 155
  • Last Modified:

how2 onMouseOver and show-or-load image in the current windows

how2 onMouseOver some small icon and then show-or-load image in the current windows, not popup or open new windows.

I would like to have many icons for each big image files
on 1 page.

i am newbie , plz tell me complete example :>

thank for advance.
  • 3
  • 2
1 Solution
Am I understanding this correctly?: you want a user to mouse over a thumbnail or icon, and have a larger version of that image appears in the current HTML page?

This can be done using DHTML layers, but that only works with 4.0 browers or higher. If you want to be compatible with other browsers, popup windows are the only option.

In my opinion, popup windows are a better option; you can hard-code these to be the exact size of the graphic and with no toolbars or scrollbars by using a JavaScript function. Code for this is available at (http://www.builder.com/Programming/Scripter/092497/toolwb.html).
tong111797Author Commented:
<a href="http://neverdieboard.hypermart.net/wwwboard/00678-2.jpg"
onMouseOver=window.popup('http://neverdieboard.hypermart.net/wwwboard/00678-2.jpg')><img src="thumb.gif" border=0></a>

instead of "window.popup()". Can i use
document.something.something() ?

I don't know what function that working with image link.

To display an image in a popup window use the example code below.  The example below allows you to have one script that will create the popup window and allow you to change the size of the window.  The only thing you will need to realize is that if the window (named myPopup) exists then the window will not be re-created with a new size.  Therefore, I added an if statement that checks to see if the popup window exists and if so to close it.

var myPopup=null;
function openPopup(URLName,w,h) {
  if (myPopup != null) {
  myPopup=window.open(URLName, 'myWindow', 'width='+w+',height='+h)
// -->

Then you use the following example for your anchor (<A>) tag if you want  the user to click on the image.

<A HREF="javascript:openPopup('yourimagename',theWidth,theHeight)"><IMG SRC="thumb.gif" BORDER=0 ALT=""></A>

If you want to the image to show up when the user passes the mouse over the thumbnail you would use the following example.

<A HREF="javascript:void(0)" onMouseOver="openPopup('yourimagename',theWidth,theHeight)" onMouseOut="myPopup.close()"><IMG SRC="thumb.gif" BORDER=0 ALT=""></A>

If you use this method, remove the if statement in the script above i.e.

  if myPopup <> null {
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Oops.  The following anchor tag should replace the one I supplied in my answer for the onMouseOver event.

<A HREF="javascript:void(0)" onMouseOver="openPopup('yourimagename',theWidth,theHeight)"><IMG SRC="thumb.gif" BORDER=0 ALT=""></A>

tong111797Author Commented:
can i use window.close(); function ?
No.  window.close() closes the active window.

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now