homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Help with page design please

 10:12 pm on Feb 22, 2001 (gmt 0)

I made a table of thumbnail photos, and I want to be able for people to move their mouse over, or click on the thumbnail and the picture to open full size on the same page.... kinda the way frames work, i guess, but I already have a frames page with menus on the left, and main page on the right, which is where my thumbnails will be... does anyone know a site that I can read to teach me how to do this?? can i use html to do this, or is it javascript???? any suggestions or help will be appreciated!!



 10:42 pm on Feb 22, 2001 (gmt 0)

I once did a page with nested frames (I'm sure someone will cringe when they read that), where the top frameset held the naviagtion bar on the left, and the 'main area' on the right, and then in the right ('main') frame, there was a second frameset with a row of thumbnails in a bottom frame (like the navigation bar frame...), and the large images showed up in the top ('display') frame.

Did that make any sense? Of course, many people strongly frown on frames, so hopefully someone will come up with an elegant javascript solution for you... then I can use the javascript for my own evil purposes too! ;)

PS... check your StickyMail chihuahuaplanet! (link at the top of the page)


 10:55 pm on Feb 22, 2001 (gmt 0)

Isn't it simpler than that, mivox? The way I read the question, all that chihuahuaplanet wants is for someone to be able to click on a thumbnail and see the full size picture in the same frame. All it takes is for the thumbnail to be inside an <A> tag and without any other attributes. The picture or html page containing the picture and a back link will end up in the right frame by default.

The only thing I wonder about is why chihuahuaplanet picked a nick that is so difficult to spell that you have to copy and paste it. ;)


 11:14 pm on Feb 22, 2001 (gmt 0)

Well, I figured when he said "kinda the way frames work", I assumed he wanted the thumbnails to remain visible while showing the large image...

The nick isn't so bad :) , but maybe I just like keyboard-tongue-twisters! (finger-twisters?)


 2:52 am on Feb 23, 2001 (gmt 0)

I think I have nick envy
You could try a [url=webreference.com/dhtml/column3/]DHTML solution[/url]. Only problem with this particular solution is that it doesn't work with Netscape 6. (what else is new...)


 8:25 pm on Feb 23, 2001 (gmt 0)

You can also do this kind of thing with server side processing. An example from my personal (no commercial content) web site uses Active Server Pages to generate the expanded view: [grr.xoc.net...]

This page works with JavaScript turned off, doesn't use frames, and works in NetScape 2.0. If you wanted to automatically expand when the mouse moved over the picture, you'd have to have JavaScript.


 8:43 pm on Feb 23, 2001 (gmt 0)

Another possible solution that some of my clients use:

Click on a thumbnail and generate a pop-up, exactly sized to the enlargement. This is simple javascript, cross browser compatible and one of the HELPFUL uses of a pop-up window.

It allows the original page to still be in view, the window can be moved around by the user, etc. It's a nice gesture to allow the pop-up to have a status bar, so the visitor can tell if the download is hanging.

It's also helpful to make the pop-up page maintain focus until it is closed, so the visitor doesn't unknowingly bury it.


 8:50 pm on Feb 23, 2001 (gmt 0)

yeesh.... I shoulda thought of that tedster! I've use that same technique on a couple of client sites. And yes, it works great without compatibility woes (except for those with jscript disabled).


 9:02 pm on Feb 23, 2001 (gmt 0)

Thank you everyone for your help! I think exactly what I'm wanting to do is what tedster suggested, but appreciate everyone else's suggestions. Tedster, do you know where I can go on the net to learn code on how to do that? I know the very basics of java script, but think I'll need some help on that.. any suggestions of a good java tutorial site or something?
Thanks again!


 9:10 pm on Feb 23, 2001 (gmt 0)

Paste this section into the <head> of your html document,
giving specific pixel values for the height and width of the
page, and choosing (replace asterix with yes or no) if you
want the pop-up page to have a toolbar, menubar, location
(URL) window, side scrollbar, and corner resizing box:

function Start(page) {
OpenWin = this.open(page, "CtrlWindow",
// -->


Use this code for the <a href> tags for the link that opens
the pop-up window:

<a href="javascript:Start('http://YOURFILE.html')">


That will allow you to have multiple same-size pop up windows on one page.

If anyone knows of a very simple script for creating pop-ups of different sizes based on the image they're displaying, I'd LOVE to see it!


 9:34 pm on Feb 23, 2001 (gmt 0)

thanks mivox
i'll try that this weekend and let you all know how it turns out!


 9:37 pm on Feb 23, 2001 (gmt 0)

Here are some resources for javascript:

beginning and advanced JavaScript tutorials [wsabstract.com]
JavaScript Knowledge Base [developer.irt.org] (good FAQs)
Lots of JavaScripts [javascripts.earthweb.com]

Also, here's some code for the bit I suggested about maintaining the pop-up on the top of the page. If you want to do that, in the page that loads into the pop-up window, have your body tag say:

<BODY onBlur="self.focus()">

That keeps the pop-up from getting buried behind a pile of other windows. The issue here is that if the popup window is still open but buried, when someone clicks on a new thumbnail, the page will load into that already open window, but it stays "behind" the main page and the user doesn't see it.


 8:49 pm on Feb 26, 2001 (gmt 0)

mivox,... I think this is what you need.

Between head tags:

<script type="text/javascript">
function displayWindow(url, width, height) {
var Win = window.open(url,"displayWindow",'width=' + width +
',height=' + height + ',resizable=0,scrollbars=yes,menubar=no' );
// -->


Where the link is:

<a href="javascript:displayWindow('http://yourlink.com/page.htm',300,450)">Click Here</a>

You will be able to make the pop-up window any size you wish. Multiple sizes on a page.


 9:01 pm on Feb 26, 2001 (gmt 0)

Thanks, I'll try that one out and see if it works on both major browsers/platforms.


 9:10 pm on Feb 26, 2001 (gmt 0)

Yes, it works on both.


 9:32 pm on Feb 26, 2001 (gmt 0)

The concept of this JavaScript code looks sound. Some comments:

I don't understand the "var=Win" declaration. Where is this variable used?

The features list has often given me cross-browser and cross-platform trouble when I use "yes" or "no". The most consistent success I've had comes from using "1" or "0", even though this is non-standard.

Also, as an aside, it's important not to accidentally introduce any spaces in the features list area of window.open. Explorer forgives, but Netscpae does not.

However, including any feature at all that is set to "no" or "0" is redundant. If a feature is omitted, then "no" is the default value. Since you are sizing the window exactly, the scrollbars="yes" declaration isn't needed either. So this script can leave the features list alone completely, I believe.

I haven't tested it, but I think the following shorter version would work fine for the HEAD section:

<script type="text/javascript">
function displayWindow(url, width, height) {window.open(url,"popup",'width=' + width + ',height=' + height);
// -->


The code for the link in the BODY section would stay as in the original from ihelpyou.

It also might be a good idea to use a different name for the popup window. Since displayWindow is already the name of the function, it keeps everything cleaner to choose a different name for the window itself. That's why I chose "popup".


 12:07 am on Feb 27, 2001 (gmt 0)

Thanks tedster! I will try it. Less code is much better than more.


 12:58 am on Feb 27, 2001 (gmt 0)

Okay tedster. I checked it out on IE 5.5 and Netscape 4.7. All worked great except that you have to have the scrollbars=yes in the code if you know that the window is not tall enough.

The code looks like this now:

<script type="text/javascript">
function displayWindow(url, width, height) { window.open(url,"popup",'width='
+ width + ',height=' + height + ',scrollbars=yes' );
// -->

Thanks much! Works great and leaner now.

<edited>Had a space before scrollbars</edited>


 3:38 am on Feb 27, 2001 (gmt 0)

>> you have to have the scrollbars=yes in the code if you know that the window is not tall enough

That's definitley true, ihelpyou.

But the code allows you to set the height to fit exactly, by setting unique height and width every time you call the function, right?


 12:16 pm on Feb 27, 2001 (gmt 0)

Yes it does. One page I have is real long. My width is narrow so the window will scroll.

If I wanted to set the width wider, then the window probably would not scroll.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved