Help - Search - Members - Calendar
Full Version: rollover with iframe
HTMLHelp Forums > Web Authoring > Web Site Functionality
milzner
Hi everybody!
Was wondering if anyone can help me?

I have a little problem with keeping a roller over (mouse up, mouse over ..swap image) up so that the change of color on image link stays a different color when having a certain page viewable in the floating window.

click on ICT services -- how to keep this link dark pink?
http://www.duosin.com/intelium/

thank u kindly ~ m
pandy
Easiest by ditching the iframe. Make three identical pages except for the content that's now framed, of course. Make the tab for the current page pink. Done. smile.gif
milzner
Good point however it would then have to be the same with the other pages for the links on the right?

Sort of destroys principle of iframes where only content in middle changes and no intitial flashing of whole page as it appears.
pandy
With the pages you have it would look exactly the same. They are small and fast and images are cached.

You could do it with JavaScript but you would have to set up a lot of conditions, I think. Someone else may be inclined to help you to write something up. I'd go for no frames and use CSS for the color marking. You don't really need images of text either since the font looks pretty normal.
JamieHarrop
Pandy is correct. You can do this very easily with CSS.

Use a list to display the links and set the hover status. See the horizontal list examples at http://css.maxdesign.com.au/listamatic/ for some help with this.

Then add conditions in the CSS to apply the pink background colour to the list item when a certain page ID is used.

For example:

Add an id to each body tag of all your pages. So the <body> tag in your consulting page would be <body id="ConsultingPage">

Then add an ID to each of your list items in the menu, so your link for the consulting button would look like this:

<li><a href="about.php" id="ConsultingLink">Consulting</a></li>

Then in your CSS, use something like this:

#ConsultingPage #ConsultingLink {
background: #5B97D0;
color: #FFF;
}

That will set the link with the ConsultingLink id to whatever background colour and font colour you like *only* when the link is viewed on the page with the #ConsultingPage ID in <body>

I hope that helps.

If you haven't solved it by tomorrow I'll whip up a working example for you.

As Pandy says, it would be wise to remove the iframes. You can include portions of code easier using PHP or SSI includes.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.