Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I open an image into a new page? 1

Status
Not open for further replies.
AndyGroom

AndyGroom

Programmer
May 23, 2001
972
GB
Hi,

I want my website so that if a user clicks to view an image (from a thumbnail), the image opens up into a page that I've designed. At the moment it just opens as a new Internet Explorer page:

<A HREF=&quot;.\largeimage.jpg><IMG etc.></A>

Is there a Java script to do this?

Any help would be really useful, thanks.

- Andy.
 
Sort by date Sort by votes
not usre on what you mean by a page you've designed. Are you refering to just a popup of the image only?
something like this
function openimg(url)
{
Nimg = new Image();
Nimg.src = url;
Nimg.onLoad = openWin(Nimg, url)
}
function openWin(Nimg, url)
{
winWidth = Nimg.Width;
winHeight = Nimg.Height;

myNewWin = window.open('', '', 'resizable=yes,width='+winWidth+',height='+winHeight+',top=0,screenY=0');
myDoc = myNewWin.document;
myDoc.write(&quot;<html><head></head><body>&quot;);
myDoc.write(&quot;<p><img src='&quot; + url + &quot;'></p>&quot;);
myDoc.write(&quot;</body></html>&quot;);
}


call this with any event you want. more then likely a href onClick
<a href=&quot;#&quot; onClick=&quot;openimg('path of image')&quot;><img src=&quot;&quot;></a> Just a suggestion: faq183-874
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
Thanks,

I mean that I want to click on a thumbnail and then display the full image on a new page with my own stuff at the top and bottom of the page (banners or whatever) and the image in the middle.

How do I pass the image so that it appears in this new page?

- Andy.
 
Upvote 0 Downvote
all you need to do is ad to the documents contents in the myDoc var.
of course you'll want to take out the width and height settings towards the image spec's.
so say a page 500, 400
function openWin(Nimg, url) {
myNewWin = window.open('', '', 'resizable=yes,width=500,height=400,top=0,screenY=0');
myDoc = myNewWin.document;
myDoc.write(&quot;<html><head></head><body>&quot;);
myDoc.write(&quot;<p>This page is completely dynamic</p>&quot;);
myDoc.write(&quot;<p><img src='&quot; + url + &quot;'></p>&quot;);
myDoc.write(&quot;<p>Amazing waht you can do with JavaScript\!</p>&quot;);
myDoc.write(&quot;</body></html>&quot;);
}

Just a suggestion: faq183-874
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
Hi onpnt,

Thanks for the help,

One last thing, when I click a thumbnail it opens in a new window, but the original page (containing the thumbnails) goes to a 'Page not found' screen with a '#' at the end of the URL. How can I keep the thumbnail page?

Thanks,

- Andy.
 
Upvote 0 Downvote
In the link tag, instead of # try putting javascript:void(0)

<a href=&quot;javascript:void(0)&quot; onClick...


::
 
Upvote 0 Downvote
Hi,

Thanks, but it may have been my mistake - when I uploaded the page it works fine, but not locally.

Thanks again, this was exactly what I wanted.

- Andy.
 
Upvote 0 Downvote
One last thing... :)

Previously, when users clicked a link to open an image it triggered a script supplied by the Service Provider to log a count of which images were clicked:

<A HREF=&quot;/cgi-bin/USER-linklog.pl?largeimage1.jpg&quot;>

Now that my code reads:

<a href=&quot;#&quot; onClick=&quot;openimg('largeimage1.jpg')&quot;>

...i can't trigger the old script to add to the log. Is there any way of running the script from the openImg function?

- Andy.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
202
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top