2 Bilder [Buttons] überblenden?

TPH · 17. Juni 2006

Hi,
ich habe ein Problem.
Ich möchte gerne zwei Bilder überblenden, sodass ein Hovereffekt entsteht.
Es mir schon eine Lösung gelungen, aber die funktioniert nur im IE.

http://home.arcor.de/rrqneo75

Dies ist ein RiP aus dem Design.
Öffnet es im IE und ihr werdet sehen was ich meine.

Ich suche eine Möglichkeit das auch im FireFox so darzustellen, da ja nun viele diesen Browser nutzen...

Ich bin sehr großzügig mit 10'ern

Anzeige

tecnision · 17. Juni 2006

Code:

<a href="../?sec=iLog"><img src="[B]./gfx/biLogA.jpg[/B]"
 onMouseOver="this.src='[B]./gfx/biLogA.jpg[/B]';"
 onMouseOut="this.src='.[B]/gfx/biLogA.jpg[/B]';" border="0"></a>

Ausschnitt aus meinem Source.

Musst du für dich anpassen.
Bei mir funktioniert das nur sauber, da ich in den "fetten" Abschnitt via PHP steuer.
Ist jetzt nen bissel schwierig zu erklären ohne es zeigen zu können

Edit: Okay, siehst ja was fett sein soll.. klappt nur net so

Mutator · 17. Juni 2006

Also wenn du des mit CSS machen würdest funzt es auch auf anderen Browsern funzen...

Code:

a:link
 {
 background-image:(URL pic.1); //hier des normale pic rein
 }
a:hover
 {
 background-image:(URL-pic.2); //und hier des andere für den Hover effect
 }

a:visited
 {
 background-image:(URL-pic.1); //wieder des 1. Pic damit des wieder kommt 
 }

a:visited muss rein da sonst des gar nicht funktioniert!

Ich hoffe dir geholfen zu haben

greetz

TPH · 18. Juni 2006

So 10'er habt ihr...
Hat mir leider nicht viel geholfen, weil ich die Pics ja jetzt animieren müsste...
Ich mach das jetzt ohne Fading...

@tecnision:

Was hat denn bitte der Fadingeffekt mit PHP zu tun??

scriptkiddy · 18. Juni 2006

Ich habs so gemacht:

Code:

<script language="JavaScript" 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>

So wird das dann aufgerufen

Code:

<a href="LINK" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','bilder/members_over.jpg',1)"><img src="bilder/members.jpg" name="Image13" width="176" height="19" border="0"></a>

Cydoc · 18. Juni 2006

2 Bilder "überlappen"

oder Erst das eine Bild und bei MouseOver das andere?

Denn das sind 2 verschiedene Dinge

Hier z.b. ändert sich die backgroundgrafik, was du auf bilder anpassen könntest:

Klick Mich HART

Nützliche Suchen

2 Bilder [Buttons] überblenden?

Videos zum Themenbereich