Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

J

John Ortt

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.gif");
javaScript = new
Array("Javascript.gif","JavascriptF.gif","JavascriptP.gif","JavascriptFP.gif
");
projects = new
Array("Projects.gif","ProjectsF.gif","ProjectsP.gif","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.evalImage(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.aboutmemenu()";"top.about_me++"')
parent.Left.document.writeln('onmouseout="top.evalImage(1)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(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.projectsmenu()";
"top.projects_1++"')
parent.Left.document.writeln('onmouseout="top.evalImage(8)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(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>Welcome 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.mainMenu()"; "top.up_1++"')
parent.Left.document.writeln('onmouseout="top.evalImage(98)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(98)"')
parent.Left.document.writeln('onLoad="top.evalImage(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.evalImage(2)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(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.mainMenu()"; "top.up_2++"')
parent.Left.document.writeln('onmouseout="top.evalImage(99)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(99)"')
parent.Left.document.writeln('onLoad="top.evalImage(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_script++"')
parent.Left.document.writeln('onmouseout="top.evalImage(6)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(6)"')
parent.Left.document.writeln('onLoad="top.evalImage(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>
 
M

Michael Winter

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

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 said:
Depending on the users actions the background page rewrites the code for
the relevant frames.
Click to expand...

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".
Click to expand...

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.
Click to expand...

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

[snip]

Mike
 
J

John Ortt

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" <[email protected]>
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>
 
M

Michael Winter

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?
Click to expand...

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.
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript Rollovers not Refreshing on Dynamic Webpages. 0
Javascript Menu not loading images 7
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Final chapter of "Learn PHP, MySQL and JavaScript" 3
Rollovers 0
Working on mobile css menu with plenty of frustration! 2
Please Help? 0
What "might" I be doing wrong with this snippet? 6

Members online

No members online now.
Total: 55 (members: 1, guests: 54)
Robots: 476

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,783
Latest member
RickeyDort

Latest Threads

Top