Mousover-Effekt

morphy` · 5. Dezember 2009, 23:46

Hi,

Ich hab da eine kleine Fragen, undzwar würd ich auf meinem Portfolio gerne einen dezenten Mouseover-Effekt einbauen.
Es sollte so aussehen:
Wenn ich mit der Maus über den Button fahre soll das Bild hinter dem Button leicht hervorgeht, also vonn hell(nichts) nach dunkel(jetzige farbe) wechselt. Und wenn man wieder vom button runtergeht sollte es von Dunkel nach Hell wechseln.

In etwa so:
[Blockierte Grafik: http://img5.imagebanana.com/img/bgn74ymr/button.gif]

morphy` · 6. Dezember 2009, 23:03

keiner?:(

henny2212 · 6. Dezember 2009, 23:26

hmmm das sollte mit javascript zu realisieren sein:

brauchst halt nur 2 grafiken....

Quellcode

<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>
<body onLoad="MM_preloadImages('DEINE_GRAUE_GRAFIK.png')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','DEINE_GRAUE_GRAFIK.png',1)"><img src="DEINE_WEIßE_GRAFIK.png" name="Image2" width="350" height="100" border="0"></a>

Alles anzeigen

LG

morphy` · 7. Dezember 2009, 12:55

henny2212 schrieb:

hmmm das sollte mit javascript zu realisieren sein:

brauchst halt nur 2 grafiken....

Quellcode

<script type="text/javascript">



</script>

<body onLoad="MM_preloadImages('DEINE_GRAUE_GRAFIK.png')"><a href="/index.php?form=PostAdd&threadID=7491#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','DEINE_GRAUE_GRAFIK.png',1)"><img src="DEINE_WEIßE_GRAFIK.png" name="Image2" width="350" height="100" border="0"></a>

Alles anzeigen

LG

Leider zeigt er nur einen normalen Hover an:
dennis92.de/hover/hover.html

Erasel · 7. Dezember 2009, 20:04

Hey,

willst du dass der Hintergrund langsam dunkler wird oder willst du einfach nur eine Grafik auswechseln?

Gruß,
Erasel

morphy` · 7. Dezember 2009, 22:26

Erasel schrieb:

Hey,

willst du dass der Hintergrund langsam dunkler wird oder willst du einfach nur eine Grafik auswechseln?

Gruß,
Erasel

Er sollte langsam dunkler werden, also der strich oben drüber. Und wenn man runtergeht vom Button wieder heller.

Erasel · 8. Dezember 2009, 07:36

Hey,

das nennt man "fadeing"...

Ich hab das zwar selber noch nie verwendet und deswegen noch keine Ahnung wie das funktioniert aber hier hast du ein Beispiel mit Code:
switchonthecode.com/tutorials/…ial-simple-fade-animation

Gruß,
Erasel

morphy` · 11. Dezember 2009, 17:56

Danke, aber wie bekomme ich das so hin, das es sich bei rüberfahren dunkle wird, also ein anderes Bild kommt und wenn man wieder runtergeht das bild verschwindet, hier ist es genau anders rum, das bild verschwindet mit samt dem Text.

Erasel · 11. Dezember 2009, 18:05

Hey,

schau dir den Code an. Du must das ganze nur umdrehen.

Fertigen Code zum Kopieren werde ich dir nicht Posten. Sonst lernst du ja garnichts

Mousover-Effekt

Mousover-Effekt

Quellcode

henny2212 schrieb:

Quellcode

Erasel schrieb:

Teilen

Benutzer online 1

Tags