onClick frameübergreifend verwenden

Computer: Software & Programmierung JavaScript & Script-Sprachen
1

Hallo!

Ein Linkbutton verändert durch JavaScript 2 mal sein Aussehen:

  1. Der Button, der geladen wird
  2. Sein Aussehen bei onMouseover
  3. Sein Aussehen bei onClick

Mein Scipt funktioniert nur innerhalb der Linkleiste (Linkleiste ist in einem eigenen Frame untergebracht).

Im Hauptfenster verweise ich gelegentlich - mit Link - auf eine weitere Unterseite. Allerdings nicht in Buttonform, sondern als normaler Link.

Wenn ich also im Hauptfenster auf eine weitere Seite klicke, soll sich natürlich der entsprechende Button in der Navigation mit verändern.

Auch wenn ich im Browser vor und zurück verwende, soll sich der Link in der Navigation anpassen.

Welchen Befehl muß ich zusätzlich in die Unterseiten einfügen?

Bitte um möglichst genaue Angaben.

Danke

Sonja

2

Hi Sonja!

Währe natürlich gut gewesen den Code zu sehen, mit dem du den Button wechselst.

Also ich würde das so machen:

  1. In deiner Menüseite eine Funktion mit der du das Aussehen der Buttons bestimmst.

Äh, das wird hier nicht die Lösung, sondern nur der Lösungsweg, also unter Umständen auch nur Kommentare:

// als Konstanten zum besseren lesen des Codes
var BUTTON_ROLLOVER=0,BUTTON_ROLLOUT=1,BUTTON_CLICK=2;
// hier merken wir uns den aktiven Button und einen über dem die
// Maus gerade steht, damit man die gezielt zurücksetzen kann.
var clickedButton=null;
var rollOverButton=null;
function setButton( derButton, jaWieDenn ) {
// den Button wieder normal darstellen, wenn er nicht angeclickt wurde
if( jaWieDenn == BUTTON_ROLLOUT ) {
rollOverButton=null;
if (clickedButton!=derButton) {
derButton.src="/images/"+derButton.name+"_normal.gif";
} else {
derButton.src="/images/"+derButton.name+"_aktiv.gif";
}
}
// den Button hervorheben, wenn die Maus drüber ist
if( jaWieDenn == BUTTON_ROLLOVER) {
rollOverButton = derButton;
// wenn er nicht angeclickt wurde anders zeichnen, als wenn er zusätzlich der aktive ist
if( clickedButton!=derButton ) {
derButton.src="/images/"+derButton.name+"_rollover.gif";
} else {
derButton.src="/images/"+derButton.name+"_roll_n_aktiv.gif";
}
}
if( jaWieDenn == BUTTON_CLICKED ) {
clickedButton = derButton;
if( rollOverButton!=derButton ) {
derButton.src="/images/"+derButton.name+"_aktiv.gif";
} else {
derButton.src="/images/"+derButton.name+"_roll_n_aktiv.gif";
}
}
}

So, das währe geschafft, iss wohl doch komplett geworden - alledings nicht getestet, debugging musste schon selbst machen! ;o)

In der Menüseite steht dann:

Und in allen anderen Seiten steht dann (vorausgesetzt dein Frame heisst MenuFrame):

das x musste natürlich in jeder Seite so ergänzen, dass der passende Button aktiviert wird.

Damit brauchst du dich bei normalen Links garnicht darum kümmern, welcher Button aktiviert werden muss. Dieses wissen steckt in den Seiten selbst.

Gruß
Benky

3

Äh, was noch fehlt ist natürlich das gezielte zurücksetzten vom aktiven Button, wenn ein neuer aktiv werden soll. Ist dann deine Hausaufgabe, das selbst mit rein zu basteln ;o)

Schö

4

Mein Code

Hallo!

Danke erstmal!

Hier folgt nun der Code, den ich bis jetzt verwendet habe:

<!-- Verstecken für ältere Browser

if (navigator.appVersion.indexOf(„2.“) != -1){
check = false;
}
if ((navigator.appVersion.indexOf(„3.“) != -1) && (navigator.appName.indexOf(„Explorer“) != -1)){
check = false;
}
else {
check = true;
}
if (check == true){
image1 = new Image();
image1.src = „bild1.gif“;
image1on = new Image();
image1on.src = „bild1a.gif“;
image1stay = new Image();
image1stay.src = „bild1b.gif“;

image2 = new Image();
image2.src = „bild2.gif“;
image2on = new Image();
image2on.src = „bild2a.gif“;
image2stay = new Image();
image2stay.src = „bild2b.gif“;

image3 = new Image();
image3.src = „bild3.gif“;
image3on = new Image();
image3on.src = „bild3a.gif“;
image3stay = new Image();
image3stay.src = „bild3b.gif“;

}

imageStay = „“

function imageon(name){
if (imageStay != name){
document[name].src = eval(name + „on.src“);
}
}
function imageoff(name){
if (imageStay != name){
document[name].src = eval(name + „.src“);
}
}

function on(name){
if (check == true){
imageon(name);
}
}
function off(name){
if (check == true){
imageoff(name);
}
}

function stay(name){
if (check == true){
document[name].src = eval(name + „stay.src“);
if (imageStay != name){
if (imageStay != „“){
document[imageStay].src = eval(imageStay + „.src“);
}
}
imageStay = name
}
}
// -->