Alrighty guys, I got myself in over my head at my internship. Even my Computer Theory professor, who is an ex-department head from Wolfram Alpha isn't really giving me any useful information. It appears I must embark on building this set of web pages with only your guidance, as I can't find any sites that are of much use elsewhere.
I'm putting together pages that explain different technologies we have integrated into a classroom environment. I want to use a CSS Image Gallery, kind of like this, in the sense that when you hover over an image, a larger one pops up.
However, I want it to be able to swap out an image and accompanying text and links within an iframe. Here's an illustration of what I mean. When the mouse hovers over one of the pictures in the left-hand gallery, I'd like the image, the text underneath it, and the information in the text box to the left of it to change. My idea is to present all the information necessary within the iframe, so that you get everything relating to that piece of tech in one place.
The box under "Podium Components" would be the iframe. I know the swapping of the image can be done via CSS, since I built a website utilizing it for my Web Development class (Wolfram Alpha teacher :D)
If it's possible, I'd like to avoid Java or JavaScript for this one and stick to pure CSS. The CMS we're using for the website is Drupal, so things are already pretty complicated. Throwing JavaScript into the mix will just make things too wacky.
As an added note, I always feel guilty using StackOverflow when I'm working on projects. It feels like I'm cheating :/. So I'd really appreciate it if you could just point me toward a tutorial or tell me search terms that will get me where I need to go. Help me teach myself so I can be more marketable? :D Thanks in advance, guys!
If you really want to do this without javascript (I don't think there's anything wacky about it nowadays) you could put your "podium components" in invisible <div> elements and place them inside each item in your left-hand gallery. Kind of like this:
<ul id="gallery">
<li id="item1">
Left-hand item 1
<div class="hidden-data">
Your podium component's content here
</div>
</li>
<li id="item2">
Left-hand item 2
<div class="hidden-data">
Another podium component
</div>
</li>
</ul>
Now you can create a :hover style for the list items to make them visible only when the mouse is over it. You won't need an <iframe> for this solution and I think it would be more optimal, except if you have a huge amount of items in your left-hand gallery.
Placing the podium components to the right where you want them could be done by setting their position as absolute. I'll leave it to you to find out how they work (hint: you'll need to set a parent element as position: relative - but not just any parent element, choose wisely!) :)
Edit: Here is a spoiler if you want to see it in action.