By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,812 Members | 856 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,812 IT Pros & Developers. It's quick & easy.

Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

P: n/a
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>
<!-- Hide Me

if (top.location != self.location) {top.location = self.location}

if (document.images)

{

up = new Array("Up.gif","UpF.gif","UpP.gif","UpFP.gif");
aboutMe = new
Array("AboutMe.gif","AboutMeF.gif","AboutMeP.gif", "AboutMeFP.gif");
myCv = new Array("MyCV.gif","MyCVF.gif","MyCVP.gif","MyCVFP.g if");
javaScript = new
Array("Javascript.gif","JavascriptF.gif","Javascri ptP.gif","JavascriptFP.gif
");
projects = new
Array("Projects.gif","ProjectsF.gif","ProjectsP.gi f","ProjectsFP.gif");

var up_1=0
var up_2=0
var about_me=0
var my_cv=0
var java_script=0
var projects_1=0

}

else

{

up = "";
document.up = "";
aboutMe = "";
document.aboutme = "";
myCV = "";
document.myCV = "";
javaScript= "";
document.javaScript = "";
projects = "";
document.projects = "";

}
function evalRollon(item)

{
if (item==98) Left.up.src = (up_1==0) ? up[1] : up[3]
if (item==99) Left.up.src = (up_2==0) ? up[1] : up[3]
if (item==1) Left.about.src = (about_me==0) ? aboutMe[1] : aboutMe[3]
if (item==2) Left.cv.src = (my_cv==0) ? myCv[1] : myCv[3]
if (item==6) Left.java.src = (java_script==0) ? javaScript[1] :
javaScript[3]
if (item==8) Left.projects.src = (projects_1==0) ? projects[1] :
projects[3]
}

function evalImage(item)

{
if (item==98) Left.up.src = (up_1==0) ? up[0] : up[2]
if (item==99) Left.up.src = (up_2==0) ? up[0] : up[2]
if (item==1) Left.about.src = (about_me==0) ? aboutMe[0] : aboutMe[2]
if (item==2) Left.cv.src = (my_cv==0) ? myCv[0] : myCv[2]
if (item==6) Left.java.src = (java_script==0) ? javaScript[0] :
javaScript[2]
if (item==8) Left.projects.src = (projects_1==0) ? projects[0] :
projects[2]
}
function mainMenu()

{
parent.Left.document.close()
parent.Left.document.open()
parent.Left.document.writeln('<html><head
onLoad="top.evalImage(1)","top.evalImage(8),"top.e valImage(98)">')
parent.Left.document.writeln("<TITLE>Welcome to John Ortts Internet Page -
Contents Menu</TITLE>")
parent.Left.document.writeln('</head><body bgcolour="white">')
parent.Left.document.writeln('<P><A target=Left')

parent.Left.document.writeln('onclick="top.aboutme menu()";"top.about_me++"')
parent.Left.document.writeln('onmouseout="top.eval Image(1)"')
parent.Left.document.writeln('onmouseover="top.eva lRollon(1)">')
parent.Left.document.writeln('<img src="AboutMe.gif" alt="About Me"
width=250 height=50 border=0 name="about"></A>')
parent.Left.document.writeln('</P><P><A href="top.projects()"
target=Left')
parent.Left.document.writeln('onclick="top.project smenu()";
"top.projects_1++"')
parent.Left.document.writeln('onmouseout="top.eval Image(8)"')
parent.Left.document.writeln('onmouseover="top.eva lRollon(8)">')
parent.Left.document.writeln('<img src="Projects.gif" alt="Projects"
width=250 height=50 border=0 name="projects"></A>')
parent.Left.document.writeln('</P>')
parent.Left.document.writeln("</body></html>")

parent.Top.document.close()
parent.Top.document.open()
parent.Top.document.writeln('<html><head><TITLE>We lcome to Johns Internet
Page</TITLE></head>')
parent.Top.document.writeln('<body bgcolour="white"><p>Title Goes
Here</p></body></html>')

}
function aboutmemenu()

{
parent.Left.document.close()
parent.Left.document.open()
parent.Left.document.writeln('<html><head
onLoad="top.evalImage(98)","top.evalImage(2)">')
parent.Left.document.writeln("<TITLE>Welcome to John Ortts Internet Page -
About Me Menu</TITLE>")
parent.Left.document.writeln('</head><body bgcolour="white">')
parent.Left.document.writeln('<P><A target=Left')
parent.Left.document.writeln('onclick="top.mainMen u()"; "top.up_1++"')
parent.Left.document.writeln('onmouseout="top.eval Image(98)"')
parent.Left.document.writeln('onmouseover="top.eva lRollon(98)"')
parent.Left.document.writeln('onLoad="top.evalImag e(98)">')
parent.Left.document.writeln('<img src=top.evalImage(98) alt="Up" width=250
height=50 border=0 name="up"></A>')
parent.Left.document.writeln('</P><P><A href="mycv.html" target=Right')
parent.Left.document.writeln('onclick="top.my_cv++ "')
parent.Left.document.writeln('onmouseout="top.eval Image(2)"')
parent.Left.document.writeln('onmouseover="top.eva lRollon(2)"')
parent.Left.document.writeln('onLoad=top.evalImage (2)>')
parent.Left.document.writeln('<img src="top.evalImage(2)" alt="My CV"
width=250 height=50 border=0 name="cv"></A>')
parent.Left.document.writeln('</P>')
parent.Left.document.writeln("</body></html>")
}

function projectsmenu()

{
parent.Left.document.close()
parent.Left.document.open()
parent.Left.document.writeln("<html><head>")
parent.Left.document.writeln("<TITLE>Welcome to John Ortts Internet Page -
About Me Menu</TITLE>")
parent.Left.document.writeln('</head><body bgcolour="white">')
parent.Left.document.writeln('<P><A target=Left')
parent.Left.document.writeln('onclick="top.mainMen u()"; "top.up_2++"')
parent.Left.document.writeln('onmouseout="top.eval Image(99)"')
parent.Left.document.writeln('onmouseover="top.eva lRollon(99)"')
parent.Left.document.writeln('onLoad="top.evalImag e(99)" return="false">')
parent.Left.document.writeln('<img src="top.evalImage(99)" alt="Up"
width=250 height=50 border=0 name="up"></A>')
parent.Left.document.writeln('</P><P><A href="javascript.html"
target=Right')
parent.Left.document.writeln('onclick="top.java_sc ript++"')
parent.Left.document.writeln('onmouseout="top.eval Image(6)"')
parent.Left.document.writeln('onmouseover="top.eva lRollon(6)"')
parent.Left.document.writeln('onLoad="top.evalImag e(6)" return="false">')
parent.Left.document.writeln('<img src="top.evalImage(6)" alt="Java"
width=250 height=50 border=0 name="java"></A>')
parent.Left.document.writeln('</P>')
parent.Left.document.writeln("</body></html>")
}

// Stop Hiding Me. -->
</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>

Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Tue, 30 Nov 2004 10:13:36 -0000, John Ortt
<Jo******@Idontwantspamsonoreturnaddress.com> wrote:
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2

P: n/a
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.******@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>
Jul 23 '05 #3

P: n/a
On Tue, 30 Nov 2004 13:23:50 -0000, John Ortt
<Jo******@Idontwantspamsonoreturnaddress.com> wrote:
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>
<!-- The link below would be hidden for normal visitors, --
-- but rendered for disabled users and text browsers. -->
<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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.