The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> rollover with iframe, trying to keep rollover up afterclicking it
milzner
post Nov 7 2006, 01:19 PM
Post #1





Group: Members
Posts: 2
Joined: 7-November 06
Member No.: 735



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 7 2006, 01:28 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,139
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
milzner
post Nov 7 2006, 02:46 PM
Post #3





Group: Members
Posts: 2
Joined: 7-November 06
Member No.: 735



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 7 2006, 04:11 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,139
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamieHarrop
post Nov 7 2006, 04:49 PM
Post #5


Advanced Member
****

Group: WDG Moderators
Posts: 129
Joined: 25-October 06
From: West Yorkshire, UK
Member No.: 570



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 post has been edited by JamieHarrop: Nov 7 2006, 04:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd February 2019 - 12:19 PM