I have a page (let's call this page2.html) that has a long list of <a href>
links in it, each one opening an image in an iframe on that page.
I would now like to create a preceding page that will act as an introduction (let's call it page1.html). I need to create a link on page1 that opens page2 AND opens an image in the iframe on page2 (or alternatively open page2 and select one of the <a href>
on page2).
I have tried the following
<a href="page2.html" onclick="window.open('image.png','iframe-name')">
but this does not work for me as I believe it is looking for the iframe on page1 (not page2).
Any help will be much appreciated.
Addendum:
I have now found some code that solves part of my problem. By putting the images in their own html pages and adding a little JavaScript in both the image pages and page2 (the one with the iframe) I am now able to force the image pages to appear in the iframe (code below).
The missing piece now is to highlight (add a class) the relevant anchor to show which image is being shown.
When I am on page2 and click one of the anchors I use the following to add a 'selected' class to the anchor:
var selected = document.getElementsByClassName('selected');
function show(obj) {
if (selected.length) selected[0].className = '';
obj.className = "selected";
}
How can I add a class to an object on page2 when loading it from page1?
Alternatively is there a way to add a class to an object on page2 based on what is begin displayed in the iframe on the same page?
Here's the javascript I'm using to load a page into an iframe:
This goes in the index page (my page2):
<script type="text/javascript">
window.onload=function() {
var data=location.search;
if(data) {
data=location.search.substring(1); // remove the '?'
frames[0].location = data;
}
};
</script>
And this goes in each of the image pages:
<script type="text/javascript">
if (top == self) {
location.href = 'index.html?' + self.location.href;
}
</script>