Aktiven Link darstellen

[lordimac]

Hi

Ich würde gerne einen aktiven Link darstellen.

Folgendes: Ich habe mein Menu oben sowie den eigentlichen Content im unteren Bereich per iFrame eingebunden.

Nun würde ich gerne folgendes realisieren:

Man klickt bsp. auf Link 1 und der Link 1 öffnet sich im iFrame. Link1 soll dann anderst farbig hervorgehoben werden als Link2,3, etc...

Wenn man nun aber Link 2 klickt sollte Link 1 wieder normal aussehen dafür aber Link 2 anderst farbig hinterlegt.

Wie lässt sich das ganze realisieren ? PHP Seiten wären kein Problem, bisher baut alles auf html / CSS auf.

Ein extra Menu für jeden Punkt wollte ich eigentlich vermeiden.

Bin für jeden Tip dankbar.

MfG lordimac

 

[Gumbo]

PHP ist garnicht nötig:
 ›› SELFHTML: CSS Stylesheets / CSS-Eigenschaften / Pseudoformate / :link, :visited, :hover, :active, :focus (Pseudoformate für Verweise)

 

[lordimac]

Du meinst aber nciht zufällig A:active oder ?

a:active ist nur für das Klicken von Link in welcher Farbe er da erscheinen soll.

 

[lordimac]

ah ok a:active ist auch dafür geeignet muss ich gerade beerken, allerdings funktioniert das ganze nur im InternetExplorer und nicht im Mozilla. Ich bräuchte eine Browser übergreifende Lösung

 

[King Euro]

schau mal hier:
bitte klick mich!

:edit:
Ich hoffe ich habe das Problem geschnallt.

 

[PeeWee]

activ links

Hi,

soweit wie ich das weiß, kannst du ide Links in der CSS alle eigens anlegen.

Das würde dann ungefair so aussehen:

a:link {
text-decoration: none;
z-index: 15;
color: #605C5C;
}

a:visited {
text-decoration: none;
z-index: 15;
color: #605C5C;
}

a:aktiv {
text-decoration: none;
z-index: 15;
color: #605C5C;
}

a:hover {
text-decoration: none;
z-index: 15;
color: #605C5C;
}


Du kannst die links auch für einzelne Divs anlegen.

also z.B.

#nebenlinks a:hover { u.s.w.}

Gruß

PeeWee

 

[Sven Mintel]

Mit CSS alleine lässt sich das kaum lösen.

Du kannst Javascript zuhilfe nehmen:

<script type="text/javascript">
<!--

arrLinkObjs=new Array();

function init(obj)
{
if(document.getElementById)
    {
    arrLinkObjs.push(obj);
    obj.onclick=new Function('F','aktivieren(this)');
    aktivieren(obj);
    }
}


function aktivieren(obj)
{
for(j=0; j < arrLinkObjs.length; ++j)
    {
    arrLinkObjs[j].className = (arrLinkObjs[j]==obj)
                                ?'aktiv'    //aktiver Klassenname
                                :'inaktiv'; //inaktiver Klassenname
    }
}
//-->
</script>

Alles was du tun musst...

definiere 2 CSS-Klassen für den aktiven und inaktiven Link(hier aktiv/inaktiv)

In den Links selbst musst du natürlich erstmal den inaktiven Klassennamen notieren, und im onClick-Event die Function init() aufrufen....das wars schon.

<a class="inaktiv"onclick="init(this)"href="seite.htm">link1</a>

Beim ersten Click auf den Link wird selbiger als Objekt in einen Array eingefügt und sein onClick-Attribut geändert...dort wird nun die Funktion aktivieren() aufgerufen.

Die Funktion aktivieren() geht alle Elemente des Arrays mit den Objekten durch und ändert deren className entsprechend.

Das funktioniert nicht nur mit Links...du kannst es bei beliebigen Seitenelementen anwenden.
Falls in dem jeweiligen Seitenelement bereits ein onClick definiert ist, dann sag Bescheid, dann muss man es noch etwas modifizieren.

Test