Sus Hill Sus Hill - 28 days ago 9
CSS Question

block mouseout event listener if onclick is pressed

I was trying 3 different action of mouse (mouseout, mouseenter and onclick) in which if user click on a image then the mouseout event should be blocked.

<div class="side-thumbnail">
<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-bw.png" onmouseover="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png'" onmouseout="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-bw.png'" alt="face" class="small-faceHit" data-id="firstpeople"> <br>
<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front.png" onmouseover="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front-Active.png'" onmouseout="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front.png'" alt="face" class="small-faceHit" data-id="secondpeople"> <br>
.................
</div>


you can see the full code in here

Answer

A clean CSS based solution using CSS Filters.

https://jsfiddle.net/f1b3ugo5/

CSS:

img{width:150px;}

img.active, img.inactive:hover {
  filter:none;
-webkit-filter: none;
-moz-filter: none;
-ie-filter: none;
-o-filter: none;
}
img.inactive {
filter:url("data:image/svg+xml;utf8,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ie-filter: grayscale(100%);
-o-filter: grayscale(100%);

}

JS:

'use strict';

var add_events = function( img, opts ){
  this.image = img;
  this.setup_listener();
  return this;
}
add_events.prototype.activate = function(){
    this.image.classList.remove('inactive');
    this.image.classList.add('active');
};
add_events.prototype.deactivate = function(){
    this.image.is_active = false;
    this.image.classList.remove('active');
    this.image.classList.add('inactive');
};
add_events.prototype.setup_listener = function(){
  var _this = this;
  this.image.addEventListener('click',function(e){
    add_events.deactivate_all( _this );
    if( this.is_active ){ 
    _this.deactivate();
    }
    else{ 
    this.is_active = true;
    _this.activate();
    }
  },false);
};

add_events.deactivate_all = function( current ){
  for( var i = 0; i < holder.length; ++i ){
    if(holder[i]===current){}
    else{ holder[i].deactivate(); }
  }
};

var holder = [], images = document.querySelectorAll( '.small-faceHit' );
for( var i = 0; i < images.length; ++i ){
  holder.push(new add_events( images[i], {}) );
}

HTML:

<div class="side-thumbnail">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

</div>
Comments