john-formby
asked on
Load an iFrame and a separate image
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
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
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.
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
ASKER
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
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
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.
ASKER
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
John
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi, that works brilliantly. Thanks very much for all your help :-) You deserve every one of these points.
John
John
Thank you, sir!
<img src="images/pagetitle.jpg"
Then you can use JavaScript to replace the picture when you click the link:
document.images['pagetitle
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
</script>
(and this goes in each link)
<a href="about.html" target="LeftIframe" onclick="FixTitle('images/
So you have about.html as your page, LeftIframe as your target, and FixTitle() to replace your image.