Set image onclick and keep it there

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

    Set image onclick and keep it there

    Hi All,

    I am hoping someone can help me. I am trying to setup my main page so that
    when the user moves the mouse over an image, it changes the source (got this
    working). When the user CLICKS on the image (it is a link to the content
    page) it changes to a third image AND STAYS THERE. ie: so the iamge won't
    change back to the omouseoff image. Does this make sense?

    Also, how do I "preload" the images before they are even needed? eg: so the
    Loading image loads immedeately.

    Here is the code I have so far, which works as far is it goes, however the
    "Loading" image is overwritten by the mouse off function. What am I doing
    wrong? (Sorry for formatting):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <script id="clientEvent HandlersJS" language="javas cript">
    <!--

    var clicked='false' ;

    function fncover(){
    if (clicked='false ')
    {
    IMG1.src='./images/webmainlogoover .gif';
    }
    }

    function fncoff(){
    if (clicked='false ')
    {
    IMG1.src='./images/webmainlogo.gif ';
    }
    }

    function fncclick(){
    IMG1.src='./images/Loading.gif';
    clicked='true';
    }

    //-->
    </script>
    </head>
    <body>
    <a href="Content.a spx" target="maintit le">
    <img
    onmouseover="re turn fncover()"
    onmouseout="ret urn fncoff()"
    onclick="return fncclick()"
    src="./images/webmainlogo.gif "
    border="0"
    id="IMG1"
    language="javas cript"
    width="500" >
    </a>
    </body>
    </html>

    Thanx in advance,

    Rob
    robm@devtest.co m


    Tags: None
    • Michael Winter
      #2
      Re: Set image onclick and keep it there

      On Sun, 18 Jan 2004 16:56:39 GMT, Rob Manger <rob_manger@hot mail.com>
      wrote:

      <snip>
      [color=blue]
      > Also, how do I "preload" the images before they are even needed? eg: so
      > the Loading image loads immedeately.[/color]

      If I recall correctly:

      var img = new Image();
      img.src = 'image1.gif'; // Preload image1.gif

      What I don't remember is if you should use an array of Image objects, each
      preloading a separate image, or if you can use one. Try it and see. :)
      [color=blue]
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">[/color]

      Nice to see someone using a DTD for a change. :)
      [color=blue]
      > <html>
      > <head>
      > <script id="clientEvent HandlersJS" language="javas cript">[/color]

      The SCRIPT element doesn't have an id attribute. Also, it requires (that
      is, it's mandatory) a type attribute. The above should read:

      <script type="text/javascript">

      When the type attribute is used, there is no need to use the language
      attribute.
      [color=blue]
      > <!--[/color]

      Don't bother with SGML comments in SCRIPT elements. They're no longer
      required.
      [color=blue]
      > var clicked='false' ;[/color]

      Why are you using a string to indicate true or false? That's what booleans
      are for. Instead use:

      var clicked = false;

      This also allows you to write

      if ( clicked ) {

      rather than

      if ( clicked == 'false' ) {

      which is another way of solving the next issue...
      [color=blue]
      > function fncover(){
      > if (clicked='false ')[/color]

      This is where your problems lie. When you assign a value to a variable,
      the expression returns the assigned value. That is, if you did this:

      window.alert( clicked = 'false' );

      the alert box would display, false. As this returned value is not null,
      undefined, false, 0, or an empty string (all considered false), your if
      expression is *always* true. Instead, use:

      if ( 'false' == clicked ) {

      Note: I reversed the order of the expression out of habit. If you wrote,

      if ( 'false' = clicked ) {

      you would get an error as you can't assign to a literal value. Placing
      constants on the left-hand side when you are performing a comparison can
      help avoid these simple mistakes.
      [color=blue]
      > {
      > IMG1.src='./images/webmainlogoover .gif';[/color]

      This might not work on all browsers because IMG1 is not a global, it's the
      id of an element. There are two solutions in your case; getElementById( )
      or passing an object reference. The latter is easier, so I'll just show
      that.

      Inside an intrinsic event, such as onclick, the keyword 'this' is a
      reference the object that was clicked. You can then use it to access the
      properties of that object. For example:

      function myClick( elem ) {
      elem.src = '...';
      }
      ...
      <img src="..." onclick="myClic k(this)">

      <snip>
      [color=blue]
      > <img
      > onmouseover="re turn fncover()"
      > onmouseout="ret urn fncoff()"
      > onclick="return fncclick()"
      > src="./images/webmainlogo.gif "
      > border="0"
      > id="IMG1"
      > language="javas cript"
      > width="500" >[/color]

      The IMG element doesn't have a language attribute. To specify the language
      used in intrinsic events, place this META element in the head of the
      document.

      <meta http-equiv="Content-Script-Type" content="text/javascript">


      SUMMARY - thought I'd better do this, for clarity

      Use SCRIPT elements like

      <script type="text/javascript">


      Don't use incompatible globals - pass references to your functions instead.
      Use booleans, not strings (where appropriate).
      Make sure you compare, not assign.

      function fncover( elem ) {
      if ( true == clicked ) { // or more simply: if ( clicked ) {
      elem.src = 'newImage.gif';
      }
      }
      ...
      <img
      onmouseover="fn cover(this)"
      onmouseout="fnc off(this)"
      onclick="fnccli ck(this)"
      src="./images/webmainlogo.gif "
      border="0"
      id="IMG1"
      width="500">

      One last thing: you'll notice above that I removed the return keyword in
      the event attributes of the IMG element. This is because you never
      returned a value from any of the functions. As I don't remember anything
      about you needing to return a value, in this case, I didn't add return
      statements.

      Hope that helps,

      Mike

      --
      Michael Winter
      M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

        Comment

        • Rob Manger
          #3
          Re: Set image onclick and keep it there

          Excellent!!!! Thanx Mike. Your a legend :D

          Rob


            Comment

            Previous template Next
            Working...