✔ Linkgestaltung (onmouseover, onmouseout,onclick)

M

matze1983

Erfahrenes Mitglied
Hallo,

nach langem probieren und lesen, find ich keine Lösung für mein kleines Problem, vielleicht fällt jemandem eine Lösung ein.
Folgendes: Ich möchte das wenn der Mousekurser auf den Link geht sich die Farbe verändert (onmouseover), wenn der Kurser den Link wieder verlässt (onmouseout) die ursprüngliche Farbe angezeigt wird, wenn der Besucher der Seite jedoch den Link anklickt so, soll der gleiche Farbwert wie beim drüberfahrer des Kursers erscheinen, aber nur diesmal sollte nach dem anklicken die Farbe erhalten bleiben und erst nach einem weiteren Klick auf einen anderen Link wieder zur ursprünglichen zurückkehren.
(onclick?, nur der Farbwert verändert sich wieder nach dem klicken)

Ich hoffe man kann das vertsehen, was mir da so vor AUgen schwebt:p

Code: 
<td align='center' width='150'><font size='-1'><a href='#' style='text-decoration:none; font-weight:bold; color:#434240' onclick=\"this.style.color='#CDCBC9'\">LINKNAME</a></font></td>

gruß
matze
 
Moin,

für die Linkgestaltung sind die Pseudoklassen :link, :visited, :focus, :hover, :active vorgesehen:
CSS: 
a:link,a:visited {
text-decoration: none;
font-weight: bold;
color: #434240;
}
a:hover,a:active {
color: #cdcbc9;
}

Was die "beständige" Gestaltung des aktuell angeklickten Links betrifft, empfehle ich dir den Artikel Highlighting current page with CSS:
  • home.html
HTML: 
<body id="home">

<ul>
    <li><a href="home.html" id="homenav">Home</a></li>
    <li><a href="about.html" id="aboutnav">About</a></li>
</ul>

</body>
  • about.html
HTML: 
<body id="about">

<ul>
    <li><a href="home.html" id="homenav">Home</a></li>
    <li><a href="about.html" id="aboutnav">About</a></li>
</ul>

</body>
  • CSS-Regel
CSS: 
body#home a#homenav,
body#about a#aboutnav {
color: #cdcbc9;
}

mfg Maik
 
Ich habe doch nochmal eine Frage zum Highlightning:confused: sorry!

Und zwar funktioniert es super wie es geschildert wurde. Nur habe ich zwei Menüs auf einer Seite. Wie muss man das schreiben, denn mit beidem funktioniert es nicht.

Es ist wie folgt aufgebaut 1.Menü: Bilder /Dias/Videos
2. Menü : Auwahl z.B. an Bilder: Rubrik1,Rubrik2..etc.

Einmal habe ich es untergliedert, in dem ich die eine ID mit <body> vergebe und einmal mit <p>, da funktioniert das Highlightning nur beim <p>
Code: 
body#heute a#heutenav,
body#aussersich a#aussersichnav,
body#zeiten a#zeitennav{	
	color:#8D8D8D;
}

p#bilder a#bildernav,
p#dia a#dianav,
p#video a#videonav{	
	color:#8D8D8D;
}

Wenn ich es wie folgt schreibe, dann wird alles über <body> vergeben, aber es gibt keinen Effekt:(
Code: 
body#heute a#heutenav,
body#aussersich a#aussersichnav,
body#zeiten a#zeitennav,
body#bilder a#bildernav,
body#dia a#dianav,
body#video a#videonav	
{	
	color:#8D8D8D;
}

Was ist daran falsch?
 
So funktioniert es bei mir einwandfrei:
HTML: 
<body id="heute">

<ul>
    <li><a href="#" id="heutenav">heute</a></li>
    <li><a href="#" id="aussersichnav">aussersich</a></li>
    <li><a href="#" id="zeitennav">zeiten</a></li>
</ul>

<p id="bilder">
   <ul>
       <li><a href="#" id="bildernav">bilder</a></li>
       <li><a href="#" id="dianav">dia</a></li>
       <li><a href="#" id="videonav">video</a></li>
   </ul>
</p>

</body>
CSS: 
body#heute a#heutenav,
body#heute a#bildernav{
        color:#8D8D8D;
}


mfg Maik
 
@Maik: ich habe nun nochmal ne genaze Weile dran rumgebastelt und stelle fest, dass immer wenn ich mehrere Menüs mit dem Highlightning versuche zu realisieren, dass es nicht funktioniert. Muss also bei mir ein Aufbau fehler sein.

Ich habe es wie folgt aufgebaut.

index.php
HTML: 
</table><tr><td width='120'><div align='center'>
<a href='?inhalt=aktuelles' id='aktuellnav' style='text-decoration:none; font-weight:bold'><font size='+0'>Aktuelles</div></td>
 <td width='140'><div align='center'><a href='?inhalt=nbjungs' id='jungsnav' style='text-decoration:none; font-weight:bold'><font size='+0'>Über Uns</div></td>
<td width='276'><div align='center'><a href='?inhalt=bdv' id='clipsnav' style='text-decoration:none; font-weight:bold'>Bilder/Diashow/Videos</div></td>
<td width='140'><div align='center'><a href='?inhalt=nb' id='nbdgnav' style='text-decoration:none; font-weight:bold'>Unsere Heimat</div></td>
<td width='120'><div align='center'><a href='?inhalt=gb' id='gbooknav' style='text-decoration:none; font-weight:bold'>Gästebuch</div></td></tr></table>

das 2. Menü z.B. wäre dann nb.php
HTML: 
<body id='nbdg'><table align='center' height='320' width='600' border='0'>
<tr>
<td align='center'><a href='?inhalt=nb&&stadt=wappen' id='wappennav'><font size='2'><b>Stadtwappen</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=geschichte' id='geschichtenav'><font size='2'><b>Geschichte</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=bilder' id='stadtbildernav'><font size='2'><b>Stadtbilder</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=partner' id='partnernav'><font size='2'><b>Partnerstädte</b></td>
</tr></table></body>

CSS code
Code: 
body#aktuell a#aktuellnav,
body#jungs a#jungsnav,
body#clips a#clipsnav,
body#nbdg a#nbdgnav,
body#gbook a#gbooknav{
color:#CDCBC9;
}

body#wappen a#wappennav,
body#geschichte a#geschichtenav,
body#stadtbilder a#stadtbildernav,
body#partner a#partnernav{
color:#8D8D8D;
}
Ich habe jede verlinkte Seite mit <body id> und der jeweiligen id zugewiesen und mit </body> auch wieder beenden lassen.
Das Problem ist, dass nur die Links auf der index.php so funktionieren wie sie sollen.
Kann es sein, dass sich die <body><body>, die durch die Verlinkungentstehen, deshalb nicht funktioniert?
 
Zuletzt bearbeitet:
Dass bzw. wie es grundsätzlich funktioniert, hab ich dir gestern demonstriert.

Da ich mit deinen bisherigen Codeschnippseln nicht nachvollziehen kann, wie die Seite konkret strukturiert ist, solltest du mal den kompletten Seitenquelltext zeigen.

mfg Maik
 
also der Aufbau ist wie folgt


index.php
PHP: 
echo"<div align='center'> 
                          <table hight='146px' width='796px' border='0' cellspacing='0' cellpadding='0'><td><img src=\"http://www.tutorials.de/forum/images/banner1.png\"></td></table>
                          <table hight='31px' border='0' background='images/banner2.png' width='796px' cellspacing='0' cellpadding='0'><tr><td colspan='5'>
                                                                <tr>
                                                                     <td width='120'><div align='center'><a href=\"?inhalt=aktuelles\" id='aktuellnav' style='text-decoration:none; font-weight:bold' ><font size='+0'>Aktuelles</div></td>
                                                                     <td width='140'><div align='center'><a href=\"?inhalt=nbjungs\" id='jungsnav' style='text-decoration:none; font-weight:bold'><font size='+0'>Über Uns</div></td>
                                                                     <td width='276'><div align='center'><a href=\"?inhalt=bdv\" id='clipsnav' style='text-decoration:none; font-weight:bold'>Bilder/Diashow/Videos</div></td>
                                                                     <td width='140'><div align='center'><a href=\"?inhalt=nb\" id='nbdgnav' style='text-decoration:none; font-weight:bold'>Unsere Heimat</div></td>
                                                                     <td width='120'><div align='center'><a href=\"?inhalt=gb\" id='gbooknav' style='text-decoration:none; font-weight:bold'>Gästebuch</div></td>
                                                                </tr>
                           </table></div>"; 


switch($inhalt)
{
    case aktuelles:
    $inhalt = "seiten/home.php";
    break;
    case nbjungs:
    $inhalt = "seiten/jungs.php";
    break;
    case bdv:
    $inhalt = "seiten/bilder.php";
    break;
    case nb:
    $inhalt = "seiten/nb.php";
    break;
    case gb:
    $inhalt = "seiten/gb.php";
    break;
    default:
    $inhalt= "seiten/home.php";
    break;
}
                         
echo"<center><div style=\"align:center; overflow:false;  width: 792px; border:1px solid #000000\">";
   include($inhalt);
echo"</div></center>";

?>

</body>
</html>

am Bsp. der nb.php

PHP: 
<?
switch($stadt)
{
  
    case geschichte:
    $stadt = "seiten/nb/geschichte.php";
    break;
    case wappen:
    $stadt = "seiten/nb/wappen.php";
    break;
    case bilder:
    $stadt = "seiten/nb/bilder.php";
    break;
    case partner:
    $stadt = "seiten/nb/partner.php";
    break;
    default:
    $stadt= "seiten/nb/wappen.php";
    break;
}


echo"<body id='nbdg'><br>
<center>
<table align='center' height='320' width='600' border='0'>
<tr>
<td align='center'><a href='?inhalt=nb&&stadt=wappen' id='wappennav'><font size='2'><b>Stadtwappen</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=geschichte' id='geschichtenav'><font size='2'><b>Geschichte</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=bilder' id='stadtbildernav'><font size='2'><b>Stadtbilder</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=partner' id='partnernav'><font size='2'><b>Partnerstädte</b></td>
</tr>
<tr><td colspan='4'><hr></td></tr>
<tr>
<td colspan='4'>";


include($stadt);



echo"
</p></div></td></tr>
</table></body>
";


?>
in der werden dann die weiteren Seiten wieder eingebunden.
Ich hoffe das ist etwas aussagekräftig für dich.
Habe es versucht so wie du es gesagt hast bzw. es in dem Link den du geschickt hattest geschrieben stand. Nur da bezog es sich ja auch nur auf eine Menüleiste.

MfG
Mathias
 
Zuletzt bearbeitet:
Der PHP-geparste Code wäre da aufschlussreicher, also was der Browser als HTML-Code ausgibt.

mfg Maik
 
:) sorry

HTML: 
<link rel=stylesheet type="text/css" href="script/style.css">
<SCRIPT LANGUAGE="JavaScript" SRC="script/java.js"></SCRIPT>

</head>

<body background="images/bg.png">

<div align='center'> 
                          <table hight='146px' width='796px' border='0' cellspacing='0' cellpadding='0'><td><img src="images/banner1.png"></td></table>
                          <table hight='31px' border='0' background='images/banner2.png' width='796px' cellspacing='0' cellpadding='0'><tr><td colspan='5'>
                                                                <tr>

                                                                     <td width='120'><div align='center'><a href="?inhalt=aktuelles" id='aktuellnav' style='text-decoration:none; font-weight:bold' ><font size='+0'>Aktuelles</div></td>
                                                                     <td width='140'><div align='center'><a href="?inhalt=nbjungs" id='jungsnav' style='text-decoration:none; font-weight:bold'><font size='+0'>Über Uns</div></td>
                                                                     <td width='276'><div align='center'><a href="?inhalt=bdv" id='clipsnav' style='text-decoration:none; font-weight:bold'>Bilder/Diashow/Videos</div></td>
                                                                     <td width='140'><div align='center'><a href="?inhalt=nb" id='nbdgnav' style='text-decoration:none; font-weight:bold'>Unsere Heimat</div></td>
                                                                     <td width='120'><div align='center'><a href="?inhalt=gb" id='gbooknav' style='text-decoration:none; font-weight:bold'>Gästebuch</div></td>
                                                                </tr>

                           </table></div><center><div style="align:center; overflow:false;  width: 792px; border:1px solid #000000"><body id='nbdg'><br>
<center>
<table align='center' height='320' width='600' border='0'>
<tr>
<td align='center'><a href='?inhalt=nb&&stadt=wappen' id='wappennav'><font size='2'><b>Stadtwappen</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=geschichte' id='geschichtenav'><font size='2'><b>Geschichte</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=bilder' id='stadtbildernav'><font size='2'><b>Stadtbilder</b></td>
<td align='center'><a href='?inhalt=nb&&stadt=partner' id='partnernav'><font size='2'><b>Partnerstädte</b></td>
</tr>
<tr><td colspan='4'><hr></td></tr>
<tr>
<td colspan='4'><body id='wappen'>

<center>

<p><font size='+4' color='white'><b>N e u b r a n d e n b u r g</b></font></p>
<br><img src='/bilder/wappen/nb.png'></center><br><br>
</body>
</p></div></td></tr>
</table></body>
</div></center>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück