Javascript combining onmouseover & onclick

Question

Hi all!  I'm basically new to javascript & here's my problem:  I've got a row of image thumbnails. As of now, when I do a rollover, the larger image displays in a different div & then onmouseout it goes away.  That works fine, but I'd like to add an option to click on the thumbnail & have the larger image stay displayed, regardless of the onmouseout, until another thumbnail is rolledover. Any ideas, help, etc would be very much appreciated! Here are my .css, javascript, & html:
<style type="text/css">
#Style1 {
    position:absolute;
    visibility:hidden;
    border:solid 05px #000;
    background-color:#000;
    color:#999;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
#Style2 {
position:absolute;
visibility:hidden;
border:solid 5px #000;
background-color:#000;
    color:#999;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
#Style3 {
position:absolute;
visibility:hidden;
border:solid 5px #000;
background-color:#000;
    color:#999;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
</style>
<script type="text/javascript" >
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
</script>
<div  style="position:absolute; left:500px; top:150px;">
  <a id="Style1"><img src="images/photos/image01.gif"  />Image #01</a>
  <a id="Style2"><img src="images/photos/image02.gif"  />Image #02</a>
  <a id="Style3"><img src="images/photos/image03.gif"  />Image #03</a></div>
<div  style="position:absolute; left:323px; top: 150px;">
  <li><img src="images/photos/image01.gif" width="50" height="75" hspace="24" class="thumbnails" onMouseOver=" ShowPicture('Style1',1)" onMouseOut="ShowPicture('Style1',0)" /></li>
  <li><img src="images/photos/image02.gif" width="50" height="75" hspace="24" class="thumbnails" onMouseOver=" ShowPicture('Style2',1)"onMouseOut="ShowPicture('Style2',0)"/></li>
  <li><img src="images/photos/image03.gif" width="50" height="75" hspace="24" class="thumbnails" onMouseOver=" ShowPicture('Style3',1)" onMouseOut="ShowPicture('Style3',0)"/></li></div>
Thanks a lot! Any help is very much appreciated!!!

Answer 1

Hi
Use a separate event listener for the click event to display the the image, see - https://developer.mozilla.org/en/DOM/element.addEventListener.
However IE8 and below uses a none standard even listener called attatchEvent, (see - http://msdn.microsoft.com/en-us/library/ms536343%28v=vs.85%29.aspx ) so your code should look something similar to -
if(window.addEventListener)
            theObj.addEventListener("click", function(){alert("addEventListener");}, false);
        else if(window.attachEvent)
IE9+ does support the standard addEvenListener.
There is an excellent description of using the event model in - http://www.amazon.co.uk/JavaScript-Definitive-Guide-Guides/dp/0596805527/ref=dp_ob_title_b k, which is almost an essential if you wish to use JavaScript, even though the book is more a reference for JavaScript it does contain a few good tutorials and contains sections on the newer html5 features and ecmascript 5.
PZ.