Bilder grau, bei hover farbig

[Wishu]

Hallo zusammen,

hab da mal ne frage, gibt es die möglichkeit per CSS die bilder "von natur aus" grau zu haben und wenn man mit der maus drüber fährt des richtige bild mit farbe anzuzeigen? Also ich weiß dass es geht nur leider kenne ich nur die möglichkeit mit einem zweiten bild, welchem der Farbwert entzogen wurde. Geht es auch nur mit CSS ohne, dass ich extra jedes bild zweimal hochladen muss?
Ähnliche Effekte gehen auch ^^

Gruß
Wishu

[Ingo]

AW: Bilder grau, bei hover farbig

Hi,

gibt es die möglichkeit per CSS die bilder "von natur aus" grau zu haben

nein. aber möglicherweise bietet Microsoft dafür einen IE-Filter an.

Gruß
Ingo

[Wishu]

AW: Bilder grau, bei hover farbig

was will ich mit IE? xD soll ja bei allen browsern gleich aussehen.
gibt es da nichmal was annäherndes, vllt mit transparenz oder so?

Gruß
Wishu

[s1mple]

AW: Bilder grau, bei hover farbig

Meinst du sowas hier.? http://killcasper.de/content/media_foto.htm

Wenn ja.. würde mich auch mal interessieren..

[Laire]

AW: Bilder grau, bei hover farbig

Eine Möglichkeit ausser mit zwei Bildern gibt es glaube ich nicht...

[Wishu]

AW: Bilder grau, bei hover farbig

ja sowas in der art. naja eigentlich ja sowas ^^
hatte leider kein beispiel.
wie gesagt mit transparenz würde es glaube auch gehen, gibt es dazu ne möglichkeit? Denn könnt ichs erstmal ausprobieren.

Gruß
Wishu

[s1mple]

AW: Bilder grau, bei hover farbig

Ich würde sagen.. alle bilder auf gleiche größe bring.. dann mit photoshop oder so ein transparentes bild in der gleich größe erstellen.. und dann hoverst halt über alle bilder das transparente bild..

sry wenn ich mich falsch ausgedrückt hab..^^

[arko-fn]

AW: Bilder grau, bei hover farbig

das bsp ist ein js
einfach mal nach *scriptaculous* suchen und dann etwas *fummeln*...
oder das anfänger tutorial durchackern..

[mr1st]

AW: Bilder grau, bei hover farbig

Mein Vorschlag:
Das graue Bild als Hintergrundbild und das färbige Bild als normales Bild genau darüber einbinden.
Das färbige erst mit display: none; ausblenden und bei hover dann entsprechend einblenden.

[zab]

AW: Bilder grau, bei hover farbig

Trifft vielleicht nicht ganz die Frage, aber mit PHP ist es möglich. Falls Interesse besteht ,schau dir doch mal diesen Artikel aus dem Selfphp-Kochbuch an: http://www.selfphp.info/kochbuch/kochbuch.php?code=82
Gruß von Zab

[-ERROR-]

AW: Bilder grau, bei hover farbig

<img style="opacity: 0.5;" onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity='100'" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity='50'" src="xxxx" alt="" border="0">

So sollte es gehen.

[shadaik]

AW: Bilder grau, bei hover farbig

Hallo zusammen,

hab da mal ne frage, gibt es die möglichkeit per CSS die bilder "von natur aus" grau zu haben und wenn man mit der maus drüber fährt des richtige bild mit farbe anzuzeigen? Also ich weiß dass es geht nur leider kenne ich nur die möglichkeit mit einem zweiten bild, welchem der Farbwert entzogen wurde. Geht es auch nur mit CSS ohne, dass ich extra jedes bild zweimal hochladen muss?
Ähnliche Effekte gehen auch ^^

Gruß
Wishu

Das sollte mit CSS 3.0 gehen, das graue Bild über das richtige legen und mit einer Transparenz versehen, dann eine eigene Transparenz (opacity:0) für hover hinzufügen.

Hier eine Lösung über die base.css für Transparenz, die ich mal ausprobiert habe und bei deinem Vorhaben funktionieren sollte:

.trans { filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; }

filter:Alpha ist für IE
-moz-opacity ist für Mozilla/Firefox
opacity ist reines CSS 3.0, also die kommende CSS-Version, die Firefox zum Teil bereits vorab unterstützt.

Wobei ich jetzt nicht weiss, wie man eine andere Transparenz bei hover zuweist.

Hinzu kommt das Problem, dass nur die letzten Versionen der Browser und bisher auch nur Firefox und IE das verarbeiten können.
Aber vielleicht findet noch wer eine Lösung für die wichtigsten anderen Browser.

edit: Oder die Inline-Lösung von Mr. 619 da über mir, die hat auch hover mit drin. Hat ich nicht gesehen, das Posting.

[Wishu]

AW: Bilder grau, bei hover farbig

hab jetzt erstmal das von Mr.619 genommen, wobei da das problem ist, dass es nur Im FF funzt und auch nur mit Javascript. bisher nur im Footer und bei Über mich.

Gruß
Wishu

[tim-er]

AW: Bilder grau, bei hover farbig

Mit CSS geht das glaube ich nicht, jedenfals auf garkeinenfall alleine. Könnte unter umständen mit java-script zusammen funken, ka. Ich verstehe nur nicht ganz warum du unbedingt dabei css verwenden willst. Einfach ganz normalen hover mit zwei bilder das erste grau und dann das zweite farbig.

Aber vielleicht hilf dir ja dieser Queltext, must halt nur auf deine Sachen abstimmen, bei Fragen Frag!


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>bla bla bla</title>
<style type="text/css">
<!--
body {
background-image: url(background.jpg);
}
#Layer11 {
position:absolute;
left:25px;
top:100px;
width:900px;
height:120px;
z-index:11;
}
.Stil1 {
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#Layer12 {
position:absolute;
left:25px;
top:240px;
width:900px;
height:120px;
z-index:12;
}
-->
</style>
<script type="text/JavaScript">
<!--

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('downbild.jpg','overbild. jpg','overbeidownbild.jpg','downbild2.jpg','overbi ld2.jpg','overbeidownbild2.jpg')">
<div id="Layer1" style="position: absolute; left: 134px; top: 46px; width: 71px; height: 30px; z-index: 1"> <a href="zielseite.html" target="_self" onclick="MM_nbGroup('down','group1','Elementname', 'downbild.jpg',1)" onmouseover="MM_nbGroup('over','Elementname','over bild.jpg','overbeidownbild.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="upbild.jpg" alt="alternativtext" name="Elementname" border="0" id="presse" onload="" /></a></div>
<div id="Layer2" style="position: absolute; left: 315px; top: 47px; width: 65px; height: 30px; z-index: 2"> <a href="zielseite 2.html" target="_self" onclick="MM_nbGroup('down','group1','Elementname2' ,'downbild2.jpg',1)" onmouseover="MM_nbGroup('over','Elementname2','ove rbild2.jpg','overbeidownbild2.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="upbild2.jpg" alt="alternativtext2" name="Elementname2" border="0" id="news" onload="" /></a></div>
</body>
</html>



MFG

tim-er

[Wishu]

AW: Bilder grau, bei hover farbig

es soll mit CSS sein, damit es bei jedem Funktioniert, da Javascript bei vielen leider aus ist. und mit 2 bildern könnte ich es wie gesagt auch selbst hinbekommen ^^
aber trotzdem danke
Gruß
Wishu