Solved

open a new browser window (for a zoom view of image)

Posted on 2007-11-13
8
1,621 Views
Last Modified: 2012-05-05
if i use this syntax, the page goes forward to the new page

<a href="zoom.htm"><img src="images/MyPic.jpg"</a>

but how do i write it so a new window opens to zoom.htm, and how do i get it to NOT fill the screen (in Access we call that 'Restore' as opposed to 'Maximize')?

thanks,
mac

0
Comment
Question by:MacRena
8 Comments
 
LVL 8

Assisted Solution

by:Wikkard
Wikkard earned 50 total points
ID: 20276189
<a href="javascript:win=window.open('zoom.htm','newwindow');win.focus();"><img src="images/mypic.jpg"></a>

However this won't resize the image or tell zoom.htm which image to load.

To do this you would need to pass the image filename to zoom.htm on the querystring ie
<a href="javascript:win=window.open('zoom.htm?mypic.jpg','newwindow');win.focus();"><img src="images/mypic.jpg"></a>

And then zoom.htm would somehow need to read the querystring and load that image.

Another alternative would be to simple open the image itself in a new window (at full size)

<a href="javascript:win=window.open('/images/mypic.jpg','imagewindow');win.focus();"><img src="images/mypic.jpg"></a>

0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 50 total points
ID: 20276198
MacRena,

If you want the new window to be the same size as the browser (whatever that is) then use ...

<a href="zoom.htm" target="_blank"><img src="images/MyPic.jpg"</a>

The target being set to _blank will have zoom.htm open in a new window.  The other option is to use javascript and a popup window.  You can specify the size of those but there is a bigger chance that it will be blocked by popup blocker software or the browser.  Let me know if you want more info on that though.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 19

Accepted Solution

by:
nschafer earned 100 total points
ID: 20276292
If you wish to use straight HTML, you cannot control the size/position of the opened window.  A little Javascript will take care of this for you.

add the following code to the <head> section of your page:
-------------------------------------------------------------------
<script type="text/javascript">
function zoom(){
  window.open("zoom.htm","zoom","height=500,width=400,status=no")
}
</script>
-------------------------------------------------------------------

and modify your link to call the function rather than link to another page:
-------------------------------------------------------------------
<a href="javascript:zoom();"><img src="images/MyPic.jpg"</a>
-------------------------------------------------------------------

I would actually recommend some changes to this.  I assume that you have several images that you want the user to be able to zoom, so a small change would allow the zoom.htm to receive an image ID or name that it could use to select the correct image.

-------------------------------------------------------------------
<script type="text/javascript">
function zoom(img){
  window.open("zoom.htm?img=" + img ,"zoom","height=500,width=400,status=no")
}
</script>
-------------------------------------------------------------------

<a href="javascript:zoom('images/MyPic.jpg');"><img src="images/MyPic.jpg"</a>


Now in your zoom page you have to read the querystring and use that to set the correct src for the image file.
The following code will do just that:

zoom.htm
-------------------------------------------------------------------
<html>
<head>
<title>Full Size Image</title>
<script type="text/javascript">
function setImg() {
  img = document.getElementById("img1");
  imgsrc = getQS("img");
  img.src = imgsrc;
}

// get QueryString Information
function getQS(tag) {
if (window.location.search.length ==0) return "";
  QS = window.location.search.substring(1,window.location.search.length).split("&");
  for (i=0;i<QS.length;i++) {
    QS1 = QS[i].split("=")
    if (QS1[0].toLowerCase() == tag.toLowerCase()) return unescape(QS1[1].replace(/\+/g,' '));
  }
  return "";
}

</script>
</head>
<body onload="setImg();">
<img src="" width="100%" alt="" id="img1" />
</body>
</html>

----------------------------------------------------------

If you wanted you could eliminate the hyperlink <a> tag altogether and just add an onclick event to the image itself.  this would make it a bit cleaner in the code, but might not give the same effect you want visually.  Simply change the <img> tag on the first page like this:
   <img src="logo1.jpg" onclick="zoom(this.src);" alt=""/>

You'll notice I didn't need to specify the name of the image when calling the function I just told it to use the same source as the current image.  This makes it less likely to make a mistake coding in the name of the image.

In any case I hope this helps,
Neal.




0
 
LVL 4

Author Comment

by:MacRena
ID: 20276881
HOLY MACKREL Neal, that was fantastic!
i'm increasing the question to so i can give you the 100 points.
that really is a terrific answer!  thank you very much!

and thanks to Wikkard and b0lsc0tt - i'm splitting 100 points between you.

mac
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 19

Expert Comment

by:nschafer
ID: 20276952
Glad I could help.  Thanks for the points.

Neal.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20277025
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
 

Expert Comment

by:Delphiwizard
ID: 20410783
What would be realy nice, is to scal the zoomwindow to the imagesize.
Small images will have a small windows and v.v.

Any suggestions?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20413246
Delphiwizard,

Open a new question for this.  If you want to use this as a start for that question then you can put this question's URL in your question's body.  If you would like to attract the experts here to the question then feel free to post your question's URL in a comment here.  I don't know if I will be able to help but I will be happy to look.  This will be the best way to get help and answers to your question.

bol
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now