Solved

How can I change an image in another frame

Posted on 2008-10-29
10
258 Views
Last Modified: 2012-05-05
I am trying to build a web page so that soldiers going overseas can upload pictures and let the folks back home see them and copy them so mom and kids can still see dad.

I have 3 frames: PicturePage.html; ShowPictures.html and BottomBanner.html.

PicturePage.html will have at least 30 pictures for the parents to look at.  When they click on a picture here, I want an enlarged picture to display in ShowPicture.html. Now they can right click and download/save the picture.

BottomBanner is just for instructions
0
Comment
Question by:juricta
  • 5
  • 4
10 Comments
 
LVL 18

Expert Comment

by:wilq32
ID: 22839444
If all .html files are from one server this is trival. Just read for example this topic:

http://bytes.com/forum/thread147921.html


If you .html files are on other server ...Thats a security server policies and you have to figure out something :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22848705
<a href="bigimage.jpg" target="pictureFrame"><img src="smallImage.jpg" border="0"></a>

No script needed
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22848725
The example given by wilq is not very compatible.

Here is a better version (assuming all pages are from the same server)


I am assuming

 

<frame name="showpicture" src="showpicture.html">

 

and in showpicture.html:

 

<img src="blank.gif" NAME="bigImage"> - it is important not to have height and width here unless all images have the same format

 

picturepage.html:

<a href="bigimage.jpg" target="showpicture" 

onClick="top.showpicture.document.bigImage.src=this.href;

return false"><img src="smallimage.jpg" border="0"></a>
 

the return false is also imperative and if javascript is not available, the frame will have the big image loaded anyway

Open in new window

0
 

Author Comment

by:juricta
ID: 22848748
mplungian,

What page does this code go on?  I would like to test it.  I tried the solution from wilg32 and it did not work at this time.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22848814
the code goes on each of the small images

So assuming you have

<frameset ...>
<frame name="showpicture" src="showpicture.html">
and in showpicture where you want the big picture to appear you have

<img src="blank.gif" NAME="bigImage">

where blank.gif is a placeholder image

the picturepage.html will need to have

<a href="submarine_picture_big_format.jpg" target="showpicture" 

onClick="top.showpicture.document.bigImage.src=this.href;

return false"><img src="submarine_picture_thumbnail.jpg" border="0"></a>
 

<a href="me_and_my_gun_big_format.jpg" target="showpicture" 

onClick="top.showpicture.document.bigImage.src=this.href;

return false"><img src="me_and_my_gun_thumbnail.jpg" border="0"></a>
 

so the image urls change but the rest stays the same
 

If you still do not get it to work, please attach the frameset code and the showpicture.html and an example of picturepage.html

Open in new window

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:juricta
ID: 22848938
I now get that the "page cannot be displayed".  aNY HELP?  Here is my code:

Frameset.html
     <frameset cols="145,*">
     <frame src="picturepage.htm" name="menu">
      <frameset rows="*,80">
     <frame name="showpicture" src="showpicture.htm">
     <frame src="BottomBanner.html" name="bottom">
      </frameset>
     </frameset>

picturepage.htm
     <a href="bigimage.jpg" target="showpicture"
     onClick="top.showpicture.document.bigImage.src=this.href; return false"><img        
     Src="images/Airborne.jpg" width="678" height="472" alt="" border="0"></a>

showpicture.htm
     <img src="blank.gif" NAME="bigImage">

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 22849350

That has nothing to do with the script.

that has to do with a missing page in your folder.

Also I meant


picturepage.htm

     <a href="images/Airborne.jpg" target="showpicture"
     onClick="top.showpicture.document.bigImage.src=this.href; return false"><img        
     Src="images/Airborne_thumbnail.jpg"
width="60" height="40" alt="" border="0"></a>

There is no room in the left page to show the full size image

0
 

Author Comment

by:juricta
ID: 22857184
mplungian,

I made the corrections you showed above.  When I click on the image in the left frame (picturepage.htm) the picture does not display in the right frame (showpicture.htm)  If I RIGHT CLICK on the imag holder in the right frame and choose properties, it DOES say that the picture name is the SAME as the one I CLICKED on in the right frame.  Any ideas?  I am using EVRSOFT as my web page builder
0
 

Author Closing Comment

by:juricta
ID: 31511255
Thanks for your help.  I did not ask this originally but...how would this be done if the images were in a sub directory (called "images"  to the one holding the htm files?

Excellent help
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22857811
The code does the following:


<a    <<< A hyperlink 
 

href="images/Airborne.jpg" <<<  Make the link point to a big image in the images subdir under where the html file is
 

target="showpicture" <<<< if the user does not have javascript turned on, load the big image into the frame
 

onClick="top.showpicture.document.bigImage.src=this.href; <<<< Take the image mentioned in the href and replace an image named bigImage in the html page living in the frame called showpicture
 

return false" <<<< Do NOT follow the link - the javascript did the action here
 

><img        

    Src="images/Airborne_thumbnail.jpg" <<< inside the link put a THUMBNAIL of the image we had

width="60" height="40" alt="" border="0"></a>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 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

18 Experts available now in Live!

Get 1:1 Help Now