SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onMouseOver not working

    I'm pretty green when it comes to JavaScript, so I can't figure out why the following code does not generate a small window crediting the photographer (this was his requirement in return for letting me use the picture without a fee) when the page visitor mouses over the image...

    Code:
    <img src="images/SkipJamesNewport-cropped.jpg" width="288" height="245" alt="Skip James photo by Lawrence Shustack, taken at the Newport Folk Festival, 1964." onMouseOver="window.status='Skip James photo by Lawrence Shustack, taken at the Newport Folk Festival, 1964.'; return true" onMouseOut="window.status =' '; return true">

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    the status just sets the bar at the bottom of the screen which normally shows the paths of links when you hover over them. Is that what you were expecting?

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The window.status display is very unreliable, as some browsers don't show this at all. The following script puts a tagline below your image on mouseover and works in all browsers.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Image tag line</title>
    <script type="text/javascript">
    <!--
     function msg(numbr)
      { var disp=(numbr==1)? "block" : "none";
        var elem=document.getElementById("tagLn");
        elem.style.display=disp;
      }
    //-->
    </script>
    <style type="text/css">
    <!--
     body   { font-family:arial, helvetica, sans-serif; }
    #pic1   { width:288px; margin:20px; text-align:center; cursor:pointer; }
    #pic1 p { margin-top:0px; margin-bottom:2px; }
    .a11N   { display:none; font-size:11px; font-weight:normal; color:#000; } 
    -->
    </style>
    </head>
     
    <body>
     
    <div id="pic1">
      <p class="a">
      <img src="images/SkipJamesNewport-cropped.jpg" onmouseover="msg(1)" onmouseout="msg(2)" width="288" height="245" alt="Skip James photo by Lawrence Shustack, taken at the Newport Folk Festival, 1964."></p>
      <p id="tagLn" class="a11N">Skip James photo by Lawrence Shustack, taken at the 
      Newport Folk Festival, 1964.</div>
     
    </body>
     
    </html>

  4. #4
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, AllanP, for the nifty code.

    Mark, that attempt to use window.status reveals just how primitive my understanding of JS is. I don't use it much, so I've gotten into the habit of finding a site that has a working script similar to what I want, then changing variables or other bits to work on my pages. Obviously, I need to get a good JS book and/or try out one of the Lynda.com tutorials on the topic, and write my JS from the bottom up.

    Thanks to both of you!

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by okieman View Post
    Thank you, AllanP, for the nifty code.

    Mark, that attempt to use window.status reveals just how primitive my understanding of JS is. I don't use it much, so I've gotten into the habit of finding a site that has a working script similar to what I want, then changing variables or other bits to work on my pages. Obviously, I need to get a good JS book and/or try out one of the Lynda.com tutorials on the topic, and write my JS from the bottom up.

    Thanks to both of you!
    No problemo. Sitepoint's Simply Javascript is a great beginner book.

  6. #6
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You might also like to look at "JavaScript for the World Wide Web" by Tom Negrino and Dori Smith, published by Peachpit Press. It has lots of fully documented examples, which are very helpful.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •