CODEWITHSUNDEEP
javascriptinternet-explorer
Rollin
Rollin

Reputation: 131

js div overlay not working in IE

I have this div that overlays images to color them blue when you mouseover. Works nicely! Except - it doesn't seem to work in IE at all.

Any ideas?

The js http://www.rollinleonard.com/elements/overlaymouseover.js

The page http://www.rollinleonard.com/elements

Thanks!

Upvotes: 1

Views: 2617

Answers (2)

Ruan Mendes
Ruan Mendes

Reputation: 92274

IE doesn't yet support rgba. IE9 beta does. In your case, since you don't have any text on the overlay, you don't need to set background opacity. Just set regular opacity on your #overlay.

#overlay{
   ...
   background-color: rgb(0, 0, 255);
   -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
   ...
}

Update: Like you mentioned, the clicks don't go through to the links. One approach is to add a handler to the overlay, copying the underlying link.

  $(window).load(function(){
      var $overlay = $('#overlay');     
      $('img').bind('mouseenter', function () {
          var $this = $(this);
          if ($this.not('.over')) {
              $this.addClass('over');
              $overlay.css({
                  width  : $this.css('width'),
                  height : $this.css('height'), 
                  top    : $this.offset().top + 'px',
                  left   : $this.offset().left + 'px',
              }).show();
              // This is hacked up,could be better, but works, it replaces the handler
              // everytime you display it
              $overlay.onclick = function() {
                   location.href = $this.getAttribute('href');
              }
          }
       }).bind('mouseout', function () {
           $(this).removeClass('over');
       });
  });

Upvotes: 1

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Use keyword var to declare your variables:

instead of:

$overlay = $('#overlay');

Use:

var $overlay = $('#overlay');

Same thing with $this = $(this);

Update --

Not sure what I was thinking.

As long as you are making an assignment your javascript is valid, however the error in IE is coming from line 15 of overlaymouseover.js:

left   : $this.offset().left + 'px', // extra comma breaks IE

And that is your problem.

Upvotes: 1

Related Questions