Grafikaustausch von Button (Rollover-Grafik)

Hier zeige ich eine Möglichkeit Grafik mit „hover“ auszutauschen.

ohne Javascript!

Wenn noch nicht im zentralen Stylesheet geschehen, müssen die grafischen Elemente im Browser resetet werden.

CSS-Anweisung:

 #navig div,a, img,   /* Browser Reset   */
 dl, dt, dd, ol, ul, li,
 tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

Dann erstellt man Classen für die auszutauschenden Bilder und setzt a:hover img auf visibility: hidden;
Wenn man eine Navigationsliste erstellen will, muss die Classe zu einem Blockelement werden. Somit kann man den einzelnen Button positionieren.

Eine andere Möglichkeit ist der Classe, die Position absolute zugeben und mit "top", "right", "left" und "bottom" den Button zu positionieren.

Beispiel in der CSS: .a {position: absolute; top: 200px; left:100px;}

CSS-Anweisung:

 .a1 {display: block;
  height: 30px;
  background: transparent url(img/chor1.png) no-repeat;
  width: 271px;}

  .a2{display: block; margin-top: 1em;
   background: transparent url(img/globus2.jpg) no-repeat;
   width:200px; height:205px;}

   li {list-style-type: none;

   #navig a:hover img {visibility: hidden;}

   #navig img { margin-top:0px;}

Im Html der Grafik keine Größe zuweisen. Die zwei Bilder(Hintergrund und Vordergrundgrafik) müssen exakt gleich groß sein.

HTML:

<div id="navig">
<ul>
<li>
<a class="a1" href="chor.html"><img src="img/chor.png" alt="chor" /></a>
</li>
</ul>
<ul>
<li>
<a class="a2" href="globus.html"><img src="img/globus.jpg" alt="globus" /></a>
</li>
</ul>
</div>

Auf der Aktiven Seite den Link gestalten

Dazu hebt man die img {visibility: hidden;} Anweisung wieder auf, in der man der Image Datei die Style-Anweisung "visibility: visible" mit gibt.

<li>
<a class="a1" href="chor.php"><img style="visibility: visible" src="img/chor_aktiv.png" /></a>
<li>

Ähnliches Thema:

Rollover im Header

Grafikaustausch von Button (Rollover-Grafik)

Hier zeige ich eine Möglichkeit Grafik mit „hover“ auszutauschen.

ohne Javascript!

Auf der Aktiven Seite den Link gestalten

Fragen beantwortet & Tipps zum Webdesign