erweitertes Bildwechsel/Bildtausch script gesucht

[lucxx]

Hallo

Ich habe jetzt schon lange danach gesucht und selbst einiges ausprobiert, aber bis jetzt keine vernünftige Lösung gefunden.
Was ich suche ist folgendes

Ein script was sich für ein Menue nutzen läßt, mit mouseover-Eeffekt, Bildaustauch und Link.
Soll so funktionieren:
Ein Menue in einem zweigeteilten Frameset (links und rechts, das Menue ist links).
Das Menue besteht aus Bild 1 und Bild 2.
Bild1 zeigt Image1
Bild2 zeigt Image2

1.
Fährt man mit der Maus über Bild 1 oder Bild 2 ändert sich das jeweilige Bild von Image1 bzw. Image2 zu Image1b bzw. Image2b. (beim Verlassen des Bildes mit der Maus wird Image1b wieder zu Image1 bzw. Image2b zu Image2) ---ein ganz normaler mouseover/out-Effekt also - funktioniert auch

2.
Beim Anklicken von Bild1 oder Bild2, wird das jeweilige Bild durch Image1c bzw. Image2c ersetzt und im rechten Frame wird eine neue Seite geladen.
Also: nach dem Anklicken von Bild1 z.Bsp., ändert sich der Inhalt im rechten Frame und das erste Bild zeigt jetzt Image1c an (der mouseover/out Effekt darf hier jetzt allerdings nicht mehr funktionieren), beim zweiten Bild wird immer noch Image2 angezeigt mit funktionierenden mouseover/out-Effekt.
--- Link funktioniert und das Ersetzen von Image1 zu Image1c funktioniert auch, sobald ich aber mit der Maus das Bild verlasse wird der Mouseout-Effekt aktiv, bzw. beim erneuten darüberfahren mit der Maus der Mouseover-Effekt. Eigentlich muß der Mouseout/overEffekt beim Anzeigen von Image1c für Bild1 deaktiviert sein. Wohl mit einer Abfragefunktion über name oder id welches Image bei Bild1 gerade auf dem Bildschirm angezeigt wird (Image1 oder Image1c also) !?

3.
Zeigt Bild1 Image1c an und Bild2 Image2 darf also der Mousover/out-Effekt nur noch bei Bild2 funktionieren.
Klickt man jetzt auf Bild2 soll bei Bild2 jetzt Image2 durch Image2c getauscht, der mouseout/over-Effekt für Bild2 deaktiviert und im rechten Frame ein neuer Inhalt geladen werden.
Bei Bild1 muß jetzt aber wieder Image1 angezeigt werden mit aktivierten mousout/over Effekt.
---bekomm ich nicht hin !!

Ich hoffe man kann mir folgen und ich bin für jede Hilfe dankbar...

[Matthias Apsel]

Om nah hoo pez nyeetz, lucxx!

Ein Menue in einem zweigeteilten Frameset (links und rechts, das Menue ist links).

frames sind keine Lösung.

---ein ganz normaler mouseover/out-Effekt also - funktioniert

ohne Javascript, verwende zur Optimierung CSS-Sprites

Beim Anklicken von Bild1 oder Bild2, wird das jeweilige Bild durch Image1c bzw. Image2c ersetzt und im rechten Frame wird eine neue Seite geladen.

Falls es nur zwei Seiten sind, kannst du in jede Seite die Navigation reinschreiben, falls es dann mehrere werden schau in unsere FAQ, wie du Teile des Quelltextes auslagern kannst.

Also: nach dem Anklicken von Bild1 z.Bsp., ändert sich der Inhalt im rechten Frame und das erste Bild zeigt jetzt Image1c an (der mouseover/out Effekt darf hier jetzt allerdings nicht mehr funktionieren), beim zweiten Bild wird immer noch Image2 angezeigt mit funktionierenden mouseover/out-Effekt.

Ich hoffe man kann mir folgen und ich bin für jede Hilfe dankbar...

Was du beschreibst klingt sehr nach einer ganz normalen Navigation mit den Zuständen 'normal', 'gehovert' und 'aktuelle Seite', was völlig ohne Javascript funktioniert.

Matthias

[lucxx]

hi...

Falls es nur zwei Seiten sind, kannst du in jede Seite die Navigation reinschreiben, falls es dann mehrere werden schau in unsere FAQ, wie du Teile des Quelltextes auslagern kannst.

..am Ende sind es mehrere Seiten.

Ich hoffe man kann mir folgen und ich bin für jede Hilfe dankbar...

Was du beschreibst klingt sehr nach einer ganz normalen Navigation mit den Zuständen 'normal', 'gehovert' und 'aktuelle Seite', was völlig ohne Javascript funktioniert.

Matthias

im Prinzip ja, ich bekomm hin, das die Bilder ausgetauscht werden, mit js und css ...
Auch 'nen Hover Effekt.
Aber das der hover Effekt deaktiviert wird für das bild was per Mausklick select ist funzt net.
Ich klicke mit der Maus drauf, das Bild wird getauscht und das Bild bleibt  getauscht, aber nur solange ich nicht mit der Maus drüberfahre. Tue ich dies lädt er immer wieder den hover Effekt.

[ChrisB]

Hi,

Falls es nur zwei Seiten sind, kannst du in jede Seite die Navigation reinschreiben, falls es dann mehrere werden schau in unsere FAQ, wie du Teile des Quelltextes auslagern kannst.

..am Ende sind es mehrere Seiten.

Immer noch kein guter Grund für die Verwendung von Frames.

im Prinzip ja, ich bekomm hin, das die Bilder ausgetauscht werden, mit js und css ...
Auch 'nen Hover Effekt.
Aber das der hover Effekt deaktiviert wird für das bild was per Mausklick select ist funzt net.
Ich klicke mit der Maus drauf, das Bild wird getauscht und das Bild bleibt  getauscht, aber nur solange ich nicht mit der Maus drüberfahre. Tue ich dies lädt er immer wieder den hover Effekt.

Redest du, wenn du „hover Effekt“ schreibst, jetzt von der Verwendung der CSS-Pseudoklasse :hover, oder vom Wechsel des Bildes per JavaScript, ausgelöst durch mouserover/mouseout?

In ersterem Falle sorge dafür, dass der Selektor der :hover-Regel das „aktive“ Bild nicht mehr betrifft (bspw. durch Wegnahme einer Klasse);
in letzterem entferne entweder die Eventhandler vom „aktiven“ Bild (und füge sie wieder hinzu, wenn ein anderes zum „aktiven“ wird), oder lasse sie bestehen und aber einfach „nichts tun“, wenn sie beim Vergleich des Bildes, auf dem sie aufgerufen werden feststellen, dass es sich dabei um das „aktive“ handelt.

Alle diese Querelen wären vermutlich unnötig, wenn du einfach auf Frames verzichten würdest, und für jede Unterseite ein vollständiges HTML-Dokument ausgibst, dass die Kennzeichnung des „aktiven“ Menüpunktes gleich in der HTML-Struktur abbildet.

MfG ChrisB

[lucxx]

hi...

In ersterem Falle sorge dafür, dass der Selektor der :hover-Regel das „aktive“ Bild nicht mehr betrifft (bspw. durch Wegnahme einer Klasse);
in letzterem entferne entweder die Eventhandler vom „aktiven“ Bild (und füge sie wieder hinzu, wenn ein anderes zum „aktiven“ wird), oder lasse sie bestehen und aber einfach „nichts tun“, wenn sie beim Vergleich des Bildes, auf dem sie aufgerufen werden feststellen, dass es sich dabei um das „aktive“ handelt.

Also mal hier am Ende der Quelltext unter Verwendung von JS:
Beim Überfahren mit der Maus wird Bild1 mit Bild2 vertauscht und beim Verlassen des Bildes wieder zurückgetauscht.
Klickt man das Bild1 an, wird Bild4 angezeigt. Beim Verlassen des Bildes mit der Maus wird allerdings wieder Bild 1 angezeigt. Bild 4 soll aber angezeigt bleiben ohne den MouseoverEffekt.

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function swapArrow(bild){
  pfeilRechts = new Image();
  pfeilRechts.src = "4.gif";
  if(bild.src.indexOf('1.gif') == -1)
{
bild.src = pfeilRechts.src;
}
  }

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) { //v3.0
  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); 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>
</head>

<body onLoad="MM_preloadImages('3.gif')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','2.gif',1)"><img name="Image2" border="0" src="1.gif" width="32" height="27" onClick="swapArrow(this)"></a>
</body>
</html>

[Matthias Apsel]

Om nah hoo pez nyeetz, lucxx!

hier mal ein HTML/CSS-Vorschlag

<ul id="nav">  
  <li><a href="Seite1.html">Seite 1</a></li>  
  <li><a href="Seite2.html">Seite 2</a></li>  
  <li>Seite3</li> <!-- aktuelle Seite -->  
  <li><a href="Seite4.html">Seite 4</a></li>  
</ul>

#nav li, #nav a {background-image: url('Spritegrafik');  
                 background-position: ...;}  
  
#nav li {background-position: ... }  
  
#nav a:hover {background-position: ...} 

Erläuterungen zum CSS:

Zeile 1: alle li- und a-Elemente bekommen dieselbe Spritegrafik als Hintergrund, die so positioniert wird, dass sie den gewünschten Ausschnitt zeigt.

Zeile 3: die Spritegrafiken für die li werden so verschoben, dass der gewünschte Ausschnitt für die aktive Seite gezeigt wird.

Zeile 4: dito für gehoverte Links.

Dies funktioniert solange, wie du keine teiltransparenten Grafiken verwenden möchtest, da die Hintergrundgrafiken von li und a übereinanderliegen. Sind deine Grafiken teiltransparent, könntest du für die aktive Seite

<li><span>Seite 3</span></li>  

schreiben und entsprechend im CSS

#nav a, #nav span {background-image: url('Spritegrafik');  
                   background-position: ...;}  
  
#nav span {background-position: ... }  
  
#nav a:hover {background-position: ...} 

Matthias

[ChrisB]

Hi,

Also mal hier am Ende der Quelltext unter Verwendung von JS:

Wenn du meine Hinweise und Anregungen so verstanden hast, dass ich dir das einbaue, wenn du einfach nur den Quellcode hier abschüttest – dann hast du mich missverstanden.

Auf welchen Prinzipien dein vorhandenes Script basiert, solltest du dir erst mal selber klar machen; und dir dann die nötigen Grundkenntnisse zur Umsetzung der Anregungen aneignen, falls nicht vorhanden.

MfG ChrisB