0

I am trying to have an image become slightly opaque when the mouse hovers over it. I use this line of code in php.

  <img src="/wp-content/themes/Map/images/SlideTab/slide2.png"  onmouseover= 'shade(this)' onmouseout = 'normal(this)'  onclick='showSubMenu("sm_item3")'  alt ="Slide" style ="height :22em ; width:4.063em; "/>

The shade function just changes the opacity to 0.5 .The image acts appropiately in all browsers except firefox. In firefox the images goes opaque and if the mouse stays over the image, the image will disappear. I have been unable to locate the issue. Thanks in advance for any advise.

here is my shade function. Very simple. It works in all browsers. It even works with firefox. The difference is in firefox after going opaque the image goes away completely:

function shade(x) {     
    x.style.opacity = ".5";   
}
user2573227
  • 13
  • 1
  • 4
  • I've removed the PHP tag, as this question isn't anything to do with it. You might want to add your `shade()` function to the question, and retag it as jquery or javascript. – andrewsi Jul 23 '13 at 17:33
  • can you try `x.style.opacity = 0.5;` without the quotes? https://developer.mozilla.org/en-US/docs/Web/CSS/opacity – Amitd Jul 23 '13 at 17:59
  • Just tried it. No diference – user2573227 Jul 23 '13 at 18:01
  • Seems a bug see this question for answer.. http://stackoverflow.com/questions/4686997/firefox-hover-opacity ..also a fiddle you can test on other browsers http://jsfiddle.net/jfriend00/tnDaD/ – Amitd Jul 23 '13 at 18:28

1 Answers1

0

You should rely on a lib like JQuery and its API. Look at fadeTo method for instance. If you still want to use your own method, please paste it in the question.

Cheers.

htulipe
  • 1,575
  • 1
  • 10
  • 22