Use onmouseover image as active link

[jonhilde]

...been searching the net and this mystery code comes in CSS, JavaScript, and PHP. I would prefer CSS or JavaScript, which ever one is simplest and doesn't slow down the initial loading of the page. My impression is CSS is best for both these reasons...? But I have yet to find any code.

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?

thanks!

[edited by: tedster at 8:51 pm (utc) on July 5, 2008]

[tedster]

Hello jonhilde, and welcome to the forums.

I'd say the best way to approach this is not to use any javascript for rollover images, but rather to use css hover behavior. You can give the div or table cell that holds the navigational link the default, non-glowing image as a background-image. The foreground can be an anchor tag wrapped around a completely transparent gif or png.

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.

Depedning on your DTD, you may need to tweak the width, height and padding for various elements to get the complete hover effect, but it's totally workable - and it will work for browsers with javascript turned off.

[jonhilde]

thanks

can you provide the code for this? I build my pages in Adobe GoLive and do not know any code myself.

thanks

[tedster]

Sorry to be a strict taskmaster here, but a copy/paste solution cannot work out well for your situation. You really should learn a bit of code. It will also make you a better GoLive user!

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.

[jonhilde]

OK I did it (with Java)

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?

thanks!

[edited by: tedster at 8:53 pm (utc) on July 5, 2008]
[edit reason] sorry, no personal links [/edit]

[tedster]

Cool - I'm glad you got it working.

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?

At any rate, yes, Javascript can also change the content of an iframe, by accessing the id that you assign the iframe and changing its source. But the architecture of this site sounds like it may be complicating things for that approach. Does the url actually change when someone clicks to an internal page?

[jonhilde]

refreshing i guess does not effect frames in a page. What needs to happen is that when refresh is clicked by a user via their browser button, the iFrame needs to know it and load its default page

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]

[tedster]

This sounds like it's related to how the iframe changes its source in the first place. If the url stays the same (so in essence the website is accessed through only one url) but some kind of code has changed the source of the iframe, then that code is the issue.

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:

<body onload="document.getElementById('explain').src='billybob.html'">

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.