Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • John Ortt
    #1

    Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

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

    <head>
    <meta http-equiv="content-type" content="text/html;charset=is o-8859-1">
    <title>Welcom e to John Ortt'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("AboutMe. gif","AboutMeF. gif","AboutMeP. gif","AboutMeFP .gif");
    myCv = new Array("MyCV.gif ","MyCVF.gif"," MyCVP.gif","MyC VFP.gif");
    javaScript = new
    Array("Javascri pt.gif","Javasc riptF.gif","Jav ascriptP.gif"," JavascriptFP.gi f
    ");
    projects = new
    Array("Projects .gif","Projects F.gif","Project sP.gif","Projec tsFP.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.aboutm e = "";
    myCV = "";
    document.myCV = "";
    javaScript= "";
    document.javaSc ript = "";
    projects = "";
    document.projec ts = "";

    }


    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.s rc = (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.s rc = (projects_1==0) ? projects[0] :
    projects[2]
    }


    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)," top.evalImage(9 8)">')
    parent.Left.doc ument.writeln(" <TITLE>Welcom e to John Ortts 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()";"t op.about_me++"' )
    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="AboutMe.gi f" 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()";
    "top.projects_1 ++"')
    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>")

    parent.Top.docu ment.close()
    parent.Top.docu ment.open()
    parent.Top.docu ment.writeln('< html><head><TIT LE>Welcome to Johns Internet
    Page</TITLE></head>')
    parent.Top.docu ment.writeln('< body bgcolour="white "><p>Title Goes
    Here</p></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)" >')
    parent.Left.doc ument.writeln(" <TITLE>Welcom e to John Ortts 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_1++ "')
    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)">')
    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.my _cv++"')
    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)>')
    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>")
    }

    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 John Ortts 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_2++ "')
    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 va_script++"')
    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>')
    parent.Left.doc ument.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="mainMen u()">
    <frame name="Left" noresize>
    <frame src="Right.html " name="Right" noresize>
    </frameset>
    </frameset>

    <noframes>

    <body>

    </body>

    </noframes>
    </html>





    Tags: None
    • Michael Winter
      #2
      Re: Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

      On Tue, 30 Nov 2004 10:13:36 -0000, John Ortt
      <JohnOrtt@Idont wantspamsonoret urnaddress.com> wrote:
      [color=blue]
      > I am trying to write a webpage in Javascript. The page loads with three
      > frames, a top, left and right frame.[/color]

      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.or g/>.
      [color=blue]
      > Depending on the users actions the background page rewrites the code for
      > the relevant frames.[/color]

      So why don't you have actual pages?
      [color=blue]
      > The problem I am having is that I have four rollover states for each
      > button.
      >
      > "Unused", "Unused with mouseover", "Used", and "Used with mouseover".[/color]

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

      [snip]
      [color=blue]
      > The problem is that the images do not seem to be loading and refreshing
      > correctly.[/color]

      Take a look at <URL:http://www.mlwinter.pw p.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.

        Comment

        • John Ortt
          #3
          Re: Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

          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@bluey onder.co.invali d>
          Newsgroups: comp.lang.javas cript
          Sent: Tuesday, November 30, 2004 12:47 PM
          Subject: Re: Repost: Javascript Rollovers not Refreshing on Dynamic
          Webpages.

          <Lots of useful advice snip'd>


            Comment

            • Michael Winter
              #4
              Re: Repost: Javascript Rollovers not Refreshing on Dynamic Webpages.

              On Tue, 30 Nov 2004 13:23:50 -0000, John Ortt
              <JohnOrtt@Idont wantspamsonoret urnaddress.com> wrote:
              [color=blue]
              > 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?[/color]

              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="#navigati on">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.infosystem s.www.authoring.html. CSS questions should be directed to
              comp.infosystem s.www.authoring.stylesheets.
              [color=blue]
              > Thanks again for the feedback, I am still relatively new to all this and
              > any help is greatly appreciated.[/color]

              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.

                Comment

                Previous template Next
                Working...