Question

I am working with a banner, which have some buttons that I control with the events onmouseover() and onmouseout() with the tag as follow:

<img src="image_1.png" 
     onmouseover="this.src='image_2.png'"
     onmouseout="this.src='image_1.png'" />

This is working perfectly, but I want to know if there is some kind of event of holding an image when it has been clicked, in order to know on which zone I am working on.

I hope I made myself clear.

Supose I have SECTION 1, SECTION 2, SECTION 3. So, when I select SECTION 1, the image SECTION 1, appears to be selected the hole time I am working on that SECTION. If I change to SECTION 2, only the image of SECTION 2 appears to be selected, and so on!

Answer 1

You can try jquery hover to keep the current actions.

fiddle example:

<img src="image_1.png" />

<script>
$('img').hover(
 function(){
   $(this).attr('src','image_2.png');
 },
 function(){
   $(this).attr('src','image_1.png');
 },
);
</script>

Maybe, other option could be a css :hover and :active filters, using background propertie.
See this css example

.Myimg{
 display:block;
    width: 100px;
    height:100px;
    background-image:url('img1.jpg');
}

.Myimg:hover{
   background-image:url('img2.jpg');
}