Web Analytics Made Easy -
StatCounter new homepage using frames and hover buttons - CodingForum

Announcement

Collapse
No announcement yet.

new homepage using frames and hover buttons

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • new homepage using frames and hover buttons

    I've just written my first homepage with frames, but alas it appears I'm the only one who can make it work i.e. actually see the link hover buttons and actually get the links working. I guess the reason only I can see and do everything is that the program was written from the same computer I see it from.
    My friend up the road can only see something like an X where the link hover buttons appear.
    My homepage is at http://www.geocities.com/ironsonly2002/index.html.
    I hope many who read this will laugh out loud at my scripts (assuming they can view them) but I really need all the help I can get.
    thank you all in advance.


  • #2
    Hey, your page does not seem to exist. Check the link!
    Scripting | JavaScripts | PerlScripts | Python Scripts | Articles | My Journal

    Comment


    • #3
      mad...
      /me can just a see® your graphics...aka thattt hugggge pic of the course???

      /me just a noticed® thattt your introduction n' program have just a different® looking onmouseover red strips...

      your programme.html just a opens® in its own window vs your 'right' frame...might wanna just a check® that youve got your 'target' tag set correctly...
      /me viewed the source n' you dooo just a tell® it to open there....however its not doing that...its opening in your current browser window on its own...:O(((

      looks like youve got your image prob fixed though... beings as you just a made® the site in frontpage??? /me is presuming thattt it originally referenced your 'images' to your harddrive instead of the spot you have them in online @ geocities...
      The New JustaBuster Version 2.0 OR JustaBusta Lite V2.0
      ...just a special® thanx kinda hugs to jkd n' nex ...:O)))

      CommemorateWTC.com --Please lend your support

      Comment


      • #4
        Originally posted by premshree
        Hey, your page does not seem to exist. Check the link!
        /me just a whispers® to pre...
        ummm just a remove® the . after the html. n' it works...sometimes tooo? with geocities??? you have to just a copy® n' paste the url into your location bar...
        The New JustaBuster Version 2.0 OR JustaBusta Lite V2.0
        ...just a special® thanx kinda hugs to jkd n' nex ...:O)))

        CommemorateWTC.com --Please lend your support

        Comment


        • #5
          Get rid of the java buttons. It's a bit overdone to use applets for something as simple as that, which can easily be accomplished by a simple rollover script. You can set this somewhere in the theme you're using.
          Edit: Sorry, played it down a little...
          Last edited by ronaldb66; Jul 4, 2002, 09:09 AM.
          Regards,
          Ronald.
          ronaldvanderwijden.com

          Comment


          • #6
            To reiterate what Ronald said, (I'll be nicer don't worry) using a Java applet for something like that is a waste of time.

            Use some graphics program (Photoshop, Paint Shop Pro, Corel Draw, etc.) to make your images.

            Make one image for the 'normal' state and another image for the 'hover' state (when the mouse is over the image)

            Do this for all your images, and then write a Javascript to change them when you roll your mouse over...

            I'll get back to u in a few minutes with an example script.

            ~Quack

            Comment


            • #7
              It's not necessary to create your own images; the java buttons are generated by Frontpage, and it can be set up to generate all the necessary scripts and images for a simpler rollover just as easy.

              Madgolfer,

              if people for one or another reason can't execute java applets (security constrictions, or simply disabled), they can't see any form of navigation and will probably leave your site in a hurry. If image rollovers are used, even when javascript processing is disabled, visitors will see buttons they can click to navigate, allbeit not animated.
              Java is best used for more complex applications and effects that can't (easily) be achieved with another technique.
              Regards,
              Ronald.
              ronaldvanderwijden.com

              Comment


              • #8
                Image Rollover Script

                OK, As promised, here's the javascript for image rollovers..

                First step is to give your images a name.... it's in red

                Second is to write the functions that will change the images - they'll be in blue.

                Third, you want to give the <a> tag with the call to the javacript funtions - and give each image in the HTML a name.

                Put this stuff in between the <head></head> tags.

                <script language="JavaScript">
                <!--
                Image_Name = New Image();
                Image_Name.src = "path_to_image.gif";
                Image2_Name = New Image();
                Image2_Name.src = "path_to_image2.gif";


                function on(name)
                {
                document[name].src = eval(name + "on.src");
                }
                function off(name)
                {
                document[name].src = eval(name + ".src");
                }

                //-->
                </script>

                Next, you want to put this in the body of your page.

                <a href="your_page.html" onMouseOver="on('Image_Name'); return true;" onMouseOut="off('Image_Name'); return true;"><img src="path_to_image.gif" border="0" name="Image_Name"></a>


                A couple of notes... obviously where I've put "Image_Name" and "Path_To_Image" that's meant for YOU to give them usefull names and change those paths to the proper ones. Give the images some meaningfull names (for example.. the contact image.. name="contact")

                Hope this helps you out!

                ~Quack

                Comment


                • #9
                  First of all, heap big thanks to justame, premshree, ronaldb66 and quackhead for posting replies. Most I can understand, but please appreciate that for me, no script is simple!
                  quackhead..is it really necessary for me to make all those different images? When I thought about this form of web page it took me ages to learn the basics of frames - frontpage wasn't too helpful with frames but it did seem fairly straightforward for those pesky buttons.
                  But today, I went to another friend's place and the page works just fine on his puter. So, is the problem with my first friend's puter and if so, what is the likely fix please? Is it something under Tools, Internet Options, Advanced please? Or in some other area?
                  Quackhead, I do appreciate your new javascript, but it seems to be in yet another new language to me. Please assure my tired old brain it's not too bad to grasp.
                  Just one last question for now for my friends here, would the basic format of this web page be acceptable for a business?

                  Comment


                  • #10
                    Originally posted by madgolfer
                    Just one last question for now for my friends here, would the basic format of this web page be acceptable for a business?
                    Acceptable in what way?
                    Are you asking about form, or function?

                    It seems to be fairly straightforward in its approach. You click a button, you get the information you're looking for in a single step. That's always acceptable. There's no confusion regarding where the links are, or what they're supposed to link you to. Any time you can sidestep user confusion, you're doing a good thing.

                    As for design, there are several things you might want to look at, but I'll mention one problem that should always be addressed--your main image tiles both horizontally and vertically, as images do if left to their own devices. On my screen, it's very easy to open the window wide enough to show the right/left seam where the image crashes up against itself. Not pretty, and never professional. The same thing happens if you make the window long enough, with the vertical tile, but since there's no information that would cause a user to scroll down, that's probably not a problem. You might try this in the body tag of the page loded into your main frame:

                    <body style="background-repeat:no-repeat">

                    or, if you have a style sheet, add it to the body tag, like so:

                    body {
                    ...

                    background-repeat: no-repeat;
                    }

                    This will cause the image to appear only once, and then you can create your design around it, or size it to your design, which ever way works.

                    A more extreme solution would be to actually make the image tile horizontally in Photoshop, but that would probably result in a larger file than you already have, so perhaps not.

                    Maybe I'm just being a curmudgeon, but that animated golfer is a little like a dripping faucet in the middle of the night--eventually you'd do anything to shut it off. A single swing when you first hit the site would make the point nicely, but as it is, he's going to be with you, always. I don't want to sound harsh, but if the purpose of the site is to make commercial/business information available, you want to do everything possible to avoid annoying the user and make it effortless for them to get what they came for. Animation is more acceptable when design is part of what is being presented, when it's okay for the creativity of the medium to impose itself. Otherwise, make the medium as transparent as possible.

                    Comment


                    • #11
                      Originally posted by madgolfer
                      Just one last question for now for my friends here, would the basic format of this web page be acceptable for a business?
                      Acceptable in what way?
                      Are you asking about form, or function?

                      It seems to be fairly straightforward in its approach. You click a button, you get the information you're looking for in a single step. That's always acceptable. There's no confusion regarding where the links are, or what they're supposed to link you to. Any time you can sidestep user confusion, you're doing a good thing.

                      As for design, there are several things you might want to look at, but I'll mention one problem that should always be addressed--your main image tiles both horizontally and vertically, as images do if left to their own devices. On my screen, it's very easy to open the window wide enough to show the right/left seam where the image crashes up against itself. Not pretty, and never professional. The same thing happens if you make the window long enough, with the vertical tile, but since there's no information that would cause a user to scroll down, that's probably not a problem. You might try this in the body tag of the page loded into your main frame:

                      <body style="background-repeat:no-repeat">

                      or, if you have a style sheet, add it to the body tag, like so:

                      body {
                      ...

                      background-repeat: no-repeat;
                      }

                      This will cause the image to appear only once, and then you can create your design around it, or size it to your design, which ever way works.

                      A more extreme solution would be to actually make the image tile horizontally in Photoshop, but that would probably result in a larger file than you already have, so perhaps not.

                      Maybe I'm just being a curmudgeon, but that animated golfer is a little like a dripping faucet in the middle of the night--eventually you'd do anything to shut it off. A single swing when you first hit the site would make the point nicely, but as it is, he's going to be with you, always. I don't want to sound harsh, but if the purpose of the site is to make commercial/business information available, you want to do everything possible to avoid annoying the user and make it effortless for them to get what they came for. Animation is more acceptable when design is part of what is being presented, when it's okay for the creativity of the medium to impose itself. Otherwise, make the medium as transparent as possible.

                      Comment


                      • #12
                        thanks for your advice edgework. I thought I'd got rid of the picture repeat by making it a watermark.
                        However, I can't seem to get your suggested <body style entry to work in my 'right' frame (where the picture is). Can you please tell me where I can get a list of similar commands.

                        Comment


                        • #13
                          Try www.w3c.org/. They're the folks who brought you the CSS standard and they're the motherlode of information. Beyond that, there are a gazillion places to look for information.

                          A great site that I've found lots of great ideas is www.alistapart.com/. Start anywhere in the archives and read.

                          If you want to see how to get rid of tables forever, check out www.glish.com/css/ for some splendid tutorials on using style sheets for positioning.

                          Just type CSS into any search engine and set aside two or three hours to explore. You'll find more than you can digest.

                          About your page:

                          first, make sure that you're putting the code into page loading INTO the frame, not in the page containing the FRAMESET code itself.

                          The following code assumes that the image is in the same directory as the html page calling it. background-image is the CSS version of choosing an image for your background. Note that there are no quotes around the image name, as it is not an attribute of an html tag. Note also that along with no-repeat, you also have the option of repeat-x and repeat-y to make it tile horizontally or vertically only.



                          <html>
                          <head>
                          <title>Your TITLE here</title>
                          <style>
                          body{
                          background-image: URL(imageName.ext);
                          background-repeat:no-repeat;
                          }
                          </style>
                          </head>
                          <body>

                          </body>
                          </html>

                          Comment

                          Working...
                          X