Bilder tauschen!

Feldhofe

Feldhofe

Erfahrenes Mitglied
Hallo!!

Kann mir jemand helfen? Ich kenne mich mit Javascript nicht so gut es, es geht um folgendes:

Ich habe eine Button-Leiste, wenn man mit der Maus über einen bestimmten Knopf fährt, wird die Grafik durch eine andere ersetzt (beim ersten Bild ist die Grafik dunkel, beim zweiten hell).

Das Ganze sieht so aus:
-Überschriftsgrafik 1-
Button 1
Button 2
Button 3

-Überschriftsgrafik 2-
Button 4
Button 5
Button 6

Zusätzlich soll jedoch, wenn man einen der Knöpfe 1-3 "berührt", die Überschriftsgrafik 1 getauscht werden und bei Berühren einer der Knöpfe 4-6 die andere Überschriftsgrafik.

Alles klar??
Wäre sehr dankbar über Hilfe aller Art... :)

Gruß Feldhofe
 
Hey super, danke!!

Hier ist es!
Ist erstmal die Rohfassung zum Rumprobieren, auf die richtigen Bilder etc. baue ich's dann später um.

Es sollte nun noch zusätzlich zum einfachen Tauschen der Images immer das erste (Chatten) invertiert werden egal, welches der anderen drie man überfährt!!

Danke und Gruß
Feldhofe

Code: 
<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>

<script language="JavaScript">

<!--
function MM_swapImgRestore() { 
  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() { 
  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) { 
  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() { 
  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>
</head>

<!-- Preload -Teil -->
<body bgcolor="darkblue" text="white" link="yellow" vlink="yellow" alink="red" background="background.gif" 
onLoad="MM_preloadImages('chatten-inv.gif','sh-inv.gif','lyr-inv.gif','fh-inv.gif')">

<!-- erstes Bild -->
<a href="http://www.singleteenchat.de/chat.php" target="Aktionsfenster" onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('chatten','','chatten-inv.gif',1)">
<img name="chatten" border="0" src="chatten.gif"></a>


<!-- zweites -->
<a href="http://www.singleteenchat.de/siedler/sindex.htm" target="Aktionsfenster" onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('siedler','','sh-inv.gif',1)">
<img name="siedler" border="0" src="sh3.gif"></a>

<!-- drittes -->
<a href="http://www.singleteenchat.de/lyrics_index.htm" target="Aktionsfenster" onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('lyrics','','lyr-inv.gif',1)">
<img name="lyrics" border="0" src="lyr3.gif"></a>

<!-- viertes -->
<a href="http://www.singleteenchat.de/feldhofe.php" target="Aktionsfenster" onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('feldhofe','','fh-inv.gif',1)">
<img name="feldhofe" border="0" src="fh3.gif"></a>

</center>
</body>

</html>
 
Zuletzt bearbeitet:
ok, um das anzupassen, muss ich nochn bisschen üben, aber ich kanns auch anders:

in den img-tag des linkbildes einfach das hier einfügen:
Code: 
onMouseOver="document.DIE_ID_DES_ÜBERSCHRIFTBILDS.src='images/topic_over.gif'" onMouseOut="document.DIE_ID_DES_ÜBERSCHRIFTBILDS.src='images/topic.gif'"

"DIE_ID_DES_ÜBERSCHRIFTBILDS":
Der überschrift (dem Bild) eine id zuweisen (id="topic1" einfügen)
und den gleichen namen dort einfügen.

topic_over.gif:
das bild, was in der überschrift erscheinen soll, wenn man mit der maus in dem menü rummacht

topic.gif:
das normale bild

ich hoffe, dass das funzt.......bei mir gehts :)
 
Hey,
danke, werd's morgen mal ausprobieren!!
Hoffentlich klappt's auch bei mir, sonst müssen wir mal gucken, vielleicht klappt das ja auch noch mit dem anderen!

Ciao erstmal, Gruß Feldhofe!
 
Hmmm...geht leider nicht so richtig!

Eigentlich würde es doch reichen, wenn man zwei JS-Anweisungen verknüpft, wie geht denn sowas?

Wenn ich jetzt z.B. onMouseOver="MM_swapImage('charts','','l_charts_w.gif',1)" habe ich schon.

Nun soll beim onmouseover noch was zweites erfüllt werden: onMouseOver="MM_swapImage('ueber1','','ueber2.gif',1)"

Das müßte doch eigentlich auch gehen, oder?
Ich weiß wie gesagt nur nicht, wie man ihn dazu kriegt, daß beim onmouseout/onmouseover jeweils 2 Sachen erfüllt werden!?


Schöne Grüße
Feldhofe
 
mit nem strichpunkt trennen:
Code: 
onMouseOver="MM_swapImage('charts','','l_charts_w.gif',1);MM_swapImage('ueber1','','ueber2.gif',1)"
so gehts hoffentlich.....
 
Das funktioniert super!!
Echt klasse, sieht wirklich gut aus, wo alles funktioniert!

Danke!! :)

Schönen Gruß
Feldhofe
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück