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.
- <!DOCTYPE html PUBLIC "-
-
- <html xmlns="http:
-
- <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()
- {
-
- this.src=this.mouseOverImage;
- }
-
- image.onmouseout=function()
- {
- 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;
-
- myCanvas.width= imgWidth;
- myCanvas.height=imgHeight;
- myCanvasContext.drawImage(image,0,0);
-
- 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);
-
-
- if (bPlaceImage)
- {
- var myDiv=document.createElement("div");
- myDiv.appendChild(myCanvas);
- image.parentNode.appendChild(myCanvas);
- }
- 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
