Schwarz-weiss effekt
Um im Internet schwarz weiss-effekte wie auf dieser seite hier zu bekommen, kann man am besten mit dieser formel arbeiten.
#foo {
opacity: 0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
Mit diesem css code bekommt man die transparenz auch ohne grafiken in allen browsern hin.
Das beantwortet jedoch noch nicht unsere Frage:
Im internet Explorer ist folgender css-code moeglich
Für den Internet-Explorer:
a:hover .rsa { filter='gray()';}
Quellcode für die Bilder:
![]()
Ändert jedoch nichts daran, daß die meisten Firefox oder Opera oder sogar einen anderen Browser benutzen und die Darstellung nicht richtig bzw. gewuenscht angezeigt wird.
Mit ein wenig Aufwand kann man jedoch ein Erfolg erzielen.
jedoch nicht mit css, aber mit java script!
Sollte ich eine Lösung gefunden haben, werde ich davon berichten.
#foo {
opacity: 0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
Mit diesem css code bekommt man die transparenz auch ohne grafiken in allen browsern hin.
Das beantwortet jedoch noch nicht unsere Frage:
Im internet Explorer ist folgender css-code moeglich
Für den Internet-Explorer:
a:hover .rsa { filter='gray()';}
Quellcode für die Bilder:
Ändert jedoch nichts daran, daß die meisten Firefox oder Opera oder sogar einen anderen Browser benutzen und die Darstellung nicht richtig bzw. gewuenscht angezeigt wird.
Mit ein wenig Aufwand kann man jedoch ein Erfolg erzielen.
jedoch nicht mit css, aber mit java script!
Sollte ich eine Lösung gefunden haben, werde ich davon berichten.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Language" content="en-us">
- <title>Have some fun :)</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script language="javascript">
- function prepareMouseOverImage(image, originalURL)
- {
- image.mouseOverImage=originalURL;
- image.onload=function(){return true;};
- image.normalImage=grayscale(image, false);
- image.onmouseover=function()
- {
- //alert("a");
- this.src=this.mouseOverImage;
- }
- image.onmouseout=function()
- {
- // alert(this.normalImage.src);
- this.src=this.normalImage;
- }
- image.src=image.normalImage;
- }
- function grayscale(image, bPlaceImage)
- {
- var myCanvas=document.createElement("canvas");
- var myCanvasContext=myCanvas.getContext("2d");
- var imgWidth=image.width;
- var imgHeight=image.height;
- // 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();
- }
- </script>
- </head>
- <body id="body">
- <div class="contentShadow">
- <div class="content">
- <img src="images/volcano.jpg" width="153" height="204" id="myImage" onload="javascript:prepareMouseOverImage(this, 'images/volcano.jpg');"></img>
- </body>
- </html>
txtnws123 - 8. Dez, 09:57
