mouseover effekt gesucht
Hallo Liebe Community,
ihr habt das sicherlich schon gesehen was ich suche ^^. ich suche einen Mouseover effekt der wie folgt ist.
z.B: eine Buttongrafik von einer Topliste soll grau sein und wenn man mit der maus drübber geht soll der button normal aussehen, das kann man ja nicht mit css machen oder? dafür ist javascript notwendig oder?
wenn ihr das wisst und vielleicht ne seite parat habt wäre klasse, danke
danke Thunder für deine Antwort. Habe es noch nicht getest werde es aber noch testen, ich versuchs dir mal nochmal zu erklären hoffe das es diesmal verständlicher ist.
Nehmen wir z.B diesen Button:
dieser sollte nicht farbig sein sondern grau und erst wenn ich mit der maus über den button gehe das der button die original farben bekommt wie ihr oben seht.
heißt das das ich den button selbst grau machen muss, mit photoshop?
jup das die mir im moment einzigste bekannte möglichkeit. bin aber grad noch am nachvorschen weil ich ma nen addon für nen cms in den händen hatte wo sowas anders gelöst wurd. melde mich wenn ich da erfolg hatte
__________________
das wäre klasse wenn du was findest ansonsten bearbeite ich es mit photoshop und mache es dann mit dem rollover.
Du kannst den button mit opacity transparent machen und nen grau hinterlegen 
also für button 1 machst du in der html das:
<div class="button"></div>
und in der css:
.button {
background: url(pfad/zum/bil.jpg) no-repeat #999; opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=75); /* IE lt 8 */ -ms-filter: "alpha(opacity=75)"; /* IE 8 */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FF lt 1.5, Netscape */ width:40px; height:20px; }
div.button:hover {
background: url(pfad/zum/bil.jpg) no-repeat transparent; opacity: 1; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=100); /* IE lt 8 */ -ms-filter: "alpha(opacity=100)"; /* IE 8 */ -khtml-opacity: 1; /* Safari 1.x */ -moz-opacity: 1; /* FF lt 1.5, Netscape */ }
bfad/zum/bil.jpg ist de rpfad zum farbigen button (also musste nich mit photoshop bearbeiten)
Gruß Julian
Klasse danke genau das habe ich gesucht, werde es testen sobald ich zuhause bin und dann bescheid geben
Was verstehst du unter "soll der Button normal aussehen". Du kannst mit 2 Grafiken einen Rollover machen. Bei Dreamweaver geht das ganz einfach.
Jedoch ohne Javascript kommst du da nicht aus. Hier mal ein Beispiel von Dreamweaver:
<script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script>
---------------------------------------
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','',Bild2',1)"><img src="Bild1" name="Image1" width="450" height="338" border="0" id="Image1" /></a>
__________________