pop up window w/hyperlink (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

Pat G -> pop up window w/hyperlink (6/3/2002 13:05:41)

Happy Monday. Joy joy.

In FP2002, how do I do a pop-up window when I click/hyperlink on an image. Like here at LLBean:
http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=31512&storeId=1&catalogId=1&langId=-1&parentCategory=4759&shop_method=pp&sc1=&sc2=&sc3=&sc4=&sc5=

Click on image and a pop-up appears.

Thanks in advance for ur help! Pat

"I always arrive late at the office, but I make up for it by leaving early."



swoosh -> RE: pop up window w/hyperlink (6/3/2002 13:20:32)

  • Select the graphic to be linked
  • Choose Insert Hyperlink
  • Select Larger Image that thumbnail links to
  • Click on "Target Frame" button within Hyperlink Property Box
  • Selct New Window



Swoooosh




Pat G -> RE: pop up window w/hyperlink (6/3/2002 17:55:59)

Gosh'o thanks! I like your style. You must be one who teaches.

Pat



"I always arrive late at the office, but I make up for it by leaving early."



Michael -> RE: pop up window w/hyperlink (6/3/2002 21:37:01)

I like to use something like this:

<a href='popuppagename.htm'
onClick="window.open('popuppagename.htm',
'RIC','width=xxx,height=xxx,resizable=yes,scrollbars=yes');return false;">text or image link here</a>

This allows you to set the size of the popupwindow and eliminate the control bars at the top of the window.

You can see an example of it at http://www.advancedimagedirect.com/products.htm This particular example does it all with hotspots in an image and, once into the popup, there are links to other related features and a javascript link to close the window.

Another example would be http://www.soundstones.com/finishes.htm While this site is still a work in progress, it shows a single image link to the popup, but still choices once in the popup. Another major difference is I've added code to keep the popup in focus, keeping it on top even if you click in the main window while the popup is still open.

Feel free to view source and grab what you need!

By the way, it appears that LLBean is using a java servlet to control the popup. It minimzes the amount of code needed to run the page but requires slightly more advanced techniques that what I've described above.



<--Your information went data way -->



Baldielocks -> RE: pop up window w/hyperlink (6/4/2002 0:32:23)

Heeeeeeeelp! I cant make this work. Swooshes reply is the normal full window. I tryied the code from Michels reply and cant figure out how to make it work like it supposed to. Dang it lol! Does the picture I want to link to have to be its own page? I feel like such a newbie! Can some one make a single FP page with this effect and nothing else so I can see it bare? and then may be email it to me??? PLEASE???
Baldielocks@attbi.com is my address if any one has the time. If not you might get to see a big ol Bald guy cry! lol

 



swoosh -> RE: pop up window w/hyperlink (6/4/2002 0:46:17)

Don't want to see a bald man cry *lol*

Michaels code worked fine for me when I tried. Why don't you paste your code here and we'll take a look at it.

Swoooosh




Michael -> RE: pop up window w/hyperlink (6/4/2002 0:58:25)

Hmmmm, I don't seem to be able to edit my earlier post, so I'll offer this:

I created a few options at http://www.formulagrafix.com/imagelinks/

The first is a simple link to the image, opening in the same window. The second is a basic link to a new window, and the third uses the code I supplied earlier to open a true popup window. The first two were done using the standard FrontPage interface, the last required getting into the source code to add the required bits.

It should be noted that this third example links to an image only. If you want to add any other content such as a "close window" text or image link as shown in the sites I referenced earlier, then you need to create an actual page to display in your popup.

<--Your information went data way -->



Baldielocks -> RE: pop up window w/hyperlink (6/4/2002 6:05:16)

Ok guys thanks for the help! Ill play around with it and see if I can make it work. I tried it once with the code you put up and wasnt able to get the image to popup. I got the window just now image. So im on the right track! So thank you so much for the help. And Ill post again to let you know if i figured it out! (gosh I hope so)

 



Pat G -> RE: pop up window w/hyperlink (6/4/2002 11:20:18)

Michael or anyone. Help. Firstly I can't seem to get this code to work. I want to do a pop-up with image and text.
Like the LLBean example or like your example:
http://www.soundstones.com/finishes.htm

I'm redoing a website and need a pop-up window with text for each image, see my work in progess: http://www.hillwoodsales.com/printscreen.htm

So in easy english, what exactly do I do? Do I make an entire webpage? I'm just an average frontpage2002 user.

Thanksssssssssssssss. Pat

"I always arrive late at the office, but I make up for it by leaving early."



Mike54 -> RE: pop up window w/hyperlink (6/4/2002 13:17:25)

Hi Pat,

As Michael indicated, if you want to include text and maybe a close window link/button, you'll have to create a page for each window. As for creating the popup you can use this code 
 
 <HTML> 
 <HEAD> 
 <TITLE> A Window</TITLE> 
 <SCRIPT> 
  
 function open_window(url) { 
 mywin = window.open(url,"win",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=520,height=350'); 
 } 
  
 </SCRIPT> 
 </HEAD> 
  
  
 <BODY> 
  
 <A HREF = "javascript:open_window('page1.html')"> 
 <IMG SRC ="image.gif">  
 </A> 
  
 <A HREF = "javascript:open_window('page2.html')"> 
 <IMG SRC ="image.gif">  
 </A> 
  
 </BODY> 
 </HTML>

Which I took from the tutorial area here
http://www.outfront.net/tutorials_02/faq.htm#popup

You can also search for "popup generator" in you browser. There are several of them out there that might help creating the code for you.

ah reckon, tharfo'e ah's, ah reckon.




Michael -> RE: pop up window w/hyperlink (6/4/2002 14:26:29)

OK Pat, here we go:

First off, I like the way the site is looking, especially the appearance of your navigation bar.

Step by step, assuming a popup window for item "kodiak" on your site:

1. Create a new page with the image of the Kodiak trailer and any text you want. Perhaps center the image and put your text in a table cell, it's up to you. Save this page as kodiak.htm (I would put all these popup pages in a seperate folder, in this case "trailers" to help keep your site organized)

2. In FP Normal view, select the thumbnail you have of the kodiak trailer in your page "haulmarkenclosed.htm" by just clicking on it, then go to HTML view. Replace the <img> tags for this thumbnail with the following code:

<a href='trailers/kodiak.htm'
onclick="window.open('trailers/kodiak.htm',
'RIC', 'width=300,height=300,resizable=no,scrollbars=no');return false;">
<img border="0" src="images/kodiak.gif" width="x" height="x"></a>

This code assumes you have a page called "kodiak.htm" in the "trailers" folder as I mentioned in step 1. It also assumes your thumbnail for kodiak is called "kodiak.gif" and that it is in your "images" folder. Adjust these as needed, along with the size of your thumbnail image (replace the "x"). This code will also open your popup at 300x300 pixels, so feel free to change them as needed. Also, the code as it sits will not allow you to resize the window, nor will it have scollbars. Change the "no" to "yes" as you see fit.

3. Save your "haulmarksenclosed.htm" page, then preview it in your browser. When you click the kodiak picture you should have a popup window of your kodiak.htm page!

4. Repeat steps 1 & 2, creating a new page for each item, then creating the links for each.

Here's a little tip:

Take the popup code and copy it into Notepad. From there you can easily change only the file names as needed, then copy and paste the changes for each link. I find it makes it much easy to read, and much easier to copy everything you need, to create the additional links.

Feel free to email me with any additional questions, and good luck!

<--Your information went data way -->



Pat G -> RE: pop up window w/hyperlink (6/4/2002 17:24:22)

Michael Michael Michael...you doll! If you were here I'd kiss you!

Take a look at what I did w/the pop-up as you explained so well.

My html code:http://www.hillwoodsales.com/printscreen.htm

A look thru my browser of the results:http://www.hillwoodsales.com/printscreen2.htm

Is my pop-up in browser as shown here not accessiable at this point?

Whatca think? Pat

"I always arrive late at the office, but I make up for it by leaving early."



Michael -> RE: pop up window w/hyperlink (6/4/2002 19:03:39)

Oh sure, make an offer like that when I'm 3000 miles away!

Anyhow....

Let's see, the popup content should display. Are you absolutely certain you have the proper URL in the link? It may well be case sensitive. Also, you seem to have what amounts to a nested link. Look at the green highlighted portion of your "printscreen2.htm" Remove the <a href="images/99kokiak.jpg"> and then, in the second to last line highlighted, remove one of the two </a> tags. That should do it for you.

One last thing; you still have the x's in the width and height of your link image. Unless those are thank-you kisses (!) you should change them to the actual image dimensions.

<--Your information went data way -->



Pat G -> RE: pop up window w/hyperlink (6/5/2002 13:50:38)

Michael Michael Michael...
"distance makes the heart grow...", oh never ye mind.

I did as instructed.
I changed my html code, see here:
http://www.hillwoodsales.com/printscreen.htm

Pop up still looks like this:
http://www.hillwoodsales.com/printscreen2.htm

I selected the URL from the browsing my files, like this (so no typos):
http://www.hillwoodsales.com/printscreen3.htm

Any other suggestions? Thanks heaps! Pat

"I always arrive late at the office, but I make up for it by leaving early."



Michael -> RE: pop up window w/hyperlink (6/5/2002 14:05:02)

Oh how did I miss this the first time around? I have a reputation as the proof reading demon at work, and yet this one got by me. Please accept my sincere apologies for my lousy instructions.

In http://www.hillwoodsales.com/printscreen.htm notice the first line refers to "trailerPOPUPS/kodiak.htm" while the next line refers to "trailerPOPUPS.htm/kodiak.htm". Notice the inconsistency of the extra ".htm" in there? According to http://www.hillwoodsales.com/printscreen3.htm your folder is called "trailerPOPUPS.htm" so here's what I would do:

1. Change the name of the folder from "trailerPOPUPS.htm" to "trailerPOPUPS"
2. In both instances of the popup code make sure you are referring to "trailerPOPUPS/kodiak.htm"

Now (fingers crossed here) you should be good to go. If not, we'll try this again!

<--Your information went data way -->

Edited by - Michael on 06/05/2002 14:05:52



DarlingBri -> RE: pop up window w/hyperlink (6/5/2002 14:10:16)

Hey!

Had you searched, there are several of these threads here recently. One of them provides at link to this pop-up generator:

http://javascriptkit.com/popwin/index.shtml

Tell it what you want and it codes the pop-up for you.

--Bri
-----
#!usr/bin/girl



Pat G -> RE: pop up window w/hyperlink (6/5/2002 15:07:27)

Michael Michael Michael...

By God Watson you've done it!

Mission accomplished!

The eagle has landed!

My pop-up (thanks to Michael):
http://www.hillwoodsales.com/printscreen4.htm

Now I have to figure out how to do the vertical scroll.

Thanks for your help. BIG KISS

"I always arrive late at the office, but I make up for it by leaving early."



Michael -> RE: pop up window w/hyperlink (6/5/2002 15:26:58)

WooHoo!!!! Way to go Pat!! I knew you could do it!

As for the scrolling (and the size of the popup window for that matter), just alter this line: 'width=300,height=300,resizable=no,scrollbars=no'

Change the width and height to whatever dimensions you need (the number is in pixels, by the way) and, if you want scrollbars and/or you want to let the user resize the window, just changes the "no" to "yes" in the proper places. Simple.

Big hugs for a job well done!

<--Your information went data way -->



Pat G -> RE: pop up window w/hyperlink (6/5/2002 16:10:08)

Michael - hey I just did the scroll in the pop-up. Thanks again - I'm so thrilled!
http://www.hillwoodsales.com/printscreen5.htm

quote:
"I love this forum! Love is a many splendid thing! Love lifts us up where we belong! Love is all you need! (Moulin Rouge the movie)


"I always arrive late at the office, but I make up for it by leaving early."



Ange -> RE: pop up window w/hyperlink (10/23/2002 3:16:41)

I have used Michael' s popup code i.e.

<a href=' popuppagename.htm'
onClick=" window.open(' popuppagename.htm' ,
' RIC' ,' width=xxx,height=xxx,resizable=yes,scrollbars=yes' );return false;" >text or image link here</a> [/size] [/size] [/size]

to create the popup window.

The only problem is the popup window displays automatically in the top-left handside of the window. I want it to appear on the right-hand side of the link selected to produce the popup window.

Is there a location tag I can use within the abovementioned code to do this?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.140625