onMouseOver not working

JavaScript
1

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…

<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

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

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.

[HIGHLIGHT=“”]
<!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

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

No problemo. Sitepoint’s Simply Javascript is a great beginner book.

6

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.