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.
tong111797Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mblaseCommented:
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).
0
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.

0
tecbuilderCommented:
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.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myPopup=null;
function openPopup(URLName,w,h) {
  if (myPopup != null) {
    myPopup.close()
  }
  myPopup=window.open(URLName, 'myWindow', 'width='+w+',height='+h)
}
// -->
</SCRIPT>
</HEAD>

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 {
    myPopup.close();
  }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

tecbuilderCommented:
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>

0
tong111797Author Commented:
can i use window.close(); function ?
0
tecbuilderCommented:
No.  window.close() closes the active window.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.