Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript only half working

    Hi
    This is the script i am using and at the moment it only makes the greyscale image but does not fade to colour on mouseover. Here is the site of the original code:http://webdesignerwall.com/demo/html5-grayscale/
    Just Viewsource for the code. I am also trying to integrate this into my website and have no idea how to set the target image. Can anyone help with this please?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>HTML5 &amp; jQuery - Grayscale Image Hover</title> 
    <style type="text/css"> 
    body {
    	background: #fff;
    	color: #000;
    	font: 14px/140% Arial, Helvetica, sans-serif;
    	margin: 40px 0;
    }
    a {
    	text-decoration: none;
    	color: #86AEBB;
    }
    img {
    	border: none;
    }
    h2 {
    	font: bold 14px/110% Arial, Helvetica, sans-serif;
    	margin: 0 0 30px;
    	padding: 0 0 20px;
    	color: #999;
    	border-bottom: solid 1px #ccc;
    	clear: both;
    }
    h3 {
    	font: bold 16px/120% Arial, Helvetica, sans-serif;
    	margin: 0;
    }
    #pagewrap {
    	width: 948px;
    	margin: 0 auto;
    }
    .item {
    	width: 296px;
    	margin: 0 0 30px 30px;
    	float: left;
    }
    .item.first {
    	clear: left;
    	margin-left: 0;
    }
    .item img {
    	opacity:0;
    }
    </style> 
    <script src="jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    	
    	// $(".item img").css({"display":"none");
    	
    	// On window load. This waits until images have loaded which is essential
    	$(window).load(function(){
    		
    		// Fade in images so there isn't a color "pop" document load and then on window load
    		$(".item img").animate({opacity:1},500);
    		
    		// clone image
    		$('.item img').each(function(){
    			var el = $(this);
    			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
    				var el = $(this);
    				el.parent().css({"width":this.width,"height":this.height});
    				el.dequeue();
    			});
    			this.src = grayscale(this.src);
    		});
    		
    		// Fade image 
    		$('.item img').mouseover(function(){
    			$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
    		})
    		$('.img_grayscale').mouseout(function(){
    			$(this).stop().animate({opacity:0}, 1000);
    		});		
    	});
    	
    	// Grayscale w canvas method
    	function grayscale(src){
            var canvas = document.createElement('canvas');
    		var ctx = canvas.getContext('2d');
            var imgObj = new Image();
    		imgObj.src = src;
    		canvas.width = imgObj.width;
    		canvas.height = imgObj.height; 
    		ctx.drawImage(imgObj, 0, 0); 
    		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    		for(var y = 0; y < imgPixels.height; y++){
    			for(var x = 0; x < imgPixels.width; x++){
    				var i = (y * 4) * imgPixels.width + x * 4;
    				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
    				imgPixels.data[i] = avg; 
    				imgPixels.data[i + 1] = avg; 
    				imgPixels.data[i + 2] = avg;
    			}
    		}
    		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    		return canvas.toDataURL();
        }
    	    
    </script> 
    </head> 
    <body> 
    <div id="pagewrap"> 
    	<h1>HTML5 &amp; jQuery Grayscale Demo</h1> 
    	<h2>Tutorial by <a href="http://www.webdesignerwall.com">Web Designer Wall</a> (<a href="http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/">read article</a>). Coding by <a href="http://darcyclarke.me">Darcy Clarke</a>.</h2> 
    	<div class="item first"> 
    		<a href='http://127.0.0.1/web/Msapcalcmainsite/Mainpage.html'><img src="http://127.0.0.1/web/Msapcalcmainsite/Numbers.png"></a> 
    		<h3>Themify</h3> 
    	</div> 
    	<div class="item"> 
    		<a href="http://icondock.com"><img src="http://127.0.0.1/web/Msapcalcmainsite/Numbers.png"></a> 
    		<h3>IconDock</h3> 
    	</div> 
    </div> 
    </body> 
    </html>

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Update:
    Got it working on this page now. Still have no idea how I would integrate this on to my site. Any help would be greatly appreciated.
    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •