-
Hello! I have a small problem thats probably easily fixed but i just dont know how. check out my site here: http://techx4.tripod.com/textures.htm
there are a few small images under the "skyboxes" section. click on one of the three. this will bring up a seperate window with a larger image in it. the only problem is that there is this ugly whitespace on the
top and left sides. I really would like to have nothing but the image inside the window.. anyone know how to fix this? heres the code i used for one of them:
thanks in advance!
[This message was edited by Jen Worden on February 24, 2002 at 16:35.]
-
Hello! I have a small problem thats probably easily fixed but i just dont know how. check out my site here: http://techx4.tripod.com/textures.htm
there are a few small images under the "skyboxes" section. click on one of the three. this will bring up a seperate window with a larger image in it. the only problem is that there is this ugly whitespace on the
top and left sides. I really would like to have nothing but the image inside the window.. anyone know how to fix this? heres the code i used for one of them:
thanks in advance!
[This message was edited by Jen Worden on February 24, 2002 at 16:35.]
-
The problem stems from loading a jpeg directly into the popup rather than an HTML page. I don't know how you would influence the look of that - the default offsets images inside any window - other than putting the image inside HTML.
Sorry, couldn't be more help. [img]/infopop/emoticons/icon_frown.gif[/img]
cfn ... Jen
Jen Worden
Web Developer
www.meadoworks.com
-
Incidentally not all browsers behave like that - Opera, for example, opens it exactly how you want. But, yes, the only way to get it to work reliably across browsers would be to put the image in an HTML age with the margins set to zero.</p>
BTW the way you have currently coded the popup links makes the images inaccessible if JavaScript is disabled. Try rewriting in the form:</p>
<a href="gods_pan.jpg" onclick="window.open(this.href, ...parameters...); return false;"></p>
--
Andrew Clover
mailto:and@doxdesk.com
http://and.doxdesk.com/
</p>
-
Andrew, I think we're gonna need a "TIPS" topic so you won't have to type that out each time and just point to the URL.
Andrew Clover: helping out the Javascript disabled ... one script at a time. [img]/infopop/emoticons/icon_wink.gif[/img]
cfn ... Jen
Jen Worden
Web Developer
www.meadoworks.com
-
I agree that setting up separate html documents for the large photos is the way to go.
This works for me:
Size the large photos the same, so they fit in the popup window exactly the same. (512 X 128?) If the photos are not sizable this way, you are going to have SOME whitespace.
Size the popup window to fit the photo size exactly:
<a href="icyhellpan.html" onClick="windowOne=window.open('icyhellpan.html', 'windowOne',
'width=512, height=128, menubar=no,
location=no, scrollbars=no') windowOne.focus(); return false;")<img src="thumb_icyhell_pan.jpg width="128" height="32" border="0"></a>
I did not understand the use of the font tag in this code, so I left it out.
I use windowOne.focus() to bring the popup to the front each time a thumb is clicked. This way you can use the same popup (windowOne) for all the photos, and in each snippet of onClick code. You will need a separate html document for each large photo.
Set up an html document for each large photo and call it for example: icyhellpan.html.
<html>
<head><title>icyhell_pan_photo</title>
</head>
<!---below covers IE, Netscape, and Opera--->
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<img src="icyhell_pan.jpg width="512" height="128"
</body>
</html>
The width and height in the onClick event are the width and height of the popup window, not the image.
It may need a little tweaking to fit, and you may need to make the images a bit larger than the popup or vice-versa, and allow the window to crop the image just a bit on the right and bottom, to eliminate any whitespace outline.
Dale
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll
-
Thanks for the help people. Dale: your code doesnt work. the onclick stuff.. i put it in my page and it does not accept it, maybe theres something wrong with it that i cant figure out. thanks anyway.. i eventually did make the thumbs links to a html which then displays the larger image in a page with no whitespace.. only bad side effect to it is, if a person clicks the thumb, for some reason it resets the page back to the top, so the person would have to scroll down each time they wanted to click another thumb. This is veeeeeery annoying, and the code i used for that:
-
TechX,
Sorry, I left out an important semicolon.
There needs to be a semicolon after the parenthesis that encloses the window.open parameters, after the "scrollbars=no')".
Should read: 'width="",height="".....,scrollbars=no');
And don't forget the final double-quote after return false;
Your function looks OK, but I wonder if the
focus() needs to be on the new window to prevent the up-scrolling of the original. I haven't had that up-scrolling problem with my thumb pages.
I use the structure :
onClick="windowOne='windowOpen(......), so that I can include windowOne.focus(); return false; INSIDE the onClick code. I don't use a function for my thumbnail pages, just put it into the onClick code. Not as elegant as using a function, I suppose, but the few extra bits in the onClick code are minimal.
I picked up this onClick code structure from Thau at webmonkey.com. He also has a book called The Book of Javascript, which is very good for great code solutions to problems such as these.
Try adding these to your function:
test.focus();
return false;
Sorry about the missing semicolon!
Dale
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll
