Сообщение не о Битриксе. Скорее заметка. Как заставить цветную картинку стать чернобелой, а при наведении курсора - снова цветной.
[spoiler]
JS
Теперь HTML
Итого:
при загрузке картинки - делаем ее чернобелой и вешаем событие на наведение курсора. Для IE используется собственные свойства.
Тесты:
IE 7 и выше +
FF 3 +
Opera 9.64 +
Chrome -
[spoiler]
JS
function grayscale(image, bPlaceImage, width_real, height_real) { var myCanvas=document.createElement("canvas"); var myCanvasContext=myCanvas.getContext("2d"); var imgWidth=width_real; var imgHeight=height_real; // You'll get some string error if you fail to specify the dimensions myCanvas.width = imgWidth; myCanvas.height = imgHeight; // alert(imgWidth); myCanvasContext.drawImage(image,0,0); // this function cannot be called if the image is not rom the same domain. You'll get security error var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight); for (i=0; i<imageData.height; i++) { for (j=0; j<imageData.width; j++) { var index=(i*4)*imageData.width+(j*4); var red=imageData.data[index]; var green=imageData.data[index+1]; var blue=imageData.data[index+2]; var alpha=imageData.data[index+3]; var average=(red+green+blue)/3; imageData.data[index]=average; imageData.data[index+1]=average; imageData.data[index+2]=average; imageData.data[index+3]=alpha; } } myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height); // myCanvasContext.drawIMage(imageData,0,0);//,0,0, imageData.width, imageData.height); if (bPlaceImage) { var myDiv=document.createElement("div"); myDiv.appendChild(myCanvas); image.parentNode.appendChild(myCanvas);//, image); } return myCanvas.toDataURL(); } function prepareMouseOverImage(image, originalURL, width_real) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua.indexOf("webtv") == -1) { image.onload=function(){return true;}; image.onmouseover=function() { //alert("a"); image.style['-ms-filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)"; image.style['filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);"; } image.onmouseout=function() { // alert(this.normalImage.src); image.style['-ms-filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; image.style['filter'] = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);"; } }else{ if(width_real){ var height_real = (width_real * image.height)/image.width; height_real = Math.floor(height_real); }else{ var width_real=image.width; var height_real=image.height; } image.mouseOverImage=originalURL; image.onload=function(){return true;}; image.normalImage=grayscale(image, false, width_real, height_real); image.onmouseover=function() { //alert("a"); this.src=this.mouseOverImage; } image.onmouseout=function() { // alert(this.normalImage.src); this.src=this.normalImage; } image.src=image.normalImage; } } |
Теперь HTML
<html> <head> <script type="text/javascript" src="script.js"></script> </head> <body> <img src="no-photo.gif" alt="alttext" width="49" onload="javascript:prepareMouseOverImage(this, 'no-photo.gif', 92);" class="grayscale_img"/> </body> </html> |
Итого:
при загрузке картинки - делаем ее чернобелой и вешаем событие на наведение курсора. Для IE используется собственные свойства.
Тесты:
IE 7 и выше +
FF 3 +
Opera 9.64 +
Chrome -