Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

John Ortt - 30 Nov 2004 10:13 GMT

I appologise for reposting this but I have been trying to find a solution
all week with no avail and I was hoping a repost might help somebody more
knowledgable than myself to spot the message...

I am trying to write a webpage in Javascript. The page loads with three
frames, a top, left and right frame.

Depending on the users actions the background page rewrites the code for the
relevant frames.

The problem I am having is that I have four rollover states for each button.

"Unused", "Unused with mouseover", "Used", and "Used with mouseover".

The "Unused" state has a slightly lighter shadow than the "Used" state and
the mouseover actions place a fingerprint over the icon the user is about to
click.

The problem is that the images do not seem to be loading and refreshing
correctly.

A link to the page in progress can be seen below:

http://www.asgf80.dsl.pipex.com/Java/Index.html

Failing that the original code follows below.

Thankyou for taking the time to read this and any help will be greatly
appreciated.

John Ortt.

Code Follows:
\\\\\\\\\\\\\\\\\\\\\

<html>

<head>
<title>Welcome to John Ortt's Homepage</title>
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Welcome to John Ortt's Internet Site</title>

<SCRIPT language=javascript type=text/javascript>

</SCRIPT>
</head>

<frameset rows="80,*" framespacing="0" border="0" frameborder="NO">
<frame name="Top" noresize>

<frameset cols="250,*" framespacing="0" border="0" frameborder="NO"
onload="mainMenu()">
<frame name="Left" noresize>
<frame src="Right.html" name="Right" noresize>
</frameset>
</frameset>

<noframes>

<body>

</body>

</noframes>
</html>

Reply to this Message

Michael Winter - 30 Nov 2004 12:47 GMT

> I am trying to write a webpage in Javascript. The page loads with three
> frames, a top, left and right frame.

Stop right there. Don't use frames. Looking at your page, they are
certainly not necessary. Moreover, resorting to Javascript to provide
navigation is, well, stupid. Relying on it to provide your entire content,
which is what you seem to be doing, is even worse!

You also have several mark-up errors, both in your actual page, and the
HTML you would write to the frames. See <URL:http://validator.w3.org/>.

> Depending on the users actions the background page rewrites the code for
> the relevant frames.

So why don't you have actual pages?

> The problem I am having is that I have four rollover states for each
> button.
>
> "Unused", "Unused with mouseover", "Used", and "Used with mouseover".

How are these states determined? I imagine this problem disappears
entirely if you stop using frames.

[snip]

> The problem is that the images do not seem to be loading and refreshing
> correctly.

Take a look at <URL:http://www.mlwinter.pwp.blueyonder.co.uk/image-swap/>
for an easier approach to scripted mouse-overs.

[snip]

Mike

Signature

Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Reply to this Message

John Ortt - 30 Nov 2004 13:23 GMT

Thanks Mike, I'll check out the sites you suggest.

How should I write the page without using frames if I want a Title at the
top and a menu on the left hand side?

Thanks again for the feedback, I am still relatively new to all this and any
help is greatly appreciated.

John

----- Original Message -----
From: "Michael Winter" <M.Winter@blueyonder.co.invalid>
Newsgroups: comp.lang.javascript
Sent: Tuesday, November 30, 2004 12:47 PM
Subject: Re: Repost: Javascript Rollovers not Refreshing on Dynamic
Webpages.

<Lots of useful advice snip'd>

Reply to this Message

Michael Winter - 30 Nov 2004 14:03 GMT

> How should I write the page without using frames if I want a Title at
> the top and a menu on the left hand side?

First, mark-up the content semantically. That is, use elements that best
describe, not present, the content. How that's best done depends on your
content and, to some extent, how you want to lay out the document. For
example, you might want to use a DIV to group together some related
elements, and position that DIV somewhere.

Once you've done that, you apply presentation - position, colour, etc. -
through Cascading Style Sheets (CSS - <URL:http://www.w3.org/Style/CSS/>).

At a basic level, you might have:

<h1>Page title</h1>
<ul>
<li><a href="...">Link to another section</a></li>
<li><a href="...">Link to another section</a></li>
<li><a href="...">Link to another section</a></li>
</ul>
<div>
Your content
</div>

Styling that would involve at least:

- Changing the size, and probably style too, of the title.
- Removing the padding and list markers from the list of links, and
- Moving the list to a position on the left of the viewport, and
the content to the right of that.

Be aware that some will argue that navigation links should be last in the
source and moved to the right location by CSS:

<h1>Page title</h1>

<a href="#navigation">Skip to navigation links</a>
<div>
Your content
</div>
<ul id="navigation">
<li><a href="...">Link to another section</a></li>
<li><a href="...">Link to another section</a></li>
<li><a href="...">Link to another section</a></li>
</ul>

The reason is that visitors using screen readers and other accessibility
devices, or visitors using text browsers or browsers that don't support
the CSS used, won't be bombarded by a large list of links at the start of
the page.

The better place to ask about this is in alt.html or
comp.infosystems.www.authoring.html. CSS questions should be directed to
comp.infosystems.www.authoring.stylesheets.

> Thanks again for the feedback, I am still relatively new to all this and
> any help is greatly appreciated.

By the way, it's very misleading to have "Java" as the alt text for your
Javascript image. Javascript is not Java.

[snip]

Good luck,
Mike

Signature

Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / November 2004

Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.