making a popup from a small image (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

dumass -> making a popup from a small image (6/22/2005 17:12:02)

Hi all. I haven’t visited in a while but would love some help from anyone with specific knowledge about making a popup from a small image? I have tried various javascripts including one specifically aimed at frontpage 2000 users but without success. What tends to happen is that once I’ve tried to add the script, a text link appears above the image i want to be the link. Clicking this link does open a new window, which says something along the lines of ‘cannot find server’. Assuming my image is called 001small.jpg and the page which I want in a popup is called poptest.htm, can anyone explain or point to where I might be going wrong? Cheers to anyone who can point me in the right direction.

Ps. Also do I need to upload the site to see if the popup works correctly?



bobby -> RE: making a popup from a small image (6/22/2005 17:24:25)

use the same thing that you described above, but make sure the link is wrapped around the image tag, with no text... something like:

<a href="...><img src="...></a>

And no, you shouldn't have to upload it to make it work. Javascript is processed in the browser.



Kitka -> RE: making a popup from a small image (6/22/2005 17:53:57)

Hi dumass,

Try this: 

<a onClick="var popup =window.open('poptest.htm','Popup Test','toolbar=no,menubar=no,width=400, height=400, resizable=yes,menubar=no,status=no,scrollbars=yes');popup.focus(); return false" href="poptest.htm"><img src="0001small.jpg"></a>



dumass -> RE: making a popup from a small image (6/23/2005 10:57:21)

Firstly, thank you Kitka and Bobby for replying. I tried both examples. First I tried your example Bobby by adding the image tag to the scripts. I then tried your 'copy and paste' example Kitka (changing a few things in the script as my image and page is slightly different to the one here).
In both, a duplicate image appeared (in ‘normal’ and ‘preview’ mode). Adding the image tag to one script (see below) produced a window but no image inside and in Kitka's, a window didn’t open but it went to the page where the larger image is on.

Do you know why I’m getting a duplicate image? Just in case I haven’t furnished you with all the necessary info, the page on which my small image is on (from which the popup should appear once the small image is clicked on) is called /tstpage.htm. The image on this page (which is a smaller version of the one that should appear in the popup) is called 001sml.jpg). Finally the page where the popup should get the larger image is named /poptst.htm. If you can decipher any of the above and realise where I’m going wrong I’d be deliriously happy!!!

This script:-
<SCRIPT language="JavaScript"><!--
function popup(){
cuteLittleWindow = window.open("poptst.htm", "littleWindow", "location=no,width=400,height=300");
}
//--></SCRIPT>
<A HREF="javascript:popup()"><img src="001sml.jpg"></A>
produced this:

SORRY BUT I WAS HOPING TO SHOW AN IMAGE HERE BUT I CAN'T PASTE IT IN.[:-] (BASICALLY IT SHOWS TWO SMALL IDENTICAL IMAGES - ONE ABOVE THE OTHER AND TO THE SIDE, A POPUP WITH 'THE PAGE CANNOT BE DISPLAYED' MESSAGE INSIDE






dumass -> RE: making a popup from a small image (6/23/2005 11:27:05)

[image][/image]
hopefully the image i wanted to show will appear here. If not please click or c&p this link:-
http://www.imagesofbritain.com/outfront.htm

[image]local://upfiles/3142/85D5F766A89F41788056B7FD91729EF3.jpg[/image]



dpf -> RE: making a popup from a small image (6/23/2005 15:22:21)

quote:

<A HREF="javascript:popup()"><img src="001sml.jpg"></A>
you are getting 2 images because....javascript:popup() calls the function popup which opens a window.... this part "()"><img src="001sml.jpg">" displays an in image



dumass -> RE: making a popup from a small image (6/23/2005 16:50:35)

thanks for the reply but i'm not understanding it properly. Instead of clicking on my small image and getting a larger version in a popup, i'm getting an identical small image on top of my original (see above picture) one of which is clickable and opens a popup, though no larger image is inside. Using Kitka's script above as an example can you tell me might be going wrong? Cheers again

ps. does it go in the head or body section? Some i've come across go in both!!



Kitka -> RE: making a popup from a small image (6/23/2005 17:25:54)

quote:

does it go in the head or body section?


My example goes in the body section.

If you could give us a URL to see your code in action, it would be much quicker and easier to help.



dumass -> RE: making a popup from a small image (6/23/2005 19:53:14)

http://www.imagesofbritain.com/squares/squind3.htm

Hi kitka. I've used this page as a trial for your script. The image on the top row, far right called 'pn001small' is the example in this instance i would like to popup when clicked.The page for which the popup should retrieve the info is called 'devilsarrows.htm'. The script is added to the very end of the body tag (if you can find it) on the main small images page as in the link above. I made some changes as necessary to suit the image and new page. Also i'm getting absolutley NOTHING happen after installing. No duplicate and no popup at all!

thanks again



dumass -> RE: making a popup from a small image (6/23/2005 19:59:28)

i wa wrong when mentioning nothing has happened. i've just seen the duplicate pn001.jpg at the bottom of the page from the above link which when clicked on takes me to the devilsarrows page but doesn't produce a popup.



Kitka -> RE: making a popup from a small image (6/23/2005 20:41:04)

quote:

doesn't produce a popup


It does for me in Firefox but not IE.

I think the problem is your use of a space in this bit:

'Popup devilsarrows'

I find that either closing the space, or substituting an underscore allows it to work properly in IE: eg

'Popup_devilsarrows'



dpf -> RE: making a popup from a small image (6/24/2005 9:08:05) 

popup =window.open
eliminate the space after popup...popup= and not popup =



dumass -> RE: making a popup from a small image (6/24/2005 16:40:11)

slowly (and frustratingly all round) i 'm getting there. The site is now producing the correct popup which is excellent. I still have the problem of the thumbnail duplicating iself which is currently placing itself at the very top of the page. If i can eliminate the duplicate - which unfortunately is the one that produces the popup - and be able to use the correct image (first image on the page 020smll.jpg) i can breathe a sigh of relief and allow you all some time for other questions[:D]
The script currently used on the page http://www.imagesofbritain.com/squares/squind3.htm is below
<script>
function openpopup(){
var popurl="http://www.imagesofbritain.com/squares/greenaura.htm"
winpops=window.open(popurl,"","width=550,height=450,scrollbars,")
}
</script>
<!-- End -->

<a href="javascript:openpopup()"><img src="020smll.jpg"></a>



dpf -> RE: making a popup from a small image (6/24/2005 16:53:13) 

<script>
function openpopup(){
var popurl="http://www.imagesofbritain.com/squares/greenaura.htm"
winpops=window.open(popurl,"","width=550,height=450,scrollbars,")
}
</script>
<!-- End -->

<a href="javascript:openpopup()"><img src="020smll.jpg" width="133" height="137"></a> 
<!-- ImageReady Slices (squaresnoimage.psd) -->
<table WIDTH="780" BORDER="0" CELLPADDING="0" CELLSPACING="0">
the isolated image at the top is because you have this code (from above) wherein you are placing the image before the table:

<a href="javascript:openpopup()"><img src="020smll.jpg" width="133" height="137"></a>

eliminate that and you should be fine <smile>



dumass -> RE: making a popup from a small image (6/24/2005 19:27:19)

thanks Dan for your input so far. Re eliminating the segment. If i do that there will be no mention in the script of the image that should be clicked to get the popup ie 020smll.jpg. Sorry for my confusion[>:]

Incidentally it's that isolated image that produces the popup when clicked on and not the one i want which is the first one on the top row
cheers - mike



Kitka -> RE: making a popup from a small image (6/24/2005 19:45:21)

quote:

Incidentally it's that isolated image that produces the popup when clicked on and not the one i want which is the first one on the top row


Hi Mike,

You need to apply the javascript to the image in your table cell rather than adding it at the beginning or end of your table.

Right now you have this code for the cell containing the image you want to produce a popup when it is clicked: 

<td WIDTH="150" HEIGHT="150" bgcolor="#C0C0C0">
<p align="center"><a href="greenaura.htm"><img border="0" src="020smll.jpg" width="133" height="137"></a></p></td>


Change that to this code: 

<td WIDTH="150" HEIGHT="150" bgcolor="#C0C0C0">
<p align="center"><a href="javascript:openpopup()"><img src="020smll.jpg" width="133" height="137" border="0"></a> </p>
</td>


The big difficulty that I see with you using this script, is if you are planning to have popups for all the images on that page. That script will always open the same destination page.

If you wish to have the script open different destination pages, the one I gave you is much more suitable, because it goes in the body, and you can tailor the code for each popup to suit.

<Off topic>It really isn't a good idea to use heights for tables or table cells. It can cause problems in other browsers and different resolutions. It is far better to allow the browser to set its own height.



dpf -> RE: making a popup from a small image (6/25/2005 8:19:51)

mike (sounds better than dumass) - kitka is correct - a function placed in the head is then available to be "called" from anywhere in the body so the <img I mentioned need only be placed where you want it in the body to "call" the function - make sense.
she is also correct in that the way that function is presently written, it will always go to the same url - there is a way to avoid that by passing the new url as a parameter but, unfortunately, its 730 am on hangover saturday and I am not up to the task... try kitkas alternative.



dumass -> RE: making a popup from a small image (6/25/2005 9:07:40)

progress at last!! Before switching on the comp it dawned on me to add that part of the script to the image itself and it did the trick - almost. There is now a border around the image and a stray character to the bottom right. At least there's no duplicate image and the popup works - in my browser at least. Kitka, you're right in that i do want to add popups to all the images and i can see how the script is no good for that. I'll have a look at your original script and give it another go but be warned i may well be back seeking help or singing praises - hopefully the latter.

re my site. The main look was done in adobe which was set at 780pxls. If i'd worked in fp only i would have used table at 100%. Presume it looks pretty bad in non explorer browsers!Once again thanks guys for all the help. Mucho appreciated



dumass -> RE: making a popup from a small image (6/25/2005 11:30:31)

back again (before you've even had a chance to reply)!Kitka, i've tried your original script substituting the relevant bits and placed it where the small image is within the table in the html section. I then uploaded the site. On clicking i'm taking to the right page - like a normal link but there is no popup. Below is your script which is currently used:-

<a onClick="var popup=window.open('http://www.imagesofbritain.com/squares/greenaura.htm','Popup greenaura','toolbar=no,menubar=no,width=590, height=480, resizable=yes,menubar=no,status=no,scrollbars=yes');popup.focus(); return false" href="http://www.imagesofbritain.com/squares/greenaura.htm"><img src="020smll.jpg"></a>


Am i placing it in the wrong place or is the script not quite right? I know its easy to mess up and wouldn't know what to look for so if you can check it out for any obvious mistakes or suggest anything to get that lovely popup working it'd be great



Kitka -> RE: making a popup from a small image (6/25/2005 18:52:38)

Hi Mike,

quote:

Am i placing it in the wrong place or is the script not quite right?


I think that maybe you missed seeing my post #11 above.

The popup works well in Firefox, but IE does not like the space between the words here:

'Popup greenaura'

Change it to:

'Popup_greenaura' or 'Popupgreenaura'

Optimised the code for your table cell might look like this: 

<td width="150" bgcolor="#C0C0C0">
<p align="center"><a onClick="var popup=window.open('squares/greenaura.htm','Popup_greenaura','width=590, height=480, resizable=yes,scrollbars=yes');" href="squares/greenaura.htm"><img src="020smll.jpg" width="133" height="137" border="0"></a></p></td>


Then, to get popups for the rest of the images on the page you'll copy and paste this code and change just three things: the two destination URLs and the URL of the thumbnail.

And hopefully you are well on your way to completing the page. [:)]

Good luck.



dumass -> RE: making a popup from a small image (6/27/2005 18:58:03)

I've been trying to reply for the last few days but sometimes when i go online the majority of web pages look like something from the dos days and it means i can't reply to posts nor send emails from my yahoo account (no idea what happens or why). Fortunately things are back to normal so i can respond finally.
I'm glad to say everything is fine now. I tried a few scripts while away from this board and one worked fine - thanks to your patient help. I've still got yours kitka as a back up should i need it! So a final Thanks to all - mike



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125