nicht angemeldet
Dynamische grafische buttons
Hallo! Kennt vielleicht jemand ein fertiges Javascript für ein Menü in einem Frame, das folgende Anforderungen erfüllen sollte: im linken Frame sind die grafischen Buttons für das Menü anzuklicken, im rechten Frame soll die aufgerufene Seite erscheinen.
Dafür mache ich 3 gif-Grafiken pro Link:
button1.gif für inaktive Links
button2.gif beim Klicken des Links (z.B. bei onmouseover)
button3.gif für aktive Links - also wenn der Inhalt im rechten Frame gezeigt wird.
Im Prinzip so ähnlich wie in dem selfhtml-Beispiel unter http://de.selfhtml.org/javascript/beispiele/buttons.htm , nur dass dort noch die Funktion für button3.gif fehlt.
Das ganze wird in einem Museum für Besucher über einen Touchscreen aufzurufen sein. (Opera im Kioskmodus)
Ich kenne mich nur wenig aus mit JavaScript, aber ich denke mir, dass das Anliegen nicht ungewöhnlich ist und dass es schon fertige Scripts geben sollte.
Für Anregungen bin ich sehr dankbar.
Vielen Dank und Grüße,
Michael
-
Lieber Michael,
wenn die Angelegenheit im Kioskmodus in einer Offline-Umgebung laufen soll, dann kann ich den Einsatz von Frames verstehen. Daher denke ich an folgendes Konzept:
Linker Frame "Navi", rechter Frame "Inhalt". OK. Das sollte relativ simpel zu erstellen sein. Wenn nun ein Besucher in der Navi einen Button anklicken möchte, dann wird der "Button" wahrscheinlich ein <a>-Element sein, das mittels CSS und Hintergrundbild das Aussehen eines Buttons erhält.
Dein JavaScript müsste nun nur folgendes machen: Bei einem Click auf den Button dem <a>-Element eine CSS-Klasse zuweisen, um ihn auf "aktiv" zu schalten. Den Rest erledigt CSS für Dich.
Beispiel:
----- Frame "Navi" -----<body> <ul id="navi"> <li><a href="startseite.html" id="startseite">Startseite</a></li> <li><a href="eintrittspreise.html" id="eintrittspreise">Eintrittspreise</a></li> ... </ul> </body> </html>------------------------
Die Struktur Deiner Navigation <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=sollte eine Liste sein>, denn dann kannst Du sie <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#vertikal@title=per CSS optimal gestalten>.
Da Du sicherlich aber mit Grafiken die Buttons aufhübschen möchtest, kannst Du mittels der IDs, die Du den Buttens gibst, jeweils ein individuelles Hintergrundbild zuweisen, sodass Du gestalterisch sehr viele Möglichkeiten hast.
Um nun einen Button auf "aktiv" zu schalten, definierst Du eine CSS-Klasse (z.B.
<a ... class="aktiv">), die Du beim Anklicken eines Buttons ebendiesem zuweist (und dabei allen anderen wieder wegnimmst). Diese CSS-Klasse kannst Du dann im CSS dazu benutzen, ein wiederum anderes Hintergrundbild zuzuweisen.Beispiel:
/* Button "Startseite" */ #startseite { background-image: url(images/buttons/startseite.png); } /* Button "Startseite", wenn die Maus darüberfährt */ #startseite:hover { background-image: url(images/buttons/startseite_hover.png); } /* aktivierter Button "Startseite" */ #startseite.aktiv { background-image: url(images/buttons/startseite_aktiv.png); }Noch besser wäre es natürlich, wenn Du immer dieselbe Bilddatei benutzt, wie <http://de.selfhtml.org/javascript/beispiele/buttons.htm@title=im von Dir genannten Beispiel>, sodass Du im CSS eigentlich nicht das background-image jeweils verändern musst, sondern die background-position. Dabei ist der wesentliche Unterschied zu diesem Beispiel, dass die von mir bevorzugte Version JavaScript nur dazu benutzt, eine zusätzliche CSS-Klasse zuzuweisen, um alles andere CSS zu überlassen. Damit kannst Du nämlich das JavaScript wesentlich simpler gestalten und es sehr flexibel auf eine beliebige Anzahl von Buttons anwenden!
Nun zum JavaScript:
Das Script sollte (nach dem Laden des Frames) alle Links durchforsten und ihnen den Machanismus verleihen, dass sie auf einen Klick hin eine JavaScript-Funktionalität auslösen. Dazu gibt es ja das onclick-Event. Daher muss eine Initialisierung ebendieses an alle Links verleihen. Die über das onclick-Event aufgerufene Funktionalität muss nun allen Links eine eventuell vorhandene CSS-Klasse (wir hatten uns für "aktiv" entschieden) entfernen, um sie dann exklusiv dem angeklickten Link wieder zuzuweisen. Das sollte in etwa so gehen:/* extern einzubindender JavaScript-Code */ var Buttons = { init : function () { // automatisches Ausführen nach dem Laden des Dokuments einrichten: this.oldWinOnLoad = window.onload; window.onload = function () { if (typeof(Buttons.oldWinOnLoad) == "function") { Buttons.oldWinOnLoad(); } Buttons.onLoad(); }; }, onLoad : function () { // Alle Links mit onclick-Funktionalität ausrüsten: var i, alleLinks = document.getElementsByTagName("a"); for (i = 0; i < alleLinks.length; i++) { alleLinks[i].onclick = function () { Buttons.aktivieren(this); }; } }, aktivieren : function (a) { // Allen Links CSS-Klasse "aktiv" wegnehmen: var i, cn, alleLinks = document.getElementsByTagName("a"); for (i = 0; i < alleLinks.length; i++) { if (alleLinks[i].className && alleLinks[i].className != "") { cn = alleLinks[i].className; // CSS-Klasse ermitteln (könnten mehrere sein!) alleLinks[i].className = cn.replace(/\baktiv\b/i , ""); } } // angeklicktem Link die CSS-Klasse "aktiv" zuweisen if (a.className && a.className != "") { a.className += " aktiv"; // falls schon andere Klasse(n) existiert } else { a.className = "aktiv"; // falls noch keine Klasse existiert } } // Hier darf kein Komma stehen (da letzte Zeile)! }; Buttons.init(); // Javascript initialisierenVorsicht! Ich habe den JavaScript-Code nicht geprüft! Aber Du solltest nun gut alleine zurecht kommen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
vorerst ganz herzlichen Dank für deine ausführliche Antwort! Leider sind meine Kenntnisse von JavaScripts minimalst. Ich werde mir den morgigen Sonntag dafür Zeit nehmen (und mich dann sicher wieder melden).
Grüße, Michael
-