Button in drei Ansichten

sperlingo · 3 Mai 2006

Hallo,

würde gerne Buttons in drei Ansichten bzw. drei Versionen nutzen. Normal Ansicht, wenn der Mauszeiger auf dem Button ist und wenn dieser aktiv ist (Um dem Benutzer anzuzeigen, wo er sich befindet).

Ist das ein Flash oder Skript, dass mir dieses ermöglicht oder kann ich das einfach selbst erstellen? Ach ja, die Buttons befinden sich in deiner anderen Frame, welche nicht bei jedem Klick neu geladen werden sollte.

Vielleicht hat auch jemand einen Quellcode für dieses Problem parat.

Wenn du nicht weißt was ich meine, unter www.bilder-allee.de findest du diese Art von Buttons. Leider ist es ein Baukasten von 1&1 und kann in diesem Quellcode nichts finden.

Gruß

sperlingo

mister.dre · 3 Mai 2006

Hi sperlingo,

also du hast da verschiedene Möglichkeiten. Wenn du nicht willst, dass die Grafiken bei jedem Klick neu geladen werden sollten, dann würde ich das ganze mit JavaScript lösen.

Im "onload" die Image-Objekte erzeugen und dann die Links mit den nötigen Event-Handlern versehen. "onmouseover" und "onclick". Dort dann die Grafiken durch die im "onload" erzeugten Image-Objekte durchtauschen.

Ich hoffe, dass ich dir helfen konnte.

Gruß,
Dre

sperlingo · 3 Mai 2006

Tja,

und schon bin ich an meiner Grenze. Java kann ich leider nicht, ich weiß auch nicht darüber. Ist das einfach eine Zeile, die ich in mein Quelltext einfüge und das die Bilder verlinke?

Sorry, meine Erfahrung im Bereich Webdesign ist nicht so groß und bezieht sich eher aufs Design als auf die Geschichte dahinter.

sperlingo

mister.dre · 3 Mai 2006

OK. No problem.

First of all: JavaScript != Java.

Hau einfach den folgenden Code in eine Datei: button-configurator.js und binde diese in den Header deiner (X)HTML Seite ein:

Code:

<script type="text/javascript" src="pfad/zu/button-configurator.js"</script>

button-configurator.js

Code:

/// Wird nach dem Laden der Seite ausgeführt
window.onload = function() {
  doStartTransactions();
}

// Ist fuer moderne Browser mit neuem "caching system" relevant (z. B. Firefox 1.5x)
window.onpageshow = function(theEvent) {
  if (theEvent.persisted) {
    doStartTransaction();
  }
};

doStartTransactions = function() {
  var /* Object */ objImgNormalButton = new Image();
  var /* Object */ objImgClickedButton = new Image();
  var /* Object */ objImgMouseOverButton = new Image();

  objImgNormalButton.src = "pfad/zu/normal/button.jpg";
  objImgClickedButton.src = "pfad/zu/clicked/button.jpg";
  objImgMouseOverButton.src = "pfad/zu/mouseover/button.jpg";
};


handleButtons = function(e, theImage) {

  switch (e.toLowerCase()) {
    "onclick" :
      theImage.src = objImgClickedButton.src;

      // TODO: Hier muessen ggf. noch alle anderen Buttons zurueckgesetzt werden.

    break;

    "onmouseover" :
      theImage.src = objImgMouseOverButton.src;
    break;

    "onmouseout" :
      theImage.src = objImgNormalButton.src;
    break;

  }

};

Jetzt musst du noch die Event-Handler mit den Funktionen deklarieren:

Code:

[img]pfad/zu/image/button.jpg[/img]

So das wäre es schon. Bitte beachte, dass diese Lösung nur mal ebend so aus dem Handgelenk entstanden ist. Ich habe das nicht getestet. Soll aber auch nur ein Denkanstoss sein. Für nähere Informationen bezüglich JavaScript, kann ich dir: http://de.selfhtml.org/javascript/index.htm empfehlen.

Gruß,
Dre

Edit: Ach so. An die Moderatoren: Vielleicht ist das jetzt doch ein JavaScript Thema geworden und sollte verschoben werden :?:

sperlingo · 3 Mai 2006

Hab es sofort ausprobiert. Klapt aber leider noch nicht. Wahrscheinlich liegt es daran, dass ich das Script nicht eingebunden bekommen.

Indexcode:

Code:

<html>

<head>
<title>Impressum</title>
<script type="text/javascript" src="button-configurator.js"</script>
</head>

<body bgcolor="B69572" text="white" link="blue" vlink="purple" alink="red">

[img]1.jpg[/img]

</body>

</html>

Scriptcode:

Code:

/// Wird nach dem Laden der Seite ausgeführt 
window.onload = function() { 
  doStartTransactions(); 
} 

// Ist fuer moderne Browser mit neuem "caching system" relevant (z. B. Firefox 1.5x) 
window.onpageshow = function(theEvent) { 
  if (theEvent.persisted) { 
    doStartTransaction(); 
  } 
}; 

doStartTransactions = function() { 
  var /* Object */ objImgNormalButton = new Image(); 
  var /* Object */ objImgClickedButton = new Image(); 
  var /* Object */ objImgMouseOverButton = new Image(); 

  objImgNormalButton.src = "1.jpg"; 
  objImgClickedButton.src = "3.jpg"; 
  objImgMouseOverButton.src = "2.jpg"; 
}; 


handleButtons = function(e, theImage) { 

  switch (e.toLowerCase()) { 
    "onclick" : 
      theImage.src = objImgClickedButton.src; 

      // TODO: Hier muessen ggf. noch alle anderen Buttons zurueckgesetzt werden. 

    break; 

    "onmouseover" : 
      theImage.src = objImgMouseOverButton.src; 
    break; 

    "onmouseout" : 
      theImage.src = objImgNormalButton.src; 
    break; 

  } 

};

Vielleicht habe ich auch noch Fehler eingebaut. Bitte um Durchsicht, damit ich diese Funktion besser verstehe.

Danke für eure (deine) Hilfe

sperlingo

THE_fan · 3 Mai 2006

Es fehlt das ">" nach dem

Code:

<script type="text/javascript" src="button-configurator.js"

Weiß nicht ob es daran liegt, fiel mir aber als erstes auf ;)

mister.dre · 3 Mai 2006

Ja das war auch ein Problem. Waren aber noch ein paar andere Fehler drin.

Hab den Code nun mal durchgetestet. Hier nun der funktionsfähige Code:

HTML-Datei:

Code:

<html>

<head>
<title>Impressum</title>
<script type="text/javascript" src="button-configurator.js"></script>
</head>

<body bgcolor="B69572" text="white" link="blue" vlink="purple" alink="red">

[img]1.jpg[/img]

</body>

</html>

Und die JavaScript-Datei:

Code:

/// Wird nach dem Laden der Seite ausgeführt
window.onload = function() {
  doStartTransactions();
}

// Ist fuer moderne Browser mit neuem "caching system" relevant (z. B. Firefox 1.5x)
window.onpageshow = function(theEvent) {
  if (theEvent.persisted) {
    doStartTransaction();
  }
};

doStartTransactions = function() {
  this.objImgNormalButton = new Image();
  this.objImgClickedButton = new Image();
  this.objImgMouseOverButton = new Image();

  this.objImgNormalButton.src = "1.jpg";
  this.objImgClickedButton.src = "3.jpg";
  this.objImgMouseOverButton.src = "2.jpg";
};


handleButtons = function(theEvent, theImage) {

  switch (theEvent) {
    case "click" :
      theImage.src = objImgClickedButton.src;

      // TODO: Hier muessen ggf. noch alle anderen Buttons zurueckgesetzt werden.
    break;

    case "mouseover" :
      theImage.src = objImgMouseOverButton.src;
    break;

    case "mouseout" :
      theImage.src = objImgNormalButton.src;
    break;

  }
};

Probier es mal aus.

Gruß,
Mr. Dre

sperlingo · 3 Mai 2006

Ich bin begeistert. Es klapt. Eine kleine Sache noch und ich bin überglücklich.

Wie sieht das ganze asu, wenn ich mehrere Buttons habe?

Code:

html> 

<head> 
<title>Impressum</title> 
<script type="text/javascript" src="button-configurator.js"></script> 
</head> 

<body bgcolor="B69572" text="white" link="blue" vlink="purple" alink="red"> 

[img]1.jpg[/img] 

[img]4.jpg[/img] 
</body> 

</html>

und

Code:

/// Wird nach dem Laden der Seite ausgeführt 
window.onload = function() { 
  doStartTransactions(); 
} 

// Ist fuer moderne Browser mit neuem "caching system" relevant (z. B. Firefox 1.5x) 
window.onpageshow = function(theEvent) { 
  if (theEvent.persisted) { 
    doStartTransaction(); 
  } 
}; 

doStartTransactions = function() { 
  this.objImgNormalButton = new Image(); 
  this.objImgClickedButton = new Image(); 
  this.objImgMouseOverButton = new Image(); 

  this.objImgNormalButton.src = "1.jpg"; 
  this.objImgClickedButton.src = "3.jpg"; 
  this.objImgMouseOverButton.src = "2.jpg"; 
}; 

doStartTransactions = function() { 
  this.objImgNormalButton = new Image(); 
  this.objImgClickedButton = new Image(); 
  this.objImgMouseOverButton = new Image(); 

  this.objImgNormalButton.src = "4.jpg"; 
  this.objImgClickedButton.src = "6.jpg"; 
  this.objImgMouseOverButton.src = "5.jpg"; 
}; 


handleButtons = function(theEvent, theImage) { 

  switch (theEvent) { 
    case "click" : 
      theImage.src = objImgClickedButton.src; 

      // TODO: Hier muessen ggf. noch alle anderen Buttons zurueckgesetzt werden. 
    break; 

    case "mouseover" : 
      theImage.src = objImgMouseOverButton.src; 
    break; 

    case "mouseout" : 
      theImage.src = objImgNormalButton.src; 
    break; 

  } 
};

Oder mache ich mir das zu einfach? Was ist mit dem weiteren zurücksetzten?

Leider klapt das nicht so ganz. Und ich muß geblockte Inhalte freigeben, was aber auch schon vorher der Fall war.

mister.dre · 3 Mai 2006

OK. Bevor ein Button angeklickt wird, müssen alle anderen Buttons wieder auf den "Normal-Button" zurückgesetzt werden.

Damit müsste es funktionieren:

Code:

handleButtons = function(theEvent, theImage) {

  switch (theEvent) {
    case "click" :

      // Alle Buttons auf den normalen Button zuruecksetzen
      for (var i = 0; i < document.images.length; ++i) {
        if (document.images[i].alt == "button-image") {
          document.images[i].src = objImgNormalButton.src;
        }
      }

      // Nur den gedrueckten Button auf "clicked" Button setzen
      theImage.src = objImgClickedButton.src;

    break;

    case "mouseover" :
      theImage.src = objImgMouseOverButton.src;
    break;

    case "mouseout" :
      theImage.src = objImgNormalButton.src;
    break;

  }
};

Beachte, dass dies nur die handleButtons()-Funktion ist. Der Rest bleibt so.
Weiter muss, damit die Funktion weiß, welcher Button in das Menü gehört und welcher nicht, ein Kennzeichen an alle relevanten "Menü-Buttons" gehängt werden:

Code:

[img]1.jpg[/img]

Das müsste klappen. Wie gesagt, hab ich wieder nicht getestet.

Bis denne,
Mr. Dre

sperlingo · 3 Mai 2006

Weiter muss, damit die Funktion weiß, welcher Button in das Menü gehört und welcher nicht, ein Kennzeichen an alle relevanten "Menü-Buttons" gehängt werden:

Ist alt="..." das relevante Kennzeichen? Und muss ich den "handleButtons.." für jedes neue Button mit der Kennzeichnung erstellen?

Klappt leider noch nicht.

Code:

/// Wird nach dem Laden der Seite ausgeführt 
window.onload = function() { 
  doStartTransactions(); 
} 

// Ist fuer moderne Browser mit neuem "caching system" relevant (z. B. Firefox 1.5x) 
window.onpageshow = function(theEvent) { 
  if (theEvent.persisted) { 
    doStartTransaction(); 
  } 
}; 

doStartTransactions = function() { 
  this.objImgNormalButton = new Image(); 
  this.objImgClickedButton = new Image(); 
  this.objImgMouseOverButton = new Image(); 

  this.objImgNormalButton.src = "1.jpg"; 
  this.objImgClickedButton.src = "3.jpg"; 
  this.objImgMouseOverButton.src = "2.jpg"; 
}; 

doStartTransactions = function() { 
  this.objImgNormalButton = new Image(); 
  this.objImgClickedButton = new Image(); 
  this.objImgMouseOverButton = new Image(); 

  this.objImgNormalButton.src = "4.jpg"; 
  this.objImgClickedButton.src = "6.jpg"; 
  this.objImgMouseOverButton.src = "5.jpg"; 
}; 
handleButtons = function(theEvent, theImage) { 

  switch (theEvent) { 
    case "click" : 

      // Alle Buttons auf den normalen Button zuruecksetzen 
      for (var i = 0; i < document.images.length; ++i) { 
        if (document.images[i].alt == "home") { 
          document.images[i].src = objImgNormalButton.src; 
        } 
      } 

      // Nur den gedrueckten Button auf "clicked" Button setzen 
      theImage.src = objImgClickedButton.src; 

    break; 

    case "mouseover" : 
      theImage.src = objImgMouseOverButton.src; 
    break; 

    case "mouseout" : 
      theImage.src = objImgNormalButton.src; 
    break; 

  } 
}; 
handleButtons = function(theEvent, theImage) { 

  switch (theEvent) { 
    case "click" : 

      // Alle Buttons auf den normalen Button zuruecksetzen 
      for (var i = 0; i < document.images.length; ++i) { 
        if (document.images[i].alt == "bilder") { 
          document.images[i].src = objImgNormalButton.src; 
        } 
      } 

      // Nur den gedrueckten Button auf "clicked" Button setzen 
      theImage.src = objImgClickedButton.src; 

    break; 

    case "mouseover" : 
      theImage.src = objImgMouseOverButton.src; 
    break; 

    case "mouseout" : 
      theImage.src = objImgNormalButton.src; 
    break; 

  } 
};

und

Code:

html> 

<head> 
<title>Impressum</title> 
<script type="text/javascript" src="button-configurator.js"></script> 
</head> 

<body bgcolor="B69572" text="white" link="blue" vlink="purple" alink="red"> 

[img]1.jpg[/img]  

[img]4.jpg[/img] 
</body> 

</html>

:?: :?: :?:

sperlingo · 3 Mai 2006

Oder muss ich unter

Code:

[img]1.jpg[/img]

in der Klammer den event eingeben und dann im Javascript unter funktion?[/quote]

mister.dre · 3 Mai 2006

Nee eigentlich musst du nur, wenn du einen neuen Button hinzufügst, diesen nach dem folgenden Schema einfügen.

Code:

[img]1.jpg[/img] 


[img]1.jpg[/img]

Den JavaScript-Code musst du nicht mehr anpassen. Das "alt-Attribute" ist das Kennzeichen: button-image

Code:

/// Wird nach dem Laden der Seite ausgeführt
window.onload = function() {
  doStartTransactions();
}

// Ist fuer moderne Browser mit neuem "caching system" relevant (z. B. Firefox 1.5x)
window.onpageshow = function(theEvent) {
  if (theEvent.persisted) {
    doStartTransaction();
  }
};

doStartTransactions = function() {
  this.objImgNormalButton = new Image();
  this.objImgClickedButton = new Image();
  this.objImgMouseOverButton = new Image();

  this.objImgNormalButton.src = "1.jpg";
  this.objImgClickedButton.src = "3.jpg";
  this.objImgMouseOverButton.src = "2.jpg";
}; 

handleButtons = function(theEvent, theImage) {

  switch (theEvent) {
    case "click" :

      // Alle Buttons auf den normalen Button zuruecksetzen
      for (var i = 0; i < document.images.length; ++i) {
        if (document.images[i].alt == "button-image") {
          document.images[i].src = objImgNormalButton.src;
        }
      }

      // Nur den gedrueckten Button auf "clicked" Button setzen
      theImage.src = objImgClickedButton.src;

    break;

    case "mouseover" :
      theImage.src = objImgMouseOverButton.src;
    break;

    case "mouseout" :
      theImage.src = objImgNormalButton.src;
    break;

  }
};

Die Buttons, die du in der Seite einfügst sind doch alle gleich, oder? Oder hast du für jeden Menüpunkt einen eigenen Button erstellt?

Das Skript funktioniert im Moment nur so:

Button-Normal -> Button der angezeigt wird, wenn er nicht angeklickt wurde und nicht mit der Maus drüber gefahren wird.

Button-Clicked -> Angeklickter Button

Button-MouseOver -> Button bei dem die Maus drüber fährt.

Ich würde nicht für jeden Menüpunkt einen eigenen Button erstellen, sondern den Text einfach via HTML und CSS auf die Grafiken legen.

Bis denne,
Mr. Dre

sperlingo · 3 Mai 2006

Oh, das ist eine gute Idee mit dem unterschiedlichen Text auf den selben Grafiken.

So werde ich dieses umsetzen.

Danke

Prophet · 3 Mai 2006

Moved: JavaScript

Verhueterli · 3 Mai 2006

Mit JavaScript ist das zu umständlich. Abgesehen davon hat nicht jeder Benutzer JavaScript. Ich rate dir zu CSS, das geht auch zügiger.

Code:

<style type="text/css">
<!--
    a#link:link // normal
    {
        [EIGENSCHAFTEN]
    }

    a#link:hover // mouseover
    {
        [EIGENSCHAFTEN]
    }

    a#link:active // aktiv
    {
        [EIGENSCHAFTEN]
    }
-->
</style>

[url="[URL]"][LINKNAME][/url]

CSS? Eigenschaften?

sperlingo · 3 Mai 2006

Und wo verlinke ich die Bilder?

mister.dre · 3 Mai 2006

Naja klar geht das mit CSS. Wird aber nicht von allen Browsern gleichermasen unterstützt. Gerade der IE unterstützt das :hover Pseudoelement nur für bestimmte XHTML-Tags.

Außerdem, warum soll das zügiger sein wenn die Grafiken bei dem ersten Mal nachgeladen werden? So kann es zu Verzögerungen im Effekt kommen. In dem JavaScript werden die Grafiken schon im "onload" geladen.

Naja wie auch immer.

Button in drei Ansichten

sperlingo

Neues Mitglied

mister.dre

Neues Mitglied

sperlingo

Neues Mitglied

mister.dre

Neues Mitglied

sperlingo

Neues Mitglied

THE_fan

Neues Mitglied

mister.dre

Neues Mitglied

sperlingo

Neues Mitglied

mister.dre

Neues Mitglied

sperlingo

Neues Mitglied

sperlingo

Neues Mitglied

mister.dre

Neues Mitglied

sperlingo

Neues Mitglied

Prophet

Super-Moderator

Verhueterli

Neues Mitglied

sperlingo

Neues Mitglied

mister.dre

Neues Mitglied

Neueste Beiträge