Link als active markieren

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Link als active markieren »

MagellanMedia

Doppel-As

Dabei seit: 04.11.2011

Beiträge: 134

Donnerstag, 24. November 2011, 22:55

Hallo zusammen,

ich habe ein Frameset bestehend aus 3 Frames: Oben, Links und Main.
Im Frame "Oben" habe ich eine Navigation. Die Links verweisen auf entsprechende Seiten, die im Frame "Links" angezeigt werden.

Per CSS werden die Links in der Navigation per MouseOver mit einem anderen Hintegrundbild versehen - wie auf dem Screenshot zu sehen ("Programme"):

Sobald man den Link jedoch angeklickt hat, ändert er sich natürlich wieder zurück - wie die beiden anderen Links "Startseite" und "Einstellungen".

Hat jemand eine Idee, wie ich es dauerhaft hinbekomme, das der Link - so wie auf dem Screenshot zu sehen - angeziegt wird und erst dann "deaktiviert" wird, sobald ich einen der anderen Links anklicke?

Besten Dank schonmal an alle die eine Idee (oder die Lösung) haben.

MfG

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

dj_fipsi

Eroberer

Dabei seit: 21.01.2011

Beiträge: 53

Freitag, 25. November 2011, 08:08

ich kanns jetzt nicht sicher sagen, aber ich glaube mit onactive müsste das gehen

Rechtschreibfehler sind Specials meiner Tastatur

FavoriteFly

Haudegen

Dabei seit: 16.12.2010

Beiträge: 618

Freitag, 25. November 2011, 08:31

hm. Irgentwie versteh ich Dich nicht ganz ;)

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Freitag, 25. November 2011, 10:47

Du meinst in CSS wohl hover. mouseover wäre ja javascript.
Ich würde es wie folgt machen:
Startseite, Programme und Einstellungen sind ja Links.

Mache dir einfach eine Klasse Link und eine Klasse Linkactive. Bei dem jeweiligen Link kannst du dann ja unter Linkactive das selbe Hintergrundbild wie vom hover verwenden.

Also 3 Klasse.
z.bsp. navi, naviactive und navi:hover.
navi und navi:hover hast du ja schätze ich schon.

Bei der Startseite dann:

	Quellcode
1 2 3	<li><a class="naviStartActive" href="#">Startseite</a></li> <li><a class="naviProg" href="#">Programme</a></li> <li><a class="naviEinst" href="#>Einstellungen</a></li>

Bei Programme:

	Quellcode
1 2 3	<li><a class="naviStart" href="#">Startseite</a></li> <li><a class="naviProgActive" href="#">Programme</a></li> <li><a class="naviEinst" href="#>Einstellungen</a></li>

und bei Einstellungen:

	Quellcode
1 2 3	<li><a class="naviStart" href="#">Startseite</a></li> <li><a class="naviProg" href="#">Programme</a></li> <li><a class="naviEinstActive" href="#>Einstellungen</a></li>

Und dann in der CSS etwa so:

Cascading Style Sheet

.naviStart {
background-image: url(Start.jpg);
}
.naviStartActive {
background-image: url(Start-active.jpg);
}
.naviStart:hover {
background-image: url(Start-active.jpg);
}
.naviProg {
background-image: url(Progs.jpg);
}
.naviProgActive {
background-image: url(Progs-active.jpg);
}
.naviProg:hover {
background-image: url(Progs-active.jpg);
}
.naviEinst {
background-image: url(Einstellungen.jpg);
}
.naviEinstActive {
background-image: url(Einstellungen-active.jpg);
}
.naviEinst:hover{
background-image: url(Einstellungen-active.jpg);
}

So mache ich das zumindest gerne.

//Edit:
es gab auch mal eine :active Klasse, die ist glaube ich aber veraltet und nicht mehr aktuell.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Deffcon« (25. November 2011, 10:47)

FavoriteFly

Haudegen

Dabei seit: 16.12.2010

Beiträge: 618

Freitag, 25. November 2011, 10:58

Achso hover, sag das doch :D

joar so wird's gemacht, musst du aber nicht mit bildern machen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »FavoriteFly« (25. November 2011, 10:58)

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Freitag, 25. November 2011, 19:02

Er hat doch aber Bilder in seiner Navi. Wie soll er die sonst reinkriegen? o.O

Und wenn es dir egal sein sollte ob nur mit CSS oder auch mit Javascript gearbeitet wird kannst du es einfacher mit JS machen.
Onmouseover das Highlited-Bild und onmouseout wieder das normale.

Ich finde aber die CSS Version auch ganz okay.
Bei großen dynamischen Seiten ist das zwar bestimmt nicht mehr so gut aber das musst du ja wissen

MagellanMedia

Doppel-As

Dabei seit: 04.11.2011

Beiträge: 134

Samstag, 26. November 2011, 12:28

Mein Fehler

Hallo zusammen,

da ist mir wirklich ein Schreibfehler unterlaufen. Ich meinte wirklich den CSS-Befehl "hover" und nicht den JS onMouseOver. Tut mir leid wenn ich da für Verwirrung gesorgt habe.

@Deffcon:
Ich werd das mal ausprobieren und nochmal bescheid geben. Bei all meinen Versuchen bin ich mir nur grad nicht sicher ob ich das auch schon probiert habe.

Ich meld mich nochmal sobald ich es probiert habe.

Danke

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

MagellanMedia

Doppel-As

Dabei seit: 04.11.2011

Beiträge: 134

Dienstag, 29. November 2011, 23:12

Nix

Hi zusammen,

das mit dem auf "active" setzen hat nicht so ganz geklappt. Habe auch versucht es mit einem Reload des entsprechenden Frames und mit parameterübergabe zu machen, aber auch das wollte nicht so ganz. Ich denke, ich muss den Ansatz von Grundauf neu überdenken.

Danke trotzdem!

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Mittwoch, 30. November 2011, 10:20

Also wenn du mir die 6 Bilder mal kurz irgendwo hoch lädst (Startseite, Programme und Einstellungen und die jeweiligen active Bilder) dann kann ich dir die Variante kurz demonstrieren die ich meinte.

MFG Simon

MagellanMedia

Doppel-As

Dabei seit: 04.11.2011

Beiträge: 134

Dienstag, 6. Dezember 2011, 13:40

Hi Defcon,

danke für die Hilfe, ich habe es jetzt über mehrere Framesets geändert. Damit läuft das auch optimal.
Ich habe deine Idee schon verstanden, aber dadurch das die Navi nicht neu geladen wird, wird es schwer den Link auf activ zu setzen bzw. ihm eine neue CSS-Klasse zu geben - es sei denn, ich mache auch ein Reload auf diesen Frame. Aber dann wirds mit der Parameterübergabe zu extrem und verwirrend ;-)

Wenn du dennoch mal willst, kann ich dir die Source-Dateien mal geben.

MfG

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Dienstag, 6. Dezember 2011, 19:48

Okay das wäre dann in deinem Fall mit meiner Variante nichts geworden - bzw. sehr umständlich.