Javascript Menu not loading images

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • John Ortt

    Javascript Menu not loading images

    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>Welcom e to John's Homepage</title>
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=is o-8859-1">
    <title>Welcom e to John's Internet Site</title>

    <SCRIPT language=javasc ript type=text/javascript>
    <!-- Hide Me

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

    if (document.image s)

    {

    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("Javascri pt.gif","Javasc riptF.gif","Jav ascriptP.gif"," JavascriptFP.gi f
    ");
    photos = new
    Array("Photos.g if","PhotosF.gi f","PhotosP.gif ","UPhotosFP.gi f");
    projects = new
    Array("Projects .gif","Projects F.gif","Project sP.gif","Projec tsFP.gif");
    wallPapers = new
    Array("Wallpape r.gif","Wallpap erF.gif","Wallp aperP.gif","Wal lpaperFP.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.aboutm e = "";
    myCV = "";
    document.myCV = "";
    javaScript= "";
    document.javaSc ript = "";
    photos = "";
    document.photos = "";
    projects = "";
    document.projec ts = "";
    wallPapers = "";
    document.wallPa pers = "";

    }


    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=myC v[1] }
    else
    { Left.cv.src=myC v[3] }
    }

    if (item==6)



    if (java_script==0 )

    { Left.java.src=j avaScript[1] }
    else
    { Left.java.src=j avaScript[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.s rc=projects[1] }
    else
    { Left.projects.s rc=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=myC v[0] }
    else
    { Left.cv.src=myC v[2] }
    }


    if (item==6)



    if (java_script==0 )

    { Left.java.src=j avaScript[0] }
    else
    { Left.java.src=j avaScript[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.s rc=projects[0] }
    else
    { Left.projects.s rc=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.doc ument.close()
    parent.Left.doc ument.open()
    parent.Left.doc ument.writeln(' <html><head
    onLoad="top.eva lImage(1)","top .evalImage(8)"> ')
    parent.Left.doc ument.writeln(" <TITLE>Welcom e to Johns Internet Page -
    Contents Menu</TITLE>")
    parent.Left.doc ument.writeln(' </head><body bgcolour="white ">')
    parent.Left.doc ument.writeln(' <P><A target=Left')
    parent.Left.doc ument.writeln(' onclick="top.ab outmemenu();top .amcount()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(1)"' )
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(1) ">')
    parent.Left.doc ument.writeln(' <img src="About Me.gif" alt="About Me"
    width=250 height=50 border=0 name="about"></A>')
    parent.Left.doc ument.writeln(' </P><P><A href="top.proje cts()"
    target=Left')

    parent.Left.doc ument.writeln(' onclick="top.pr ojectsmenu();to p.projectcount( )
    "')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(8)"' )
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(8) ">')
    parent.Left.doc ument.writeln(' <img src="Projects.g if" alt="Projects"
    width=250 height=50 border=0 name="projects" ></A>')
    parent.Left.doc ument.writeln(' </P>')
    parent.Left.doc ument.writeln(" </body></html>")
    }

    function aboutmemenu()

    {
    parent.Left.doc ument.close()
    parent.Left.doc ument.open()
    parent.Left.doc ument.writeln(' <html><head
    onLoad="top.eva lImage(98)","to p.evalImage(2)" ,"top.evalImage (4)">')
    parent.Left.doc ument.writeln(" <TITLE>Welcom e to Johns Internet Page - About
    Me Menu</TITLE>")
    parent.Left.doc ument.writeln(' </head><body bgcolour="white ">')
    parent.Left.doc ument.writeln(' <P><A target=Left')
    parent.Left.doc ument.writeln(' onclick="top.ma inMenu();top.up onecount()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(98)" ')
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(98 )"')
    parent.Left.doc ument.writeln(' onLoad="top.eva lImage(98)" return="false"> ')
    parent.Left.doc ument.writeln(' <img src=top.evalIma ge(98) alt="Up" width=250
    height=50 border=0 name="up"></A>')
    parent.Left.doc ument.writeln(' </P><P><A href="mycv.html " target=Right')
    parent.Left.doc ument.writeln(' onclick="top.cv count()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(2)"' )
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(2) "')
    parent.Left.doc ument.writeln(' onLoad=top.eval Image(2) return="false"> ')
    parent.Left.doc ument.writeln(' <img src="top.evalIm age(2)" alt="My CV"
    width=250 height=50 border=0 name="cv"></A>')

    parent.Left.doc ument.writeln(' </P>')
    parent.Left.doc ument.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("Javascri pt.gif","Javasc riptF.gif","Jav ascriptP.gif"," JavascriptFP.gi f
    ");
    photos = new
    Array("Photos.g if","PhotosF.gi f","PhotosP.gif ","UPhotosFP.gi f");
    projects = new
    Array("Projects .gif","Projects F.gif","Project sP.gif","Projec tsFP.gif");
    wallPapers = new
    Array("Wallpape r.gif","Wallpap erF.gif","Wallp aperP.gif","Wal lpaperFP.gif");


    function projectsmenu()

    {
    parent.Left.doc ument.close()
    parent.Left.doc ument.open()
    parent.Left.doc ument.writeln(" <html><head>" )
    parent.Left.doc ument.writeln(" <TITLE>Welcom e to Johns Internet Page - About
    Me Menu</TITLE>")
    parent.Left.doc ument.writeln(' </head><body bgcolour="white ">')
    parent.Left.doc ument.writeln(' <P><A target=Left')
    parent.Left.doc ument.writeln(' onclick="top.ma inMenu();top.up twocount()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(99)" ')
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(99 )"')
    parent.Left.doc ument.writeln(' onLoad="top.eva lImage(99)" return="false"> ')
    parent.Left.doc ument.writeln(' <img src="top.evalIm age(99)" alt="Up"
    width=250 height=50 border=0 name="up"></A>')
    parent.Left.doc ument.writeln(' </P><P><A href="javascrip t.html"
    target=Right')
    parent.Left.doc ument.writeln(' onclick="top.ja vacount()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(6)"' )
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(6) "')
    parent.Left.doc ument.writeln(' onLoad="top.eva lImage(6)" return="false"> ')
    parent.Left.doc ument.writeln(' <img src="top.evalIm age(6)" alt="Java"
    width=250 height=50 border=0 name="java"></A>')
    parent.Left.doc ument.writeln(' </P><P><A href="Photos.ht ml" target=Right')
    parent.Left.doc ument.writeln(' onclick="top.ph otocount()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(7)"' )
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(7) "')
    parent.Left.doc ument.writeln(' onLoad="top.eva lImage(7)" return="false"> ')
    parent.Left.doc ument.writeln(' <img src="top.evalIm age(7)" alt="Java"
    width=250 height=50 border=0 name="photos"></A>')
    parent.Left.doc ument.writeln(' </P><P><A href="wallpaper s.html"
    target=Right')
    parent.Left.doc ument.writeln(' onclick="top.wa llcount()"')
    parent.Left.doc ument.writeln(' onmouseout="top .evalImage(9)"' )
    parent.Left.doc ument.writeln(' onmouseover="to p.evalRollon(9) "')
    parent.Left.doc ument.writeln(' onLoad="top.eva lImage(9)" return="false"> ')
    parent.Left.doc ument.writeln(' <img src="top.evalIm age(9)" alt="Wallpapers "
    width=250 height=50 border=0 name="wallpaper s"></A>')
    parent.Left.doc ument.writeln(' </P>')
    parent.Left.doc ument.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="mainMen u()">
    <frame name="Left" noresize>
    <frame src="Right.html " name="Right" noresize>
    </frameset>
    </frameset>

    <noframes>

    <body>

    </body>

    </noframes>
    </html>



  • John Ortt

    #2
    Re: Javascript Menu not loading images

    Ok, I've looked at what's happening and I think I have narrowed down the
    problem. The main "frames.htm l" 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.eva lImage(1)","top .evalImage(8)">
    <TITLE>Welcom e to John Ortts Internet Page - Contents Menu</TITLE>
    </head><body bgcolour="white ">
    <P><A target=Left
    onclick="top.ab outmemenu();top .amcount()"
    onmouseout="top .evalImage(1)"
    onmouseover="to p.evalRollon(1) ">
    <img src="About Me.gif" alt="About Me" width=250 height=50 border=0
    name="about"></A>
    </P><P><A href="top.proje cts()" target=Left
    onclick="top.pr ojectsmenu();to p.projectcount( )"
    onmouseout="top .evalImage(8)"
    onmouseover="to p.evalRollon(8) ">
    <img src="Projects.g if" 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.eva lImage(98)","to p.evalImage(2)" ,"top.evalImage (4)">
    <TITLE>Welcom e to John Ortts Internet Page - About Me Menu</TITLE>
    </head><body bgcolour="white ">
    <P><A target=Left
    onclick="top.ma inMenu();top.up onecount()"
    onmouseout="top .evalImage(98)"
    onmouseover="to p.evalRollon(98 )"
    onLoad="top.eva lImage(98)" return="false">
    <img src=top.evalIma ge(98) alt="Up" width=250 height=50 border=0
    name="up"></A>
    </P><P><A href="mycv.html " target=Right
    onclick="top.cv count()"
    onmouseout="top .evalImage(2)"
    onmouseover="to p.evalRollon(2) "
    onLoad=top.eval Image(2) return="false">
    <img src="top.evalIm age(2)" alt="My CV" width=250 height=50 border=0
    name="cv"></A>
    </P>
    </body></html>




    Comment

    • Andrew Thompson

      #3
      Re: Javascript Menu not loading images

      On Fri, 16 Jul 2004 10:35:56 +0100, John Ortt wrote:
      [color=blue]
      > Code Follows:[/color]

      You do realize that a single URL would have
      been more effective and over 400 lines
      shorter than the post you made?

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

      Comment

      • John Ortt

        #4
        Re: Javascript Menu not loading images

        Not when that url is on an Intranet,

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



        "Andrew Thompson" <SeeMySites@www .invalid> wrote in message
        news:32iyscpq1l sr.ct3ima2lfvgc $.dlg@40tude.ne t...[color=blue]
        > On Fri, 16 Jul 2004 10:35:56 +0100, John Ortt wrote:
        >[color=green]
        > > Code Follows:[/color]
        >
        > You do realize that a single URL would have
        > been more effective and over 400 lines
        > shorter than the post you made?
        >
        > --
        > Andrew Thompson
        > http://www.PhySci.org/ Open-source software suite
        > http://www.PhySci.org/codes/ Web & IT Help
        > http://www.1point1C.org/ Science & Technology[/color]


        Comment

        • Andrew Thompson

          #5
          Re: Javascript Menu not loading images

          On Fri, 16 Jul 2004 16:36:30 +0100, John Ortt wrote:
          [color=blue]
          > (and I don't have webspace outside the company).[/color]

          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

          Comment

          • Lee

            #6
            Re: Javascript Menu not loading images

            John Ortt said:
            [color=blue]
            >This code doesn't buit is essentially the same:[/color]

            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:

            [color=blue]
            ><html><head
            >onLoad="top.ev alImage(98)","t op.evalImage(2) ","top.evalImag e(4)">
            ><TITLE>Welco me to John Ortts Internet Page - About Me Menu</TITLE>
            ></head><body bgcolour="white ">
            ><P><A target=Left
            >onclick="top.m ainMenu();top.u ponecount()"
            >onmouseout="to p.evalImage(98) "
            >onmouseover="t op.evalRollon(9 8)"
            >onLoad="top.ev alImage(98)" return="false">
            ><img src=top.evalIma ge(98) alt="Up" width=250 height=50 border=0
            >name="up"></A>
            ></P><P><A href="mycv.html " target=Right
            >onclick="top.c vcount()"
            >onmouseout="to p.evalImage(2)"
            >onmouseover="t op.evalRollon(2 )"
            >onLoad=top.eva lImage(2) return="false">
            ><img src="top.evalIm age(2)" alt="My CV" width=250 height=50 border=0
            >name="cv"></A>
            ></P>
            ></body></html>[/color]

            Comment

            • kaeli

              #7
              Re: Javascript Menu not loading images

              In article <40f7f488$1_1@b aen1673807.gree nlnk.net>,
              JohnOrtt@Idontw antspamsonoretu rnaddress.com enlightened us with...[color=blue]
              > Not when that url is on an Intranet,
              >
              > (and I don't have webspace outside the company).[/color]

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

              --
              --
              ~kaeli~
              Acupuncture is a jab well done.



              Comment

              • Lee

                #8
                Re: Javascript Menu not loading images

                John Ortt said:
                [color=blue]
                >I have created a Javascript menu for my site which uses frames.[/color]

                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++

                Comment

                • John Ortt

                  #9
                  Re: Javascript Menu not loading images

                  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" <SeeMySites@www .invalid> wrote in message
                  news:f1q6i9jh7e p7.1k7a26p1f6ep k$.dlg@40tude.n et...[color=blue]
                  > On Fri, 16 Jul 2004 16:36:30 +0100, John Ortt wrote:
                  >[color=green]
                  > > (and I don't have webspace outside the company).[/color]
                  >
                  > 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[/color]


                  Comment

                  • Andrew Thompson

                    #10
                    Re: Javascript Menu not loading images

                    On Mon, 19 Jul 2004 11:15:09 +0100, John Ortt wrote:
                    [color=blue]
                    > 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.[/color]

                    That is a good idea. I wrote a page on just how
                    much it can help to shorten and simplify code.

                    The article is more focused on Java (a different
                    language to JS) but I feel you might find some
                    valuable tips in it in any case..
                    <http://www.physci.org/codes/sscce.jsp>
                    [color=blue]
                    > But I would like to get it working if possible
                    > just to improve my knowledge of the subject.[/color]

                    People who are trying to improve their knowledge
                    are very welcome on this group, especially if
                    they have displayed that they can benefit from
                    the advice they receive.

                    Continue reading the froup and you may spot the
                    answer to your problem, but if you simplify your
                    code and still do not get the problem sorted, post
                    it to GeoCities and make a new post on this thread
                    with the URL.

                    I am confident someone will be able to spot the error.

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

                    Comment

                    • John Ortt

                      #11
                      Re: Javascript Menu not loading images

                      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




                      "Andrew Thompson" <SeeMySites@www .invalid> wrote in message
                      news:vpiuv4bdcv 6a$.19w08ea51jg so$.dlg@40tude. net...[color=blue]
                      > On Mon, 19 Jul 2004 11:15:09 +0100, John Ortt wrote:
                      >[color=green]
                      > > I didn't know there were places offering free webspace. I will try to[/color][/color]
                      put[color=blue][color=green]
                      > > 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[/color][/color]
                      code.[color=blue]
                      >
                      > That is a good idea. I wrote a page on just how
                      > much it can help to shorten and simplify code.
                      >
                      > The article is more focused on Java (a different
                      > language to JS) but I feel you might find some
                      > valuable tips in it in any case..
                      > <http://www.physci.org/codes/sscce.jsp>
                      >[color=green]
                      > > But I would like to get it working if possible
                      > > just to improve my knowledge of the subject.[/color]
                      >
                      > People who are trying to improve their knowledge
                      > are very welcome on this group, especially if
                      > they have displayed that they can benefit from
                      > the advice they receive.
                      >
                      > Continue reading the froup and you may spot the
                      > answer to your problem, but if you simplify your
                      > code and still do not get the problem sorted, post
                      > it to GeoCities and make a new post on this thread
                      > with the URL.
                      >
                      > I am confident someone will be able to spot the error.
                      >
                      > --
                      > Andrew Thompson
                      > http://www.PhySci.org/ Open-source software suite
                      > http://www.PhySci.org/codes/ Web & IT Help
                      > http://www.1point1C.org/ Science & Technology[/color]


                      Comment

                      Working...