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 TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image help needed 1

Status
Not open for further replies.
celticking

celticking

Technical User
Feb 15, 2001
69
US
I have the following code.
<head>
function doPic(imgName) {
if (document.images) {
document.mainpic.src = imgName;
}
}
var img_one = new Image();
img_one.src = &quot;art/pic1.jpg&quot;;
var img_two = new Image();
img_two.src = &quot;art/pic2.jpg&quot;;
var img_three = new Image();
img_three.src = &quot;art/pic3.jpg&quot;;
var img_four = new Image();
img_four.src = &quot;art/pic4.jpg&quot;;
</script>
<body>
<table width=120 height=148 border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#999999&quot;>
<tr>
<td height=&quot;161&quot; valign=&quot;top&quot; colspan=4 align=center><img name=&quot;mainpic&quot; src=&quot;art/pic1.jpg&quot; width=120 height=148 border=0></td>
</tr>
<tr>
<td width=&quot;32&quot; height=&quot;42&quot; valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic1.jpg');&quot;><img src=&quot;art/pic1.jpg&quot; width=30 height=40 border=1></a></td>
<td width=&quot;32&quot; valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic2.jpg');&quot;><img src=&quot;art/pic2.jpg&quot; width=30 height=40 border=1></a></td>
<td width=&quot;32&quot; valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic3.jpg');&quot;><img src=&quot;art/pic3.jpg&quot; width=30 height=40 border=1></a></td>
<td width=&quot;32&quot;valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic4.jpg');&quot;><img src=&quot;art/pic4.jpg&quot; width=30 height=40 border=1></a></td>
</tr>
</table>

This all works fine but the main pic is a little small in higher resolutions. I want to make the main pic a link to open a larger picture in a new window but i'm having difficulties. Can anyone help me with this?
Thanks.
 
Sort by date Sort by votes
Well pop-up windows are a bit cumbersome aren't they so you could load bigger ones. You could have that when an image is selected - a bigger version is downloaded and inserted.

If you named them the same but wth BIG or something added then you could use the thumbnail to get them:

suppose you have pic1.jpg and it's bigger version BIG_pic1.jpg in the 'art' directory.

send the image name to the function:

href=&quot;javascript:doPic('pic1.jpg')&quot;

thenin the function you just add strings to it to make up the address for the image:


function doPic(imgName) {
var URL = &quot;art/BIG_&quot; + imgname;
if (document.images) {
document.mainpic.src = URL;
}
}



This way you stya on the one page - but if you still want to make a window let us know.
b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
Thanks for your reply. I do need to use a new Window. The mainpic at the moment is at it's maximum(no more space on the page) I was happy with the size buy my colleague wants bigger so help with the new Window would be appreciated.
Thanks.
 
Upvote 0 Downvote
O.K. well you want to make a function which handles the opening of the window.

There a many ways to do it - by sending data using the query string - or just resetting the src of the image in the window.

function imgWin(index){

var imgWindow = window.open('page.html','picturepage',attributes);
imgWindow.picture.src = BIGimages[index]
}

This just requires you to have an array containing the URL's of the big images - and send an index to the function - instead of the name. Also need to write a page for the new window, with an img tag.

Once you have it running you could add sophistication - like sending the images name - and having the function match the name to one of the BIGimages ones - assuming you name them consistently.

The other way is to send the URL for the picture to the new page as a query string, parse it out, and apply it.


b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
Thanks, i appreciate your help though i'm totally lost. I'm a 'newbie' to JS and really don't understand what needs to be done. I'm learning as fast as i can and i'm sure at some point i'll figure it out.

Thanks again.
 
Upvote 0 Downvote
Bangers, I know this is a little cheeky but could you possibly write the code i need to get this working. I've tried and i'm going round in circles. Like i said, i need the mainpic to open in a new blank window. The pic can be any size for now, i can modify that myself. If you could i woyld be eternally greatfull.

Thanks for your help.
 
Upvote 0 Downvote
I'll do it after work - be ready in the morning - my morning - New Zealand Time ;)
b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
Here is a function which opens a new window - then writes an image to it. The reason I did this is because if we did it by changing src's and the pics were different sizes Netscape would paint them all the same size as the original.

You will need an empty page - because I found that if you don't put one in - the images don't get overwritten. The way it is set up is, if the window is minimsed, it pops up with the new image.

requires
- empty page called 'imageHolder.htm' to write to.
- New images - enlargements of originals



<script language=&quot;JavaScript&quot;>

function doPic(simgName){
var BIGimage = &quot;<img src=&quot; + simgName + &quot;>&quot;;
var newWin = window.open(&quot;imageHolder.htm&quot;,&quot;someName&quot;,'menubar=no,width=400,height=200');

newWin.document.write(BIGimage);
document.close();
newWin.onload=newWin.focus(); //sets to popup
}
</script>


This function takes a string, which is the URL of the new - bigger image to put in the window.Called like so:

...
<a href=&quot;javascript:doPic('art/BIG_pic1.jpg')&quot; onFocus=&quot;this.blur()&quot;>
<img src=&quot;art/pic1.jpg&quot; border=&quot;0&quot;></a>
...


So this is the idea - I'm sure you can refine it for your own needs ;)Bj
b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
It's almost working. The big image is showing in the new window, just one problem, when i click a thumb, instead of showing as the mainpic it pops up in a new window too. If you go to and use search, select actor under skill. On the results page, click on any user and a profile will pop up, you can then see how it works. Selecting a thumb displays the pic above, when you click on the larger pic, the page should open with a larger again pic. Here's what i have now...

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
function doPic(imgName) {
if (document.images) {
document.mainpic.src = imgName;
}
}
var img_one = new Image();
img_one.src = &quot;art/pic1.jpg&quot;;
var img_two = new Image();
img_two.src = &quot;art/pic2.jpg&quot;;
var img_three = new Image();
img_three.src = &quot;art/pic3.jpg&quot;;
var img_four = new Image();
img_four.src = &quot;art/pic4.jpg&quot;;

function doPic(simgName){
var BIGimage = &quot;<img src=&quot; + simgName + &quot;>&quot;;
var newWin = window.open(&quot;imageholder.lasso&quot;,&quot;someName&quot;,'menubar=no,width=400,height=500');

newWin.document.write(BIGimage);
document.close();
newWin.onload=newWin.focus(); //sets to popup
}

</script>

<table width=120 height=148 border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#999999&quot;>
<tr>
<td height=&quot;161&quot; valign=&quot;top&quot; colspan=4 align=center><a href=&quot;javascript:doPic('art/BIG_pic1.jpg')&quot; onFocus=&quot;this.blur()&quot;>
<img src=&quot;art/pic1.jpg&quot; border=&quot;0&quot; width=132 height=161 lowsrc=&quot;Mainpic&quot;></a></td>
</tr>
<tr>
<td width=&quot;32&quot; height=&quot;42&quot; valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic1.jpg');&quot;><img src=&quot;art/pic1.jpg&quot; width=30 height=40 border=1 lowsrc=&quot;thumb1&quot;></a></td>
<td width=&quot;32&quot; valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic2.jpg');&quot;><img src=&quot;art/pic2.jpg&quot; width=30 height=40 border=1 lowsrc=&quot;thumb2&quot;></a></td>
<td width=&quot;32&quot; valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic3.jpg');&quot;><img src=&quot;art/pic3.jpg&quot; width=30 height=40 border=1 lowsrc=&quot;thumb3&quot;></a></td>
<td width=&quot;32&quot;valign=&quot;top&quot;> <a href=&quot;javascript:doPic('art/pic4.jpg');&quot;><img src=&quot;art/pic4.jpg&quot; width=30 height=40 border=1 lowsrc=&quot;thumb4&quot;></a></td>
</tr>
</table>

With this code, clicking on the thumb opens the new window with the middle sized pic??? Sorry to lay all this on you as i know i must be confusing you. I haven't changed the code online, just found this problem locally.

Thanks again.
 
Upvote 0 Downvote
Oh - I am sorry! I didn't realise you still wanted the 'mainpic' image to appear, I thought we were doing the window instead - my mistake.

This is happening simply because you have two functions with the same name! Just rename one of the functions.
b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
I changed your function to function doBigPic(simgName)

I now have these two lines that i can't combine...
<td height=&quot;161&quot; valign=&quot;top&quot; colspan=4 align=center><img name=&quot;mainpic&quot; src=&quot;art/pic1.jpg&quot; width=132 height=161 border=0 lowsrc=&quot;Mainpic&quot;></td>

and

<a href=&quot;javascript:doBigPic('art/BIG_pic1.jpg')&quot; onFocus=&quot;this.blur()&quot;>
<img src=&quot;art/pic1.jpg&quot; border=&quot;0&quot;></a>

I presume they have to be combined. Thanks yet again.
 
Upvote 0 Downvote


I am at your site right now - and looking at Boris Gregorski, he looks a little like Al Pacino wouldn't you say?

Anyway, I see what you are doing now - and the doPic() function is working, so where does the doBigPic function get called from? Are you going to have it called from the mainPic picture? i.e. the bigger version?
Is this what should happen?:
Click thumb --> mainpic changes --> click mainpic --> new window with big image
If this is the case - then you may have to set another variable for doBigPic(), so it knows which one of the big pictures to show - since the src of mainPic changes.

Let me know if this is what you want to do, and I'll help you.
b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
That's exactly what i want to happen and yeah, i do look a little like Mr Pacino, for now!
Thanks
 
Upvote 0 Downvote
Do you think i'm going the right way about this. At the moment, as you can see the images are displayed directly. Soon i'll be looking to call the images from fields, same way as i use the other fields on the page. This is going to complicate things even more. I'm hoping this is possible if not could you maybe suggest a better way? A similar effect would be alright.
Thanks
 
Upvote 0 Downvote
O.K. I'll work on it ;)
b2 - benbiddington@surf4nix.com
 
Upvote 0 Downvote
Thanks yet again. I think i must owe you big time..lol.
 
Upvote 0 Downvote
Thnaks Ben. You've been a great help and i'll try to implement it. I appreciate all the trouble you've gone to. Great looking site you have. You're current project looks very good. I hope you have a lot of success with it.
Thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
592
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
315
gmmastros
gmmastros
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
632
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
322
Smurfmania
Smurfmania
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
291
obtur
obtur

Part and Inventory Search

Sponsor

Back
Top