Here's what I have and what I want to do:
My current site is here
. (the page this is relevant to is just the Illustration page)
This is a "wire-frame" breakdown:
So, Iframe#1 points at a "menu.html" file and iframe#2 is the "target" for <a>'s in iframe#1. This works. I was surprised, but maybe I shouldn't have been.
I am trying to set it up so that the menu <a>'s in Iframe#1 will change class depending on what .html page is being displayed in Iframe#2. Basically so that the "buttons" to change images will change color to signify which one is being displayed currently.
I think I know how I should do it, but I don't know the syntax or how to actually write it, so here's my idea.
have a function (in the "menu.html"?) that gets and array of all the <a>'s href locations and compare those to what location is being displayed in the "displayframe". This lets me (I think) write a function that just runs through each <a> element and the array comparing two variables: the location that the link points to (let's say "x") and the location in the "displayframe"(and "y"). Then its just an if statement, so:
if x==y then the class of the element =active
if x!=y then the class of the element ="inactive"
The problem I'm having is that I have no idea if that is possible, or if it makes sense. I've been reading and trying things out but I can't figure it out. Does anybody have suggestions? I hope that all made sense.
I understand that the way I have my page set up currently (multiple Iframes) might possibly be a bit dumb. BUT this is the solution I came up with to make it easy to update. Instead of having a separate page for every piece in my portfolio, now if I want to add/remove something I just slap it on its own page and add a link in the "menu.html" file. Easy. I've come up with plenty of ways to solve this by getting rid of the two iframes but I want to see if it's possible to get this to work.