Bei Click andere Grafik

[HudsonHawk]

Hi Leute.

Habe folgendes Problem:
Ich möchte ein einfaches, grafisches Menü, wo sich die
Grafiken beim OnMouseOver verändern und beim Anklicken eines
Menüpunktes die ON-Grafik oder auch eine andere Grafik geladen
wird und den Punkt somit hervorhebt. Praktisch dem Betrachter
signalisiert in welchem Untermenü er sich befindet. Am besten
wäre es, wenn auch der Link nach dem Drücken des Menüpunktes
inaktiv wäre aber das muss nicht unbedingt sein. Da ich von
JavaScript ABSOLUT KEINE AHNUNG habe und jetzt schon seit drei
Tagen an dem Script rumbastle würde es mich freuen wenn mir jemand
weiterhelfen könnte. Bisher habe ich folgendes zustande gebracht:

<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 img1_on =new Image();  img1_on.src ="images/1on.gif";
 img1_off=new Image();  img1_off.src="images/1off.gif";
 img1_act=new Image();  img1_act.src="images/1clickon.gif";
 img2_on =new Image();  img2_on.src ="images/2on.gif";
 img2_off=new Image();  img2_off.src="images/2off.gif";
 img2_act=new Image();  img2_act.src="images/2clickon.gif";
 img3_on =new Image();  img3_on.src ="images/3on.gif";
 img3_off=new Image();  img3_off.src="images/3off.gif";
 img3_act=new Image();  img3_act.src="images/3clickon.gif";
 img4_on =new Image();  img4_on.src ="images/4on.gif";
 img4_off=new Image();  img4_off.src="images/4off.gif";
 img4_act=new Image();  img4_act.src="images/4clickon.gif";
 img5_on =new Image();  img5_on.src ="images/5on.gif";
 img5_off=new Image();  img5_off.src="images/5off.gif";
 img5_act=new Image();  img5_act.src="images/5clickon.gif";
 img6_on =new Image();  img6_on.src ="images/6on.gif";
 img6_off=new Image();  img6_off.src="images/6off.gif";
 img6_act=new Image();  img6_act.src="images/6clickon.gif";
 img7_on =new Image();  img7_on.src ="images/7on.gif";
 img7_off=new Image();  img7_off.src="images/7off.gif";
 img7_act=new Image();  img7_act.src="images/7clickon.gif";
 img8_on =new Image();  img8_on.src ="images/8on.gif";
 img8_off=new Image();  img8_off.src="images/8off.gif";
 img8_act=new Image();  img8_act.src="images/8clickon.gif";
 img9_on =new Image();  img9_on.src ="images/9on.gif";
 img9_off=new Image();  img9_off.src="images/9off.gif";
 img9_act=new Image();  img9_act.src="images/9clickon.gif";
}

function movr(n) {
 if (document.images)
  eval('document.img'+n+'.src=img'+n+'_on.src');
}

function mout(n) {
 if (document.images)
  eval('document.img'+n+'.src=img'+n+'_off.src');
}

function activ(n) {
 if (document.images)
  eval('document.img'+n+'.src=img'+n+'_act.src');
}

function handleOver() {
 if (document.images)
  document.imgName.src=img_on.src;
}

function handleOut() {
 if (document.images)
  document.imgName.src=img_off.src;
}

function handlePressed() {
 if (document.images)
  document.imgName.src=img_act.src;
}

// Ende -->

</script>

Im Menü selbst sieht es dann so aus:

<a href="seite.shtml" onMouseOver="movr(3);return true;" onMouseOut="mout(3);return true;" onClick="activ(3);return true;"><img name=img3 width=130 height=24 border=0 src="images/3off.gif"></a>

Also das OnmouseOver funktioniert aber das "Click" nicht.
Woran liegt es ? Ich sollte noch dazu sagen, dass das Menü als
SSI reingeladen wird aber das sollte in dem Fall eigentlich nicht
stören... Bitte helft mir mit dem Click weiter. Danke im voraus !!!

[Thorsten Reiter]

Hi Hudson,

Ich möchte ein einfaches, grafisches Menü, wo sich
beim Anklicken eines
Menüpunktes die ON-Grafik oder auch eine andere Grafik geladen
wird und den Punkt somit hervorhebt. Praktisch dem Betrachter
signalisiert in welchem Untermenü er sich befindet.

Wenn eh eine neue Seite geladen wird, ist mir nicht klar, was das sol??

Aber, egal...

Versuche mal folgendes

<script language="JavaScript">
<!--

var chngImg = new Array();
for (var im=0; im<10; im++){
 chngImg[im]=1}
// im<10 für 9 Bilder im Menü

// PRELOADING IMAGES

function movr(n) {
if (document.images && chngImg[n]==1) // -Änderung !!
  eval('document.img'+n+'.src=img'+n+'_on.src');
}

function mout(n) {
if (document.images && chngImg[n]==1) // -Änderung !!
  eval('document.img'+n+'.src=img'+n+'_off.src');
}

function activ(n) {
if (document.images)
  {eval('document.img'+n+'.src=img'+n+'_act.src');

chngImg[n]==0}// -Änderung !!

Das könnte funktionieren

Grüße

Thorsten

[HudsonHawk]

Hi Hudson,

Ich möchte ein einfaches, grafisches Menü, wo sich
beim Anklicken eines
Menüpunktes die ON-Grafik oder auch eine andere Grafik geladen
wird und den Punkt somit hervorhebt. Praktisch dem Betrachter
signalisiert in welchem Untermenü er sich befindet.
Wenn eh eine neue Seite geladen wird, ist mir nicht klar, was das sol??

Aber, egal...

Versuche mal folgendes

<script language="JavaScript">
<!--
var chngImg = new Array();
for (var im=0; im<10; im++){
chngImg[im]=1}
// im<10 für 9 Bilder im Menü

// PRELOADING IMAGES

function movr(n) {
if (document.images && chngImg[n]==1) // -Änderung !!
  eval('document.img'+n+'.src=img'+n+'_on.src');
}

function mout(n) {
if (document.images && chngImg[n]==1) // -Änderung !!
  eval('document.img'+n+'.src=img'+n+'_off.src');
}

function activ(n) {
if (document.images)
  {eval('document.img'+n+'.src=img'+n+'_act.src');
      chngImg[n]==0}// -Änderung !!

Das könnte funktionieren

Grüße

Thorsten

Hi Thorsten.

Vielen Dank erstmal für Deine Hilfe aber es funktioniert leider
immer noch nicht. Hab alles verändert wie Du es oben geschrieben
hast aber der Button wird trotzdem nicht als aktiv angezeigt.
Das mit der neuen Seite hast Du falsch verstanden. Es wird zwar
eine neue Seite geladen aber das menuü bleibt ja gleich. Es soll
eben nur der Punkt "leuchten bleiben", der angeklickt wurde damit
der Besucher der Seite sieht in welchem Untermenü er sich grad
befindet. So wie auf der http://www.autsch.de wenn man die Seite
ohne Flash anzeigen lässt. Aber das Script was die dort benutzen
ist für mich JavaScript-DAU absolut unverständlich. Aber vielleicht
weisst Du dann was ich meine falls Du mir weiterhelfen willst.

[Michael Schröpl]

Hi auch,

Ich möchte ein einfaches, grafisches Menü, wo sich die
Grafiken beim OnMouseOver verändern und beim Anklicken eines
Menüpunktes die ON-Grafik oder auch eine andere Grafik geladen
wird und den Punkt somit hervorhebt. Praktisch dem Betrachter
signalisiert in welchem Untermenü er sich befindet.

wenn ich Dich richtig verstehe, dann willst Du das, was ich auf
http://www.homepages.de/home/schroepl/ tue, richtig?

Viele Grüße
      Michael

[HudsonHawk]

Hi auch,

Ich möchte ein einfaches, grafisches Menü, wo sich die
Grafiken beim OnMouseOver verändern und beim Anklicken eines
Menüpunktes die ON-Grafik oder auch eine andere Grafik geladen
wird und den Punkt somit hervorhebt. Praktisch dem Betrachter
signalisiert in welchem Untermenü er sich befindet.

wenn ich Dich richtig verstehe, dann willst Du das, was ich auf
http://www.homepages.de/home/schroepl/ tue, richtig?

Viele Grüße
      Michael

Hallo Michael.

Leider hast Du mich falsch verstanden.
Schaue Dir mal die http://www.autsch.de Seite an und zwar ohne Flash
dann weisst Du was ich meine. Das Script allerdings, was die dort
benutzen ist für mich leider unverständlich.

[Michael Schröpl]

Hi,

Leider hast Du mich falsch verstanden.
Schaue Dir mal die http://www.autsch.de Seite an und zwar ohne Flash
dann weisst Du was ich meine.

Nicht wirklich. Die machen auch rollover-Effekte mit Gedächtnis, genau
wie ich. (Mein Buttons werden weiß, wenn sie gedrückt werden.)

Dein Quelltext zeigt mir, daß Du den wesentlichen Trick, nämlich die
Bilder-Namen zu konkatenieren, verstanden hast. Wo ist dann das Problem?

Viele Grüße
      Michael

[HudsonHawk]

Hi,

Leider hast Du mich falsch verstanden.
Schaue Dir mal die http://www.autsch.de Seite an und zwar ohne Flash
dann weisst Du was ich meine.

Nicht wirklich. Die machen auch rollover-Effekte mit Gedächtnis, genau
wie ich. (Mein Buttons werden weiß, wenn sie gedrückt werden.)

Dein Quelltext zeigt mir, daß Du den wesentlichen Trick, nämlich die
Bilder-Namen zu konkatenieren, verstanden hast. Wo ist dann das Problem?

Viele Grüße
      Michael

Das Problem ist so einfach wie auch komplziert.
Also hier die einfachste Erklärung, die ich Dir bieten kann:
Die OFF-Grafiken sind grün, die ON Grafiken rot, die ACT Grafiken
auch rot. Also wenn die Buttons erscheinen, sind sie GRÜN, wenn
man mit der Maus drüberfährt werden sie ROT, wenn man dann ein Untermenü anklickt soll es ROT leuchten bleiben. Also praktisch die
OFF Grafik durch die ACT Grafik "ersetzen". Ich habe es schonmal mit
einem kleinen Script, welches nach dem Menü erst aufgerufen wird versucht die Grafiken auszutauschen, was auch geklappt hat aber sobald man wieder mit der Maus drübergefahren ist, hat er die OFF Grafik wieder reingeladen. Also muss ich mit dem jetzigen Script, wo gleich 3 verschiedene Grafiken benutzt werden weiterkommen können oder ? Ich weiss nicht ob das irgendwie damit zu tun haben könnte, dass das Menü selbst, also die Commandos OnMouseOver, OnMouseOut und onClick sich in einer SSI-Datei befinden und in die Seite Includet werden aber normalerweise doch nicht weil es dann eh zu einem grossen Document zusammengeführt wird also muss es am Script selber noch liegen. Ich hoffe ich nerve nicht zu sehr und Du kannst mir doch noch helfen :-) Vielen Dank.

[Michael Schröpl]

Hi,

was auch geklappt hat aber sobald man wieder mit der Maus drübergefahren ist, hat er die OFF Grafik wieder reingeladen.

Diesen Fall mußt Du natürlich abfangen. Beim Überfahren mußt Du Dich daran "erinnern", daß dieses Bild selektiert ist, und es anders behandeln als die anderen (nämlich den Hover-Effekt unterdrücken).

Ich weiss nicht ob das irgendwie damit zu tun haben könnte, dass das Menü selbst, also die Commandos OnMouseOver, OnMouseOut und onClick sich in einer SSI-Datei befinden und in die Seite Includet werden

Nein - wichtig ist nur der entstandene Quelltext, nicht die Art und Weise seiner Entstehung.

also muss es am Script selber noch liegen.

Ich selbst mache folgendes:

var selected = "";

function select (imageName)
{
  if (document.images)
     {
       if (selected  != "") { document [selected].src  = "_buttons/" + selected  + "_n.gif"; }
       if (imageName != "") { document [imageName].src = "_buttons/" + imageName + "_s.gif"; }
       selected = imageName;
     }
}

function hover (imageName, flag)
{
  if (document.images)
     {
       if (flag)
               {
                 /* onMouseOver */
                 if (imageName != "" && imageName != selected)
                 document [imageName].src = "_buttons/" + imageName + "_h.gif";
               }
          else {
                 /* onMouseOut */
                 if (imageName != selected)
                         { document [imageName].src = "_buttons/" + imageName + "_n.gif"; }
                    else { document [imageName].src = "_buttons/" + imageName + "_s.gif"; }
               }
     }
}

Einbindung: view-source:http://www.homepage.de/home/schroepl/_menu.htm
Behandlung: view-source:http://www.homepage.de/home/schroepl/hover.js

Viele Grüße
      Michael

[kerki]

Hallo !

Entschuldigt, wenn ich mich einmische, aber ich glaube, ihr redet aneinander vorbei.

Sowohl das genannte Referenz-Beispiel "www.autsch.de" wie auch Michaels Lösung arbeiten in Zusammenhang mit Frames.

"Unser Meisterdieb" möchte das Menü aber mittels SSI (nicht mit Frames!) in seine Seiten einbauen.

Somit eignet sich der ganze JavaScript-Ansatz in meinen Augen überhaupt nicht, da somit ja das JavaScript auf jeder Seite quasi bei null anfängt, es sei denn man übergibt einen Parameter von einer Seite zur nächsten, oder fragt im JavaScript selbst ab, in welcher Seite es denn aufgefrufen wurde.

Inwiefern (und ob überhaupt) sich das mit JavaScript realisieren lässt, kann ich leider nicht sagen, JavaScript ist nicht gerade mein Spezialgebiet.

Kommen evtl. andere _serverseitigen_ Scriptsprachen in Betracht, beispielweise PHP. Damit liesse sich m.E. die ganze Aufgabenstellung deutlich eleganter erledigen.

Gruß,

kerki

[HudsonHawk]

Hallo !

Entschuldigt, wenn ich mich einmische, aber ich glaube, ihr redet aneinander vorbei.

Sowohl das genannte Referenz-Beispiel "www.autsch.de" wie auch Michaels Lösung arbeiten in Zusammenhang mit Frames.

"Unser Meisterdieb" möchte das Menü aber mittels SSI (nicht mit Frames!) in seine Seiten einbauen.

Somit eignet sich der ganze JavaScript-Ansatz in meinen Augen überhaupt nicht, da somit ja das JavaScript auf jeder Seite quasi bei null anfängt, es sei denn man übergibt einen Parameter von einer Seite zur nächsten, oder fragt im JavaScript selbst ab, in welcher Seite es denn aufgefrufen wurde.

Inwiefern (und ob überhaupt) sich das mit JavaScript realisieren lässt, kann ich leider nicht sagen, JavaScript ist nicht gerade mein Spezialgebiet.

Kommen evtl. andere _serverseitigen_ Scriptsprachen in Betracht, beispielweise PHP. Damit liesse sich m.E. die ganze Aufgabenstellung deutlich eleganter erledigen.

Gruß,

kerki

Jaaaaa so ist es. Keine Frames. Vielleicht hätte ich es auch
dazu sagen sollen, SORRY. Aber das Problem ist leider immer noch
nicht gelöst. Weiss jemand eine Lösung ? Also der Code sieht im Moment so aus:

<!--

// Menü

var chngImg = new Array();
for (var im=0; im<10; im++){
 chngImg[im]=1}

// im<10 für 9 Bilder im Menü -->

<!--
// PRELOADING IMAGES
if (document.images) {
 img1_on =new Image();  img1_on.src ="images/1on.gif";
 img1_off=new Image();  img1_off.src="images/1off.gif";
 img1_act=new Image();  img1_act.src="images/1clickon.gif";
 img2_on =new Image();  img2_on.src ="images/2on.gif";
 img2_off=new Image();  img2_off.src="images/2off.gif";
 img2_act=new Image();  img2_act.src="images/2clickon.gif";
 img3_on =new Image();  img3_on.src ="images/3on.gif";
 img3_off=new Image();  img3_off.src="images/3off.gif";
 img3_act=new Image();  img3_act.src="images/3clickon.gif";
 img4_on =new Image();  img4_on.src ="images/4on.gif";
 img4_off=new Image();  img4_off.src="images/4off.gif";
 img4_act=new Image();  img4_act.src="images/4clickon.gif";
 img5_on =new Image();  img5_on.src ="images/5on.gif";
 img5_off=new Image();  img5_off.src="images/5off.gif";
 img5_act=new Image();  img5_act.src="images/5clickon.gif";
 img6_on =new Image();  img6_on.src ="images/6on.gif";
 img6_off=new Image();  img6_off.src="images/6off.gif";
 img6_act=new Image();  img6_act.src="images/6clickon.gif";
 img7_on =new Image();  img7_on.src ="images/7on.gif";
 img7_off=new Image();  img7_off.src="images/7off.gif";
 img7_act=new Image();  img7_act.src="images/7clickon.gif";
 img8_on =new Image();  img8_on.src ="images/8on.gif";
 img8_off=new Image();  img8_off.src="images/8off.gif";
 img8_act=new Image();  img8_act.src="images/8clickon.gif";
 img9_on =new Image();  img9_on.src ="images/9on.gif";
 img9_off=new Image();  img9_off.src="images/9off.gif";
 img9_act=new Image();  img9_act.src="images/9clickon.gif";
}

function movr(n) {
 if (document.images && chngImg[n]==1)
  eval('document.img'+n+'.src=img'+n+'_on.src');
}

function mout(n) {
 if (document.images && chngImg[n]==1)
  eval('document.img'+n+'.src=img'+n+'_off.src');
}

function activ(n) {
 if (document.images)
  eval('document.img'+n+'.src=img'+n+'_act.src');
  chngImg[n]==0
}

function handleOver() {
 if (document.images)
  document.imgName.src=img_on.src;
}

function handleOut() {
 if (document.images)
  document.imgName.src=img_off.src;
}

//-->

Beim Menü selbst folgende Befehlszeile:

<a href="untermenue.shtml" onMouseOver="movr(3);return true;" onMouseOut="mout(3);return true;" onClick="activ(3);return true;"><img name=img3 width=130 height=24 border=0 src="images/3off.gif"></a>

Was ist denn jetzt noch verkehrt ?
Wieso wird beim "onClick" nicht die DRITTE Grafik (_act) reingeladen ?
HIIIILLLLFFFEEE !!!

[kerki]

Hallo !

Wie gesagt, der Ansatz wird m.E. so nicht funktionieren.

Ich habe mir den Code nicht weiter angesehen. Vermutlich wird sogar bei onClick sogar die dritte Grafik geladen.

Nur: Im selben Moment verlässt du ja per Link die aktuelle Seite und wechselst auf eine neue Seite "untermenue.shtml". Auf dieser Seite fängst du wieder bei 0 an, und als Bildquelle dient wieder "3off.gif" , wie im <img>-tag angegeben. Das onClick-Event von der vorhergehenden Seite ist "Geschichte".

Irgendwie musst du den aktuellen Zustand deines Menüs von einer Seite auf die nächste retten z.B. mittels eines übergebenen Parameters. Aber - wie auch gesagt - ich bin kein Experte für JavaScript, deshalb kann ich dir hier nur bedingt weiterhelfen. Ich halte ohnehin eine Lösung über ein serverseitige Scriptsprache für geeigneter.

Gruß,

kerki

[HudsonHawk]

Hallo !

Wie gesagt, der Ansatz wird m.E. so nicht funktionieren.

Ich habe mir den Code nicht weiter angesehen. Vermutlich wird sogar bei onClick sogar die dritte Grafik geladen.

Nur: Im selben Moment verlässt du ja per Link die aktuelle Seite und wechselst auf eine neue Seite "untermenue.shtml". Auf dieser Seite fängst du wieder bei 0 an, und als Bildquelle dient wieder "3off.gif" , wie im <img>-tag angegeben. Das onClick-Event von der vorhergehenden Seite ist "Geschichte".

Irgendwie musst du den aktuellen Zustand deines Menüs von einer Seite auf die nächste retten z.B. mittels eines übergebenen Parameters. Aber - wie auch gesagt - ich bin kein Experte für JavaScript, deshalb kann ich dir hier nur bedingt weiterhelfen. Ich halte ohnehin eine Lösung über ein serverseitige Scriptsprache für geeigneter.

Gruß,

kerki

Ja das ich habe grad das Problem auch erkannt. Danke dass mich
irgendjemand versteht :-) Ich hoffe der Michael schaut sich das
hier nochmal durch und kann mir eine Lösung sagen. Schade, dass
Du Dich mit JavaScript nicht auskennst aber man kann ja nicht
alles wissen/können. Trotzdem Vielen Dank ! Michael vielleicht
verstehst Du mein Problem jetzt besser. Also ich müsste praktisch
auf der nächsten Seite, in dem Fall "untermenü.html" ein kleines JavaScript einbauen, das die Funktion bei dem Button, mit dem
die Seite aufgerufen wurde DEAKTIVIERT oder noch einfacher, die Grafik austauscht und vielleicht noch der Link auf INAKTIV stellt
aber ich wäre schon mit dem Austausch der Grafik voll zufrieden.
Wie gesagt ich habe es schon geschafft sie zu wechseln aber nachdem
ich wieder mit der Maus drübergefahren bin, ist wieder der alte
Zustand eingetroffen (was ja auch irgendwie logisch ist). Also ich
hoffe Du hast noch die Nerven und kannst mir vielleicht ein Script
schicken, mit dem ich die Grafiken "austauschen" kann und die OnmouseOver Funktion an dieser Stelle DEAKTIVIEREN kann. Ich hab mir
Deine Seite angeschaut und das ist schon die Richtung nur eben OHNE FRAMES bzw. komplett neue Fenster. Es soll alles im gleíchen Fenster
passieren also muss auch die unterseite den Befehl ausgeben, dass dieser Punkt deaktiviert werden muss. Ich muss natürlich für jede Seite das "Ersatzen"-Script einzeln einstellen aber eine andere
Möglichkeit sehe ich nicht. DANKE EUCH ALLEN FÜR DIE HILFE BISHER !!!

[Michael Schröpl]

Hi auch,

Ich möchte ein einfaches, grafisches Menü, wo sich die
Grafiken beim OnMouseOver verändern und beim Anklicken eines
Menüpunktes die ON-Grafik oder auch eine andere Grafik geladen
wird und den Punkt somit hervorhebt. Praktisch dem Betrachter
signalisiert in welchem Untermenü er sich befindet. Am besten
wäre es, wenn auch der Link nach dem Drücken des Menüpunktes
inaktiv wäre aber das muss nicht unbedingt sein.

Und das ohne Frames. Dadurch wird es ein völlig anderes Problem.
Also fangen wir ganz von vorne an.

Zuallererst mal würde ich vermutlich das gesamte Preloading opfern.
Das bringt Dir wenig.
Preloading ist dann gut, wenn die Umschaltung im Navigationsmenü nahezu
keine Zeit kostet und durch das Nachladen einer Graphik essentiell
verlangsamt würde. Da Du aber keine Frames haben willst und jeder Klick
sowieso eine neue Seite anfordert, in der fast dieselben Graphiken drin
sind wie in der vorherigen, würde ich es lassen. Okay, Du verhinderst
beim ersten Mal, daß das Hovern lange dauert - dafür muß Du aber den
gesamten JavaScript-Code mit jeder einzelnen Seite immer wieder über-
tragen, weil das SSI-Include nicht separat gecached werden kann. Das
hebt sich in der Summe etwa auf.

Nun aber zum eigentlichen Problem, das m. E. gar nicht in JavaScript
lokalisiert ist, sondern im Konzept.

Jedes Deiner Dokumente lädt also via SSI seine eigene Navigation
nach, und diese soll so aussehen, daß
1. alle anderen Kapitelknöpfe klickbar und Hover-animiert sind,
2. der bereits selektierte aber beides nicht.

Das läßt sich machen, wenn Du

• entweder für jeden Navigationsbereich eine entsprechende Datei
    statisch ablegst (dann brauchst Du zwar viele dieser Dateien,
    nämlich für jeden Selektionszustand eine, aber sonst nichts),
• oder den entsprechenden HTML-Code dynamisch generierst.

Per CGI wäre letzteres sehr einfach; selbst per XSSI müßte es gehen.

Du kannst Deinem SSI-Include-Dokument im URL einen Parameter mitgeben,
nämlich den Namen des als präselektiert darzustellenden Buttons.
(Du weißt ja, welcher das ist, weil Du weißt, in welchem Bereich
dieses Dokument abgelegt ist.)
Also in etwa <!--#INCLUDE VIRTUAL="menu.html?pressed_button_name" --> .

*In* der INCLUDE-Datei müßtest Du diesen Parameter abgetrennt bekommen

• Du kannst mit SSI auf CGI-Environment-Variablen (z. B. den DOCUMENT_URI)
  zugreifen und mit Apache-XSSI Strings-Vergleiche (oder sogar regular
  expresssion matches) und bedingte Verzweigungen durchführen.

Also kannst Du den HTML-Code jeden einzelnen Button bedingt generieren:
(nachfolgend nur Semantik, keine korrekte SSI-Syntax, dafür lesbar):

if (QUERY_STRING == button_name)
   then
        generiere HTML-Code
        - mit  gedrücktem Button,
        - ohne OnMouseOver,
        - ohne Hyperlink
   else
        generiere HTML-Code
        - mit  ungedrücktem Button,
        - mit  OnMouseOver für Hover-Effekt,
        - mit  Hyperlink für Klick

Du brauchst gar keine JavaScript-Behandlung des gedrückten Knopfes, denn
Du willst ja gar nicht, daß dieser Button eine wirklich Funktion hat.

Und Du brauchst keine JavaScript-Verwaltung des dritten Zustands der
Graphik, weil ein Button innerhalb einer konkreten Datei nur entweder
gedrückt oder animiert sein soll, aber niemals zwischen beidem wechselt.

http://httpd.apache.org/docs/mod/mod_include.html,
besonders Flow Control Elements

Viele Grüße
      Michael