Javascript Menu not loading images

J

John Ortt

Hi Everyone,

I have created a Javascript menu for my site which uses frames. The first
stage loads fine but I want two drill down menus ("About Me Menu" and
"Projects Menu"). The pages load fine, but the images aren't displayed,
instead the alt text is shown. The images come up after you "Mouse Over"
them but not before......can anybody spot any errors in my code which could
be doing this please. For info, I have 4 images for each button, to take
into acount whether the button had been used and to give a mouse-over image
for each state. I have also deleted the code for items 3-5 as they are
commercially sensitive.

Thanks in Advance,

John



Code Follows:
-----------------



<html>

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

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Welcome to John'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("About Me.gif","About MeF.gif","About MeP.gif","About
MeFP.gif");
myCv = new Array("My CV.gif","My CVF.gif","My CVP.gif","My CVFP.gif");
javaScript = new
Array("Javascript.gif","JavascriptF.gif","JavascriptP.gif","JavascriptFP.gif
");
photos = new
Array("Photos.gif","PhotosF.gif","PhotosP.gif","UPhotosFP.gif");
projects = new
Array("Projects.gif","ProjectsF.gif","ProjectsP.gif","ProjectsFP.gif");
wallPapers = new
Array("Wallpaper.gif","WallpaperF.gif","WallpaperP.gif","WallpaperFP.gif");

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

}

else

{

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

}


function evalRollon(item)

{
if (item==98)



if (up_1==0)

{ Left.up.src=up[1] }
else
{ Left.up.src=up[3] }
}

if (item==99)



if (up_2==0)

{ Left.up.src=up[1] }
else
{ Left.up.src=up[3] }
}


if (item==1)

{
if (about_me==0)

{ Left.about.src=aboutMe[1] }
else
{ Left.about.src=aboutMe[3] }
}

if (item==2)



if (my_cv==0)

{ Left.cv.src=myCv[1] }
else
{ Left.cv.src=myCv[3] }
}

if (item==6)



if (java_script==0)

{ Left.java.src=javaScript[1] }
else
{ Left.java.src=javaScript[3] }
}

if (item==7)



if (photos_1==0)

{ Left.photos.src=photos[1] }
else
{ Left.photos.src=photos[3] }
}

if (item==8)



if (projects_1==0)

{ Left.projects.src=projects[1] }
else
{ Left.projects.src=projects[3] }
}

if (item==9)



if (wall_papers==0)

{ Left.wallpapers.src=wallPapers[1] }
else
{ Left.wallpapers.src=wallPapers[3] }
}


}


function evalImage(item)

{
if (item==98)



if (up_1==0)

{ Left.up.src=up[0] }
else
{ Left.up.src=up[2] }
}

if (item==99)



if (up_2==0)

{ Left.up.src=up[0] }
else
{ Left.up.src=up[2] }
}


if (item==1)

{
if (about_me==0)

{ Left.about.src=aboutMe[0] }
else
{ Left.about.src=aboutMe[2] }
}

if (item==2)



if (my_cv==0)

{ Left.cv.src=myCv[0] }
else
{ Left.cv.src=myCv[2] }
}


if (item==6)



if (java_script==0)

{ Left.java.src=javaScript[0] }
else
{ Left.java.src=javaScript[2] }
}

if (item==7)



if (photos_1==0)

{ Left.photos.src=photos[0] }
else
{ Left.photos.src=photos[2] }
}

if (item==8)



if (projects_1==0)

{ Left.projects.src=projects[0] }
else
{ Left.projects.src=projects[2] }
}

if (item==9)



if (wall_papers==0)

{ Left.wallpapers.src=wallPapers[0] }
else
{ Left.wallpapers.src=wallPapers[2] }
}


}

function uponecount()
{++up_1}

function uptwocount()
{++up_2}

function amcount()
{++about_me}

function cvcount()
{++my_cv}

function javacount()
{++java_script}

function photocount()
{++photos_1}

function projectcount()
{++projects_1}

function wallcount()
{++wall_paper}

function mainMenu()




{
parent.Left.document.close()
parent.Left.document.open()
parent.Left.document.writeln('<html><head
onLoad="top.evalImage(1)","top.evalImage(8)">')
parent.Left.document.writeln("<TITLE>Welcome to Johns 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.amcount()"')
parent.Left.document.writeln('onmouseout="top.evalImage(1)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(1)">')
parent.Left.document.writeln('<img src="About Me.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.projectcount()
"')
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>")
}

function aboutmemenu()

{
parent.Left.document.close()
parent.Left.document.open()
parent.Left.document.writeln('<html><head
onLoad="top.evalImage(98)","top.evalImage(2)","top.evalImage(4)">')
parent.Left.document.writeln("<TITLE>Welcome to Johns 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.uponecount()"')
parent.Left.document.writeln('onmouseout="top.evalImage(98)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(98)"')
parent.Left.document.writeln('onLoad="top.evalImage(98)" return="false">')
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.cvcount()"')
parent.Left.document.writeln('onmouseout="top.evalImage(2)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(2)"')
parent.Left.document.writeln('onLoad=top.evalImage(2) return="false">')
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>")
}


up = new Array("Up.gif","UpF.gif","UpP.gif","UpFP.gif");
aboutMe = new Array("About Me.gif","About MeF.gif","About MeP.gif","About
MeFP.gif");
myCv = new Array("My CV.gif","My CVF.gif","My CVP.gif","My CVFP.gif");
javaScript = new
Array("Javascript.gif","JavascriptF.gif","JavascriptP.gif","JavascriptFP.gif
");
photos = new
Array("Photos.gif","PhotosF.gif","PhotosP.gif","UPhotosFP.gif");
projects = new
Array("Projects.gif","ProjectsF.gif","ProjectsP.gif","ProjectsFP.gif");
wallPapers = new
Array("Wallpaper.gif","WallpaperF.gif","WallpaperP.gif","WallpaperFP.gif");


function projectsmenu()

{
parent.Left.document.close()
parent.Left.document.open()
parent.Left.document.writeln("<html><head>")
parent.Left.document.writeln("<TITLE>Welcome to Johns 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.uptwocount()"')
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.javacount()"')
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><P><A href="Photos.html" target=Right')
parent.Left.document.writeln('onclick="top.photocount()"')
parent.Left.document.writeln('onmouseout="top.evalImage(7)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(7)"')
parent.Left.document.writeln('onLoad="top.evalImage(7)" return="false">')
parent.Left.document.writeln('<img src="top.evalImage(7)" alt="Java"
width=250 height=50 border=0 name="photos"></A>')
parent.Left.document.writeln('</P><P><A href="wallpapers.html"
target=Right')
parent.Left.document.writeln('onclick="top.wallcount()"')
parent.Left.document.writeln('onmouseout="top.evalImage(9)"')
parent.Left.document.writeln('onmouseover="top.evalRollon(9)"')
parent.Left.document.writeln('onLoad="top.evalImage(9)" return="false">')
parent.Left.document.writeln('<img src="top.evalImage(9)" alt="Wallpapers"
width=250 height=50 border=0 name="wallpapers"></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 src="Top.html" 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>
 
J

John Ortt

Ok, I've looked at what's happening and I think I have narrowed down the
problem. The main "frames.html" creates the left-hand frame with the menu
on it. The first menu loads correctly because the page is being loades from
scratch, but the second page doesn't. I can't spot a difference in the page
code (copied below for info) so I can only assume some sort of refresh is
needed.

If anybody could tell me if I'm on the right lines I'd really appreciate it,

Thanks,

John

Html Follows:
----------------

The following code works:

<html><head onLoad="top.evalImage(1)","top.evalImage(8)">
<TITLE>Welcome to John Ortts Internet Page - Contents Menu</TITLE>
</head><body bgcolour="white">
<P><A target=Left
onclick="top.aboutmemenu();top.amcount()"
onmouseout="top.evalImage(1)"
onmouseover="top.evalRollon(1)">
<img src="About Me.gif" alt="About Me" width=250 height=50 border=0
name="about"></A>
</P><P><A href="top.projects()" target=Left
onclick="top.projectsmenu();top.projectcount()"
onmouseout="top.evalImage(8)"
onmouseover="top.evalRollon(8)">
<img src="Projects.gif" alt="Projects" width=250 height=50 border=0
name="projects"></A>
</P>
</body></html>


This code doesn't buit is essentially the same:

<html><head
onLoad="top.evalImage(98)","top.evalImage(2)","top.evalImage(4)">
<TITLE>Welcome to John Ortts Internet Page - About Me Menu</TITLE>
</head><body bgcolour="white">
<P><A target=Left
onclick="top.mainMenu();top.uponecount()"
onmouseout="top.evalImage(98)"
onmouseover="top.evalRollon(98)"
onLoad="top.evalImage(98)" return="false">
<img src=top.evalImage(98) alt="Up" width=250 height=50 border=0
name="up"></A>
</P><P><A href="mycv.html" target=Right
onclick="top.cvcount()"
onmouseout="top.evalImage(2)"
onmouseover="top.evalRollon(2)"
onLoad=top.evalImage(2) return="false">
<img src="top.evalImage(2)" alt="My CV" width=250 height=50 border=0
name="cv"></A>
</P>
</body></html>
 
J

John Ortt

Not when that url is on an Intranet,

(and I don't have webspace outside the company).
 
L

Lee

John Ortt said:
This code doesn't buit is essentially the same:
Click to expand...

Since the difference is that the images don't load,
the obvious place to focus is the "src" attributes
of the <img> tags.

In the following (non-working) code, you're trying
to assign Javascript variables as src attributes.
You can't mix Javascript and HTML like that:
 
K

kaeli

Not when that url is on an Intranet,

(and I don't have webspace outside the company).
Click to expand...

Geocities (yahoo) offers free webspace that is mostly useless but works
great for this sort of thing.

--
 
L

Lee

John Ortt said:
I have created a Javascript menu for my site which uses frames.
Click to expand...

You could cut your code about in half by using "switch"
statements in place of the "if"s. There are even better
ways to do this, that don't involve passing numeric codes.

Please get rid of the series of functions that each increment
a single global variable.

Your call to the function:
function uponecount()
{++up_1}

can be replaced by:
top.up_1++
 
J

John Ortt

Thanks for the info Andrew.

I didn't know there were places offering free webspace. I will try to put
it on the GeoCities website later on in the week and repost.

I will also try to include some of the tips Lee gave me to shorten the code.

The site is essentially a personnal homepage for me on the company intranet
(They have an area set aside for the employees).

It is intended to tell people what I do and how I do it and gives links to
the department.

For this reason it isn't business critical and there is no way the company
are going to release funding for me to develop it :(

But I would like to get it working if possible just to improve my knowledge
of the subject.

Thanks again,

John


Andrew Thompson said:
(and I don't have webspace outside the company).
Click to expand...

GeoCities.. (It's a big internet)

Alternatively, if 'the company' is serious about
solving the problem, why are they not prepared to
throw a couple of bucks out for getting a short
term 'testing' site?

[ And if the company is *not* serious about
solving the problem, it begs the question of
why you expect random strangers to care. ]

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Click to expand...
 
J

John Ortt

Thanks Andrew,

I haven't looked at the page you linked yet but I will do so tonight.

Also, I didn't fully understand Lee's post on getting rid of the "If"
statements so until I do, I have just used a tidier "if" format which I
found on "Webmonkey".

I have reposted the tidier code allong with a geocities site in the
newsgroup.

Thanks for your time once again,

John Ortt
 

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

Flip-Cards with Local Images 1
Working on mobile css menu with plenty of frustration! 2
Javascript Rollovers not Refreshing on Dynamic Webpages. 0
Image not changing between "mute" & "un-mute" images. 5
How can I get my menu inside of a menu to function properly? 1
Repost: Javascript Rollovers not Refreshing on Dynamic Webpages. 3
Final chapter of "Learn PHP, MySQL and JavaScript" 3
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 62 (members: 3, guests: 59)
Robots: 462

Forum statistics

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

Latest Threads

Top