Solved

Load an iFrame and a separate image

Posted on 2004-10-11
8
1,151 Views
Last Modified: 2008-03-06
Hello all,

I am designing a site which uses an iFrame to show the links that the user clicks.  What I also want to happen is to load an image with the page title that is separate to the iFrame.  I don't think I have explained this very well, so it might be better to visit my site at: http://www.3doubleu.co.uk/test/ 

Where it says the 'About' title, I want this to change to another image saying 'Photos' if someone clicks on that link.  If you want me to post the code for any pages then thats no problem.  I would just like to say that I am very new to JavaScript, and if you could put any explanation in idiot language that would be great :-)

Many thanks in advance,

John
0
Comment
Question by:john-formby
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 2

Expert Comment

by:DullsVillager
ID: 12278409
Give it a name:
<img src="images/pagetitle.jpg" alt="" name="pagetitle" />

Then you can use JavaScript to replace the picture when you click the link:
document.images['pagetitle'].src = "images/aboutpage.jpg";

This will replace images/pagetitle.jpg with images/aboutpage.jpg with JavaScript

To do the same on many links, try this:
(this part goes in your HEAD section)
<script language="JavaScript">
function FixTitle (x) { document.images['pagetitle'].src = x; }
</script>

(and this goes in each link)
<a href="about.html" target="LeftIframe" onclick="FixTitle('images/aboutpage.jpg')">

So you have about.html as your page, LeftIframe as your target, and FixTitle() to replace your image.
0
 
LVL 2

Expert Comment

by:DullsVillager
ID: 12278438
PS:

In "idiot language": When the user clicks the link to load a new page, they run this FixTitle whats-a-ma-jig.  FixTitle changes the picture at the top, and it knows how to find that picture by its name (pagetitle).

It's literally saying
document (this page)
dot images (the images on this page)
['pagetitle']  (the specific image)
dot src (the source of the image)
equals x (stick X in place of the image on the page, where X is whatever you tell it to use)

In this case, FixTitle('images/aboutpage.jpg') will put aboutpage.jpg in place of pagetitle.jpg.
0
 
LVL 14

Author Comment

by:john-formby
ID: 12279443
Hi,
Thanks for your help.  I have tried entering the code for many links and have created and uploaded all images and index.html.  Unfortunately though, it won't work?  When I click on a link, it  won't load the image :-(


John
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:DullsVillager
ID: 12279881
Let me try a couple things tonight, I think it might be loading the page before it gets to the FixTitle part, that could be what's not working.
0
 
LVL 14

Author Comment

by:john-formby
ID: 12280087
Sorry to be a problem, but it also needs to loads the correct title when the site first loads.  E.g. if the visitor enters at the index page, the abouttitle.jpg image should be loaded.  If they enter the site through one of the other pages the correct page title needs to be loaded for that page.

John
0
 
LVL 2

Accepted Solution

by:
DullsVillager earned 500 total points
ID: 12281023
Might be able to do it onload then... instead of when they click, do it when the new mini-page is loaded.

See if this will work, undo the old ones:

in the mini-page for About, your BODY tag should look like this:
<body onselectstart="return false;" onload="FixTitle('images/aboutpage.jpg')">

Then stick the FixTitle script in the HEAD section as above, but use this instead:
function FixTitle (x) { window.top.document.images['pagetitle'].src = x; }

This says:
ONLOAD (when the mini-page loads),
window (current window, a.k.a. mini-page a.k.a. LeftIframe)
dot top (parent window, aka main window)
dot document (the document..... as above)
etc.
0
 
LVL 14

Author Comment

by:john-formby
ID: 12281361
Hi, that works brilliantly.  Thanks very much for all your help :-)  You deserve every one of these points.

John
0
 
LVL 2

Expert Comment

by:DullsVillager
ID: 12286304
Thank you, sir!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
web page freezes after ajax post 7 102
Calculating percentage 2 49
Add - in a loop to first and last element. 6 63
Word Press Fixes to Google Speed Test Issues 2 50
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…
Suggested Courses

752 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