Fork me on GitHub

Enhanced Pixel Related Object Selection

Click or hover an object to see script in action

This script is not only working with images, but also working with background-images. If applied on an image it will use the src path, else it will test if data-img or background-image exists and use those instead.

Browser Compatibility

IE10 / FF3+ / Chrome 14+ / Opera 11.1+ / Safari 5+

Example:

Try hovering transparent and non transparent areas on the scene below to see script in action. Also transparent areas allow the objects behind to get hovered/clicked

fountain
house
1 2 3 4

Images used in this example are from OpenGameArt.org by Zabin, bart, Jorge Avila and qubodup.

This example in code:

HTML

			<section id="showcase">
				<div id="element1" class="pixelmap unit hero"></div>
				<img src="fountain.png" id="element2" width="74" height="116" alt="fountain" class="pixelmap" />
				<div id="element3" class="pixelmap unit monster"></div>
				<img src="house.png" id="element4" width="216" height="287" alt="house" class="pixelmap" data-precalc="false" />
				<div id="interface">
					<a href="#" class="button inventory">1</a>
					<a href="#" class="button options">2</a>
					<a href="#" class="button quests">3</a>
					<a href="#" class="button chat">4</a>
				</div>
			</section>
		

JavaScript

			<script>
				$(function() {		
					switchBoundingBox	=	function(ev) {
						$('.pixelmap,.button').toggleClass('bounding-box');
						ev.preventDefault();
					};
					
					elemHovered			=	function(ev,elem,hit) {
						if(hit==true) {
				        	if(!elem.hasClass('hover')) {
					        	elem.addClass('hover');
				        	}
			        	} else {
				        	elem.removeClass('hover');
			        	}
			
						ev.preventDefault();	
					};
					
					elemOut				=	function(ev,elem,hit) {
						console.log('out callback');
						elem.removeClass('hover');	
					};
					
					elemClicked			=	function(ev,elem,hit) {
						if(hit===true) {
							elem.toggleClass('active');
						}
						ev.preventDefault();	
					};
					
					elemReady			=	function(el) {
						console.log('ready callback');
					};
					
					$('#bounding-box').change(switchBoundingBox);
					
					$('.pixelmap,.button').Pixelselect({
						over:		elemHovered,
						out:		elemOut,
						click:		elemClicked,
						ready:		elemReady,
						sublayers:	true,
						debug: 		false
					});
					
				});
			</script>
		

Configuration parameters:

Beside the parameters that can be assigned during initialization, it is possible to assign a few parameters as data-attribute to overwrite the global options.

Argument Default Data-attribute Description
click null - This is the callback for the click event. Callback has 3 callback variables function(event,element,hits). Event is the click event, element is the clicked element as jquery object and hits indicated whether or not a pixel was hit.
debug false - Displays the time that the calculation of the pixelmap used in the console log.
maxsubs 5 data-maxsubs This option prevents endless loops, defines how deep the script checks for sublayers
out null - This is the callback for the mouseout event. Callback has 3 callback variables function(event,element,hits). Event is the mouseout event, element is the mouseout element as jquery object and hits indicated whether or not a pixel was hit.
over null - This is the callback for the mouseover event. Callback has 3 callback variables function(event,element,hits). Event is the mouseover event, element is the mouseover element as jquery object and hits indicated whether or not a pixel was hit.
precalc true data-precalc If enabled the pixelmap will be generated before initialization. This will boost performance with many objects, but will take a few ms for to calculate. If deactivated, the script will check each pixel at runtime.
ready null - This is the callback for the onready event of the object. Callback has 1 callback variable function(element). Element is a jquery object of the parsed html element.
sublayers false data-sublayers If enabled the script will check if a object is behind a transparent area and trigger the object, if it exists
tolerance 40 data-tolerance A value from 0-255 where 0 is transparent and 255 totally visible / filled
type img - Normally this will be automatically calculated. Can either be 'img' or 'bg' for a css background-image instead of img tag.

Need help? Want to contribute? Just give feedback?

Anything is welcome, if you need help, you can directly write me via my blog over at http://www.cw-internetdienste.de or you can go over to github (https://github.com/Bahlor/jQuery-Pixel-Related-Object-Selection) and fork this project or post issues you have. Feedback is welcome via email or as reply to a blog post I made in the past. http://www.cw-internetdienste.de/2010/05/basic-pixel-related-object-selection/

comments powered by Disqus