Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: open
I have rollovers working good for the page. When the mouse is over each of the four links the images swap to make the words glow, emphasizing that it is a link.
Now, I need the same image that shows each word glowing to always be on depending on which link is currently active. If the HOME link is active, then the HOME glowing image should be shown until one of the other links are active, like ABOUT or FAQS or CONTACT. All the links are targeted to the same iFrame, so there can only be one active link at a time (or only one glowing link at a time even when your mouse is off all the links). This helps the user identify which link they are viewing.
here is a link to the actual page:
<Sorry, no personal links>
so my code for rollovers is great, what code do i use to get the active link to use the same glowing image that the onmouseover uses, for as long as it is active?
[edited by: tedster at 8:51 pm (utc) on July 5, 2008]
Then the hover behavior for that anchor tag can use the glowing version of the image as a background for the anchor tag - it will hide the div background when it's activated.
On your internal pages, the menu item for the "active" page will not be a link, since you don't want a page to link to itself - that's poor usability. So in this case you can just [place the glowing image insode the div and not link it.
Our CSS forum has some discussions about this very issue. Here's a recent one:
Rollover images by CSS [webmasterworld.com]
You can also find a lot more information through Site Search [webmasterworld.com] here. Please, do give coding a try - it's very cool and it's not hard to begin (although true mastery takes some work). You may soon say, as supahoopsa67 did in the linked thread above, "I am fast becoming a complete css convert!"
If you really have no stomach for coding, then you can ask GoLive questions in our WYSIWYG Editors [webmasterworld.com] where others who use GoLive regularly may have some tips for you.
there's only one glitch, when you're looking at any link besides HOME and you refresh the page, the glowing link switches to HOME, like it should, but the iFrame content does not switch to HOME.
HOWEVER, on a reload of the page, both the iFrame content and the glowing word switch back to HOME, like they should.
Is there code to tell the browser to reload the page when refresh is clicked so that both refresh and reload behave like a reload?
[edited by: tedster at 8:53 pm (utc) on July 5, 2008]
[edit reason] sorry, no personal links [/edit]
I'm not sure I get the entire site structure here. If someone has already clicked to a different page, then a reload/refresh should actually reload the page they are on, rather than the home page. What am I missing here?
either that or tell the browser to go re-fetch the page from the server when a user clicks the browser refresh button, that would load the iFrame's default page.
[edited by: encyclo at 12:48 am (utc) on July 6, 2008]
One key to thinking through this tangle is that an iframe contains a different url. Even though that content may be displayed on what we commonly call the "same page", technically a page with any kind of frame is a kind of mash-up coded from more than one url.
So first let's assume you've given the iframe identical id and name attributes - let's say you have this in the source code of the parent page: <iframe id="explain" name="explain" src="billybob.html">
Then you could add an onload function to the <body> tag of the parent page to make sure that billybob.html is loaded in the iframe. That might go something like this:
I haven't tested, but I'm pretty sure that code will do what you need - as long as the document within the iframe can only be changed by clicking on a regular anchor tag with a target attribute.