Pop up windows

Topic

New Reply

Is anyone familiar with creating pop-up windows in Macromedia Dreamweaver?

I am interested in creating one of those windows that pop up when you click on a link. For example, in Amazon, under the image of the cover of the book you are browsing, there is a link that says, “see larger image.” When you click that link, a window pops up with the image of the book’s cover. It does this without changing the content of the original page that was still running in the background. (e.g., see http://www.amazon.com/gp/product/141952150…e=UTF8&s=books) How do they do this?

I found a trail through Google that said to select the language that you wanted to make into a link to the pop-up window. then go to the Tag Menu, select Behavior, press the “+” sign under Behavior, and then go to “Open browser Window,” but this option is always greyed out! The only time it is not greyed out is when I choose a word that already has a hyperlink. But that is not what I want. I don’t want someone to go to a hyperlink, and when they click it, for them to go to a new page and for a window to pop up simultaneously. I want words to ONLY have a link to a pop up window without making the original page clicked on change. The background page should just stay put. Anyone know how this can be done?

Thanks!

John

Reply | Quote

Replies

I don’t use Dreamweaver, but there are two ways to open a pop-up window. The first is an ordinary link in which you specify a target attribute with a value of “_blank” (the leading underscore is required, or else you will be opening a window named “blank”). This doesn’t give you any control over the size or position of the window, so there is a second way, the JavaScript window.open() method. For best results, you can combine these:

Show me the picture

In a JavaScript aware browser, your customized 640×480 window will display, and the normal link action will be canceled. If JavaScript is not running, a window of approximately the same size as the current window will display in front of the current window. In no case will the current page go anywhere.

Hope this helps.

Reply | Quote

1. Click on the tag.
2. Open the Behaviors panel.
3. Select Advanced Open Window 3
4. Browse to the file
5. Click ok.
6. When you check the tag, the onLoad event is now created
7. Save your page

Reply | Quote

Hi Jerry,

I tried to follow these steps but had 2 problems. First, I didn’t see the tag anywhere on my screen. Can you take a picture of your screen with the tag selected so I can see where that is?

Second, under the Behaviors panel, I don’t have any “Advanced Open Window 3” option. The only option that looks remotely similar to that is “Open Browser Window,” which is greyed out.

I am attaching a picture of what my screen looks like when I am trying to do this. The word “Volunteers” on the screen is selected, since that is the word I am trying to link to a pop-up window. But as you can see, when I press “+” on the Behaviors Panel, I can’t do anyting with this to make it link to a pop-up. I know the image is blurry, but this is because I had to shrink it in Photoshop because WOPR only allowed files up to 100k in size, but I think you can get the basic idea.

Any ideas?

John

Reply | Quote

John,

This is just to let you know that Jezza will be away for a week. Hopefully someone else will answer your question in the meantime.

Reply | Quote

Can you post a more zoomed-in image of the dialog with the options for that link-to-be?

Alternatively, you could create a “regular” link with the word Volunteers, then switch to viewing the HTML source code and edit it along the lines in my earlier post.

Reply | Quote

Thanks, jscher, for your message, but please understand, I am pretty amateur and don’t know much about html, so your original response was like Greek to me. That’s why I like all the pretty buttons in Dreamweaver, it makes it all simple. So if you can dumb down the html to my level, I would greatly appreciate it! I don’t even know what javascript means.

I am attaching a zoomed-in version of the dialog box. But as you can see, all the options are greyed out. They don’t let me choose anything, UNLESS I put a link to the word Volunteers, which I don’t want to do. I want Volunteers to stay put!

I have an idea that might be able to put a definitive end to this question. If I send you the html language, can you put the code to make the pop-up?

Here is the html:

:: VOLUNTEER OPPORTUNITIES ::

I want it so that when “Volunteers” is clicked, this page will pop up, “http://editions.biliki.net/index_en.php.” But I want the new page to only take up half the screen (6″ wide), and the original page to not budge. Just to stay put.

I don’t know if you could help me with this. But if there is any other information I can send, just let me know,

John

Reply | Quote

The first step really is to make the text into a link. Then you should be able to adjust the properties for the link and add the new behavior. I don’t have Dreamweaver, so that’s about all I can say at this point.

Reply | Quote

Hi John

This will be split into two posts to get two images in.

First thing to do is to

1) view your page in design view
2) Click anywhere on the page
3) Click Windows/Behaviours
4) A menu will appear, Click Open Browser Window

See next post…..

Reply | Quote

5) The folowing window will appear
6) Navigate to the html page you want to open

Only note that you should be aware of that this behaviour should be attached to the onload event of the page. To help you out there are quite a few tutorials on the web that can help you and talk you through this as there are various options you can go for like, having no tool bars different sized windows and the like.

Is this what you were looking for?

Reply | Quote

Jerry —

> Only note that you should be aware of that this behaviour should be attached to
> the onload event of the page.

— He mentioned emulating the “See Larger” link on Amazon:

Reply | Quote

Oops

Still in holiday mode. Then this is not a problem then as the same thing can be done if he just highlights the link and copies my method..thanks for reading the question for me properly

Another idea is to use the gallery maker in Dreamweaveras it converts all the images into thumbnails and creates the links for you. A little adaption of the page layout and you are there.

Reply | Quote