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.
|