• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bild ersetzen bei Mausklick

R

rogerio

Neues Mitglied
hallo

ich habe mir eine seite aufgebaut mit eigenen grafikbuttons. bei mouseover und mouseout rufe ich die entsprechenden bilder ab:

<a href="index.html" >
<img id="meine_unternehmung" src="files/pikto_meine_unternehmung.jpg"
onMouseOver="src='files/pikto_meine_unternehmung_mo.jpg'"
onMouseOut="src='files/pikto_meine_unternehmung.jpg'"

<a href="mein-team.html">
<img id="mein_team" src="files/pikto_mein_team.jpg"
onMouseOver="src='files/pikto_mein_team_mo.jpg'"
onMouseOut="src='files/pikto_mein_team.jpg'"

aber wie kann ich machen, dass beim klick auf den button nun eine neue grafik erscheint damit man sieht welche seite gerade aktiv ist?

vielen dank!
 
Das würde dir nichts bringen, denn beim Klick wird eine neue Seite geladen und damit verschwindet die Grafik wieder..
 
Du könntest es mit hilfe von CSS machen in dem du

Code: 
.button:active
{
background:url(bilder/dein_bild.gif);
}

verwendest

(Tronjer hat mit seiner Aussage trozdem recht).
 
ok danke. aber wie müsste ich meinen code:

<a href="index.html" >
<img id="meine_unternehmung" src="files/pikto_meine_unternehmung.jpg"
onMouseOver="src='files/pikto_meine_unternehmung_mo.jpg'"
onMouseOut="src='files/pikto_meine_unternehmung.jpg'"

anpassen, damit dein css vorschlag bei mir funktioniert? hab ja kein .button element drin.
 
Versuch mal so. Du kannst natürlich auch Grafiken verwenden.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aktiven Link hervorheben mit CSS </title>
<style type="text/css">
* {
margin:0;
padding:0;
}


#navi ul , #navi li {
list-style:none;
width:200px;
position:relative;
}

#navi a {
text-decoration:none;
color:#000;
display:block; position:relative;
}


#home #navi-home a ,
#kontakt #navi-kontakt a ,
#impressum #navi-impressum a{
color:#f00;
}


</style>
</head>

<body id="impressum">
<h2>Impressum</h2>
<div id="navi">
<ul>
  <li id="navi-home" ><a href="index.htm">Startseite</a></li>
  <li id="navi-kontakt"><a href="kontakt.htm">Kontakt</a></li>
  <li id="navi-impressum"><a href="impressum.htm">Impressum</a></li>
</ul>
</div>


</body>
</html>

Beispiel
http://www.gipspferd.de/forumhilfe/aktuellen-link-markieren-mit-css/
 
djheke schrieb:
Versuch mal so
Zum Vergrößern anklicken....

Der Ansatz funktioniert zwar, ist aber nicht hilfreich für Einsteiger, die gerne den Weg des geringsten Lernaufwands wählen und am Ende dann nichts lernen. Weil er erstens voraussetzt, dass die Seiten statisch sind und jeweils über ein eigenes Body-Tag verfügen und zweitens ein CSS-Selektor wie #home #navi-home a mit einem value von 201 sich später kaum noch überschreiben lässt.

Um die aktuelle Seite hervorzuheben, hängt man an den Link eine Klasse .active an, die mit der URL korrespondiert. Dafür gibt es je nach Scriptsprache unterschiedliche Ansätze. IDs verwendet man heutzutage nicht mehr als CSS-Selektoren - einerseits der erwähnten specifities wegen und andererseits, weil bei dynamischen Seiten mit inkludierten Dateien, die wiederum includes enthalten können, nicht offensichtlich ist, ob eine gleichnamige ID bereits verwendet wurde.

http://specificity.keegan.st
 
Anzumerken wäre noch, dass eine dynamische mit der URL korrespondiere CSS-Klasse auf dem Body-Tag durchaus sinnvoll ist, um einen Namespace innerhalb eines kompilierten Stylesheets zu setzen.
 
Hier noch eine Alternative ohne ID's
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aktiven Link hervorheben mit CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
#navi li:nth-child(1) a {
color:#f00;
}
</style>
</head>
<body>
<h2>Startseite</h2>
<div id="navi">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben