nicht angemeldet
Farbwechsel bei onclick
Kai345Hallo zusammen,
ich suche nach einer Lösung um auf Mouseklick dokumentübergreifend css-formatierte Texte eine neue Farbe zuzuweisen.
Es handelt sich um eine Namensliste mit Fotos, bei Klick auf das Foto oder den Namen wird der entsprechende Name farblich hervorgehoben. Ein möglicher Lösungsansatz dazu wäre mit 'getElementById'. Wunderbar, klappt prinzipiell auch. Wenn ich jetzt einen anderen Namen anklicke sollte der zuerst angeklickte Name wieder auf die Ursprungsfarbe zurückwechseln und der neue Namen hervorgehoben werden. Ich habe aber keine Lösung gefunden um mit einem Befehl erst den gesamten Text wieder neutral stellen und dann den neuen Namen hervorheben. Welche anderen Möglichkeiten gäbe es?
Im unteren Beispiel funktioniert der erste Teil nicht (beiden Namen gleichzeitig die class='b1-9' zuzuweisen), der zweite Teil, den neu angeklickten Namen die class='link14' zuzuweisen funktioniert. Momentan wird also jeder angelickte Name farbig und keiner wieder neutral.
Vielen dank für alle Vorschläge!
Kilian
<body class=b1-9 border=0>
<a href="#" id="id31" onclick="
document.getElementsByTagName('body')[0].className='b1-9';
document.getElementById('id31').className='link14';
document.por32.src='portrait/kilian.gif';" class=link9>Walter</a><br>
<a href="#" id="id32" onclick="
document.getElementsByTagName('body')[0].className='b1-9';
document.getElementById('id32').className='link14';
document.por32.src='portrait/kilian_active.gif';" class=link9>Kilian</a><br>
<a href="#" onclick="
document.getElementsByTagName('body')[0].className='b1-9';
document.getElementById('id32').className='link14';
document.por32.src='portrait/kilian_active.gif';">
<img src="portrait/kilian.gif" name="por32" height=65 width=52 border=0></a>
-
Grüße,
der code ist ein wenig - .. chaotisch?
lager es doch in eine funktion aus - die soll ale links beim aufrufen "entfärben" und dann den link mit dem übertragenen id färben.
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio -
Hi,
Wenn ich jetzt einen anderen Namen anklicke sollte der zuerst angeklickte Name wieder auf die Ursprungsfarbe zurückwechseln und der neue Namen hervorgehoben werden.
Dann setze die Formatierung des vorherigen Namens - die Referenz auf dessen HTML-Element hast du dir vorher beim Klick auf diesen in einer Variablen "gemerkt" - wieder zurueck; formatiere dann den aktuellen entsprechend, und merke dir diesen wiederum.
Ich habe aber keine Lösung gefunden um mit einem Befehl erst den gesamten Text wieder neutral stellen und dann den neuen Namen hervorheben.
Brauchst du ja auch nicht.
MfG ChrisB
-
Hi Kilian,
Das was du machen willst hat eher etwas mit Javascript, als mit CSS zu tun, da du mit CSS keine Zustände speichern kannst.
Ich fasse noch mal zusammen, was du machen willst: Du willst im Prinzip einen Markieren-Effekt nachbauen, wie man ihn z.B. von diversen Explorer-Programmen kennt. Du klickst eine Datei an und diese wird andersfarbig dargestellt, klickst du auf eine andere Datei so wird diese andersfarbig dargestellt und die erste wieder normal.
Zuerst einmal solltest du zwei CSS-Klassen machen, welche die Darstellung der zu markierenden Elemente regeln:
~~~css .element-normal {
background: #fff;
border: 1px solid #eee;
}
.element-selected {
background: #55a;
border: 1px solid #335;
}Natürlich kannst du den CSS-Code beliebig anpassen. Anschließend erstellst du dein HTML, wobei du jedem Element die Standard-CSS-Klasse gibst, also nicht die Klasse für den ausgewählten Zustand: ~~~html <a href="#" class="element-normal">Nummer 1</a> <a href="#" class="element-normal">Nummer 2</a> <a href="#" class="element-normal">Nummer 3</a>Per Javascript weist du den Elementen nachträglich ein onclick-Handler zu (informiere dich über Unobstrusives Javascript). Natürlich kannst du das komplett zu Fuß programmieren, aber es wird deutlich einfacher unter der Verwendung eines entsprechenden Frameworks. Ich zeige es dir hier mal exemplarisch mit dem Prototype-JS Framework:
~~~javascript window.onload = function() {
// dieser Code wird nach dem Laden der Seite ausgeführt
$$('.element-normal').each(function(elem) {
// Für jedes Element mit der Klasse element-normal,
// setzen wir den onclick-Handler:
elem.onclick = function() {
// Alle Elemente mit der Klasse element-selected
$$('.element-selected').each(function(selElem) {
// Die CSS-Klasse element-normal setzen und
selElem.addClassName('element-normal');
// element-selected entfernen
selElem.removeClassName('element-selected');
});
// das Element muss sich selber element-selected setzen
elem.addClassName('element-selected');
// und element-normal entfernen
elem.removeClassName('element-normal');
}
});
}Ich habe das [hier](http://tutorial.riehle-web.com/selfforum/bsp/filebrowser.html) auch noch mal als Demo hingestellt. Du könntest das jetzt noch verbessern, in dem du z.B. noch die Strg-Taste abfragst und nur wenn diese nicht gedrückt ist, die bisher markierten Elemente de-markierst. Dann wäre eine Mehrfachauswahl möglich, wie einfach das aber zu realisieren ist mit der Strg-Taste weiß ich grad nicht - das ist schon was länger her, dass ich so Sachen das letzte Mal gemacht habe ;-) Viele Grüße, ~ Dennis. -- Mein [SelfCode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): [ie:{ fl:( br:> va:) ls:\[ fo:) rl:( n4:# ss:) de:\] js:| ch:{ sh:| mo:} zu:|](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%28+br%3A%3E+va%3A%29+ls%3A%5B+fo%3A%29+rl%3A%28+n4%3A%23+ss%3A%29+de%3A%5D+js%3A%7C+ch%3A%7B+sh%3A%7C+mo%3A%7D+zu%3A%7C)-
Grütze .. äh ... Grüße!
Natürlich kannst du das komplett zu Fuß programmieren, aber es wird deutlich einfacher unter der Verwendung eines entsprechenden Frameworks. Ich zeige es dir hier mal exemplarisch mit dem Prototype-JS Framework:
Sicherlich geht das so. Aber:
~120K Javascript, die jeder Nutzer erst mal downloaden muß, um "mal eben" Farben wechseln zu können? Klingt nicht sehr effizient, mal abgesehen vom bei den meisten Frameworks (so auch prototype) benutzen fragwürdigen Browsersniffing.Solche Kleinigkeiten sind von Hand vielleicht etwas aufwendiger, aber nachher garantiert schneller. Zumal es sowohl für getElementsByClassName wie auch für AddEvent schon handliche Funktionen gibt.
Dann noch die Klasse mit foo.className setzen und mit replace wieder entfernen
Cü
Kai--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|-
Hi Kai345,
Solche Kleinigkeiten sind von Hand vielleicht etwas aufwendiger, aber nachher garantiert schneller.
Jep, da hast du vollkommen Recht. Deshalb schrieb ich ja auch, dass man das problemlos von Hand programmieren kann. Die Arbeit darf sich Kilian dann aber selber machen ;-) Um hier Hilfestellung zu geben, nutze ich halt die Funktionen des Prototype-Frameworks, da dieses bei den meisten Projekten von mir sowieso für AJAX-Sachen zum Einsatz kommt und mir die Funktionen somit geläufig sind.
Viele Grüße,
~ Dennis.
-
-
-
ich würde ja eher diesen Ansatz versuchen
CSS:
body, .michael, .peter, .sabine { // normale Darstellung } .michael .michael, .sabine .sabine, .peter .peter { // hervorgehobene Darstellung }HTML
<body> ... <span class="peter">Das ist Peter</span> <img src="peter.jpg" onclick="namenhervorheben('peter')" alt="Peter"> ... </body>JavaScript:
function namenhervorheben(wen) { document.getElementsByTagName("body")[0].className=wen; }Also: wenn body und Element denselben Klassennamen haben wird das entsprechende Element hervorgehoben, sonst nicht. Das erspart die Aufrufe aller in Frage kommenden Elemente im JavaScript, die Komplexität ist ins Stylesheet verlagert.
ungetestet!