Events of an image in HTML and JavaScript - Stack Overflow

admin管理员组

文章数量:1410689

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!

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!

• javascript
• html
• css

Share Improve this question Follow edited Dec 23, 2011 at 0:04 mauguerra asked Dec 22, 2011 at 18:35 mauguerramauguerra 3,85855 gold badges3333 silver badges3737 bronze badges 5

• 2 <img src="image_1.png" onclick="this.src='image_3.png';" />. Not that I'm suggesting inline handlers... – Ruan Mendes Commented Dec 22, 2011 at 18:43
• i have tried onclick adding that event on my <img> tag but it does not appear as pressed!! – mauguerra Commented Dec 22, 2011 at 18:45
• What do you want to know/do about/to the image? The location of the cursor? The src, height, width..? What do you mean by 'zone [you're] working on'? – David Thomas Commented Dec 22, 2011 at 18:50
• sorry for my english. What I meant was the SECTION I am working on. I have three sections, the images make a kind of MENU – mauguerra Commented Dec 23, 2011 at 0:08
• Can you post the actual mark-up you're using? Maybe post a JS Fiddle demo? – David Thomas Commented Dec 23, 2011 at 12:56

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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');
}

what about the onclick event?

I highly remend using the CSS :hover psuedoselector rather than binding handlers to the onmouseover and onmouseout events.

See a decent tutorial here.

This might be helpful: http://jsfiddle/BGurung/UDceq/

I created a flag that tells whether the image was clicked or not. On mouse out, if the image was clicked, sets the flag to false and returns, other was just changes the source of image.

It sounds like you want onmousedown & onmouseup but it really depends on what your doing.

Check out the specs for more info:

http://www.w3/TR/DOM-Level-2-Events/

本文标签： Events of an image in HTML and JavaScriptStack Overflow