 |
Categories / flash / popup image with flash and javascript |
| By |
| Last updated: November 24, 2005 |
| |
How to popup an image using Flash and Javascript |
| |
Let's say you have a photo gallery, made in flash.
So you list images as thumbnails, but when a user clicks on one of your picture a popup window opens, with a larger size of selected picture.
First off, you should transform every image into a button, that will have an action on mouse click.
Then to every image, you need to assign the following code (by pressing F9)
|
- on( release )
- {
- getURL( "javascript:popupMyImage('myimage.jpg','', 'menubar=0, tollbar=0, scrollbars=1, resizable=0, width=300, height=300 ' )" );
- }
|
|
Here 'image.jpg' represents the name of your large image.
The new opened window will have no menubar, no toolbar, and is not resizable.
The width and height are the sizes that correspond to every large image.
This code will be inserted in the flash file.
Now, in the main HTML file, the one that contains the flash file,
we will have to define popupMyImage function (javascript is case sensitive, so watch out for the function names).
|
<script language="JavaScript" type="text/JavaScript">
- function popupMyImage(url, name, features)
- {
- win = window.open(url,name,features);
- }
</script> |
|
Let's center the new image window.
If you want an improved version, by opening the new window centered on your screen,
we will create another javascript function that will determine screen resolution, and
center the image on the screen.
|
<script language="JavaScript" type="text/JavaScript">
- function popupMyImageCentered(url, name, features)
- {
- var left = Math.floor( (screen.width - width) / 2);
- var top = Math.floor( (screen.height - height) / 2);
- features += "top=" + top + ",left=" + left;
- win = window.open(url,name,features);
- }
</script> |
|
Please note that these javascript snippets should be placed between <head> and </head> tags.
Enjoy your new and improved photo gallery.
|
|
|
|
|
