How do I hide a picture when loading a page?

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

    How do I hide a picture when loading a page?

    I want to load a page.
    I want to have a picture that remains hidden until a mouseover action takes
    place.

    How do I do this?
    I'm not sure. : (

    Any help would be appreciated.

    Thanks.

    OM


    Tags: None
    • KC Wong
      #2
      Re: How do I hide a picture when loading a page?

      > I want to load a page.[color=blue]
      > I want to have a picture that remains hidden until a mouseover action[/color]
      takes[color=blue]
      > place.
      >
      > How do I do this?
      > I'm not sure. : (
      >[/color]

      Something like this:

      <html>
      <head>
      <title>Hiding things until mouseover</title>
      <script>
      <!--
      function toggle(show) {
      if (show) {
      document.myImag e.style.visibil ity = "visible";
      } else {
      document.myImag e.style.visibil ity = "hidden";
      }
      return false;
      }
      //-->
      </script>
      </head>
      <body onload="debug() ">
      <div onmouseover="to ggle(true);" onmouseout="tog gle(false);">Sh ow
      Image</div>
      <img name="myImage" src="img.jpg" style="{visibil ity: hidden;}" />
      </body>
      </html>

      You need to refer to the documentation more often... go to
      W3C
      http://www.w3c.org/
      The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.

      and click menu item HTML and CSS.


        Comment

        • Lasse Reichstein Nielsen
          #3
          Re: How do I hide a picture when loading a page?

          "KC Wong" <evil_war_nut@y ahoo.com.hk> writes:
          [color=blue][color=green]
          > > I want to load a page. I want to have a picture that remains
          > > hidden until a mouseover action takes place.[/color][/color]
          [color=blue]
          > <script>[/color]
          Remember the required attribute "type"
          <script type="text/javascript">
          [color=blue]
          > <!--[/color]

          You don't need HTML comments in Javascript
          [color=blue]
          > function toggle(show) {
          > if (show) {
          > document.myImag e.style.visibil ity = "visible";[/color]

          This is not very protable. Not all browsers make named elements
          properties of the document element. You can, portably, use
          document.images['myImage'].style.visibili ty =
          (show?"visible" :"hidden");
          [color=blue]
          > <body onload="debug() ">[/color]

          This is to trigger the Netscape or Mozilla debugger, right? I don't
          even think you need to call it, just writing "debug" should be enough.

          /L
          --
          Lasse Reichstein Nielsen - lrn@hotpop.com
          Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
          'Faith without judgement merely degrades the spirit divine.'

            Comment

            • KC Wong
              #4
              Re: How do I hide a picture when loading a page?

              Thanks, Lasse... I haven't coded any JavaScript for years, but recently
              picked it up again because I have to integrate 2 web sites. Seems I've
              forgotten most of the good practices :(

              - Remember the required attribute "type", <script type="text/javascript">
              - document.images['myImage']

              I'm off to tidy up my code before they're deployed...
              [color=blue][color=green]
              > > <!--[/color]
              > You don't need HTML comments in Javascript
              > document.images['myImage'].style.visibili ty =
              > (show?"visible" :"hidden");[/color]

              That's one habit I learned from a book many years ago... so that if the
              browser does not support JavaScript, your code won't show up on the page.


              KC


                Comment

                • Lasse Reichstein Nielsen
                  #5
                  Re: How do I hide a picture when loading a page?

                  "KC Wong" <evil_war_nut@y ahoo.com.hk> writes:
                  [color=blue]
                  > Thanks, Lasse... I haven't coded any JavaScript for years, but recently
                  > picked it up again because I have to integrate 2 web sites. Seems I've
                  > forgotten most of the good practices :([/color]

                  Years ago, there were two browsers and almost no standards, so good
                  practices were often anything that worked. While IE still has a huge
                  market share, there are other browsers out there. Each is probably
                  counted only in singe digit percentages, I bet they will grow as more
                  people start using alternative platforms, e.g., mobile phones with
                  browsers (where Opera is currently popular with phone makers).
                  [color=blue][color=green][color=darkred]
                  > > > <!--[/color]
                  > > You don't need HTML comments in Javascript[/color]
                  >
                  > That's one habit I learned from a book many years ago... so that if the
                  > browser does not support JavaScript, your code won't show up on the page.[/color]

                  Almost correct. If the browser don't understand the script *tag*, it
                  will show the contents, and you need to hide it with HTML comments. If
                  it understands the script tag, i.e., understands HTML 3.2, then it
                  doesn't matter if it can execute the script or not, it still won't
                  show the contents.

                  HTML 3.2 was made a recommendation in January 1997, and any serious
                  browser made after that (and most of the ones made while HTML 3.2 was
                  in development) will not need the script to be hidden. I think it is
                  safe to say that no browser in current use needs the HTML comments.

                  /L
                  --
                  Lasse Reichstein Nielsen - lrn@hotpop.com
                  Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
                  'Faith without judgement merely degrades the spirit divine.'

                    Comment

                    Previous template Next
                    Working...