The mouseover popup

1) The code:

<a HREF="javascript:void(0)" onMouseover="blah=window.open('popup.html','_blank',

'left=300,top=150,width=300,height=300');"

onMouseout="blah.close(); return true"></a>

2) Referencing the popup image:

popup.html is the popup page/image itself. Create it in the html editor of your choice.

3) The mouseover:

onMouseover is the event handler that starts the mousever effect; and this is, in this case equal to window open. It could just as easily have been equal to starting some other effect like another javascript file.

4) Closing the popup window:

onMouseout is the event handler that closes blah (the name of the open window) when you move your mouse off of the object that initiate the popup in the first place. Without this the window will stay open until you click on the X at the top right of that window to close it.

5) Sizing blah (the popup window):

left=300,top=150,width=300,height=300 are obviously the parameters that tell your browser where to place the popup and how big it is to be. Left is the distance to the left side of your screen and top is the distance to the top of the screen. You will have to play with these to fit in all of your image/text into the popup box. You can, of course, also add a background color to the image in the popup box. But I will not go into that here.

6) Where does the text go that you are mouseing over in the javascript above?:

It goes between the >< symbols at the end of the code.

 Back to Mike Beaver's Webmaster Page

Back to Mike Beaver's Hypnotherapy Home Page