 Hintergrundbild tauschen bei MouseOver
Dass man die Hintergrundfarbe mit CSS (z.B. bei Mouseover) tauschen kann, habe ich in einem anderen Beispiel erklärt. Hier demonstriere ich den Tausch einer Hintergrundgrafik.
|
|
MouseOver tauscht die Hintergrundgrafik - JavaScript setzt CSS-Werte
Aufgabenstellung:
Bei MouseOver soll die Hintergrundgrafik eines Seitenelements ausgetauscht werden. Anwendung findet diese Technik in Menüs, als Hover-Effekt für Textlinks oder wie im Beispiel rechts zur Hervorhebung.
|
Wechsel der Hintergrundgrafik
Das kann aus Gründen der besseren Lesbarkeit so beabsichtigt aber auch zur Hervorhebung für 'Mitleser' ganz praktisch sein.
|
|
1) Hintergrundbild mit CSS-Anweisungen tauschen
Nur zur Demo des Prinzips tausche ich hier die Hintergrundgrafik eines Textlinks, der die Unterklasse 'graf' hat:
<a class="graf" href="#"> Textlink mit Hintergrund</a>
Die CSS-Anweisungen dazu wurden im Head der HTML-Datei notiert:
a.graf:link, a.graf:visited
{
color:#000000;
font-size:11px;
width:90px;
background-image:url(images/bg12.gif);
}
a.graf:hover, a.graf:focus, a.graf:active
{
color:#000000;
font-size:11px;
width:90px;
background-image:url(images/bg13.gif);
}
Notiz:
Für Navigationsleisten oder vertikale Menüs wird diese Technik ebenfalls häufig eingesetzt. Ein Beispiel nach diesem Prinzip finden Sie unter "Menütechniken"
2) Hintergrundbild mit JavaScript tauschen
JavaScript setzt CSS-Wert für Hintergrundgrafik
Hier setze ich ein JavaScript ein, dass die Style-Eigenschaften eines Seitenelements bei einer bestimmten Aktion (MouseOver, MouseOut, ...) neu festlegt. In den jeweiligen Funktionen wird festgelegt, welche Hintergrundgrafik angezeigt werden soll.
|
|
Das Seitenelement ist hier eine
Tabellenzelle mit der ID 'zelle'.
|
<table><tr><td id="zelle">
<a href="#"> :: Textlink :: </a>
</td></tr></table>
Im Link werden die JavaScript-Funktionen nach diesem Schema aufgerufen
<a onMouseOver="javascript:Hintergrund01()" onMouseOut="...
Beispiel einer Funktion:
function Hintergrund01() {
document.getElementById('zelle').style.backgroundImage="url('grafik.gif')";
}
Der Vorteil der JavaScript-Lösung liegt darin,
- dass mehr als 2 unterschiedliche Grafiken angezeigt werden könnten, wenn entsprechend viele Funktionen definiert sind.
- dass unterschiedliche Anlässe (Events) die entsprechende Funktion für den Tausch auslösen könnten: OnMouseOver, OnMouseOut, OnClick, OnMouseDown, ...
- dass der Tausch der Hintergrundgrafik nicht auf den Link beschänkt ist sondern für irgendein Element der Seite die Hintergrundgrafik ausgetauscht werden kann.
Download der Grafiken:
 
Grafiken zum Speichern RechtsKlicken
Anwendungsbeispiel zur Technik 1
Umsetzung des Grafiktausches mit CSS
 30.08.2007, neues Beispiel als Demo
 Impressum - Überschrift als Link
Für die Nutzung der in den Seiten der Web-Toolbox aufgezeigten Beispiele und deren fehlerfreie Funktion wird keine Haftung übernommen. Der Benutzer ist für eventuell entstehende Schäden alleine und selbst verantwortlich.
Die Beispiele und Scripte auf den Seiten der Web-Toolbox stehen zur Verwendung innerhalb privater und kommerzieller HTML-Projekte für folgende Anwendungsbereiche bereit, soweit Sie nicht als Angebot eines Archivs oder zur Weitergabe als Sammlung angeboten werden.
- eigene HTML-Projekte (auch auf Datenträgern)
- HTML-Projekte für Dritte (auch auf Datenträgern)
- eigene Webseiten oder Webseiten für Dritte
- private oder kommerzielle Webseiten / Projekte
- kostenlose Arbeiten oder Arbeiten gegen Entgelt
 Impressum weiterlesen 
|
| |
Beispiel für die farbliche Hervorhebung einer Tabellenzelle
Für die gesamte Tabellenzelle ist ein Farbwechsel vorgesehen.
Der Farbwechsel wird hier (anders als im Beispiel oben) allerdings nicht beim Überfahren des Textes selbst aktiviert, sondern nur dann, wenn einer der beiden Textlinks mit dem Mauszeiger angesteuert wird.
Hier wurde für die Tabellenzelle eine Hintergrundgrafik festgelegt, die bei MouseOver ausgetauscht wird.
Bei MouseOut wird die vorherige Hintergrundgrafik wieder eingesetzt.
Im Vordergrund der Tabellenzelle wird ein Text angezeigt.
Download der Grafiken (350 x 600 Pixel):
Grafik 1 - bg02a.gif
Grafik 2 - bg02b.gif
(neues Browserfenster) Grafiken zum Speichern RechtsKlicken
CSS-Formatierung der Tabellenzelle
(<td style=" " ... )
padding:5px;
padding-left:10px;
padding-right:10px;
border-right:1px solid #9595BF;
border-bottom:1px solid #9595BF
|
Hintergrundbild einer Tabellenzelle mit der ID 'textzelle'.
<td background="bg02a.gif" id="textzelle" ... >
Der Link:
<a
onMouseOver="javascript:TextZelle01()"
onMouseOut="javascript:TextZelle02()"
href="javasript:void(0)"> weiterlesen ... </a>
Die Funktionen:
function TextZelle01() {
document.getElementById('textzelle').style.backgroundImage="url('bg02a.gif')";
}
function TextZelle02() {
document.getElementById('textzelle').style.backgroundImage="url('bg02b.gif')";
}
Kommentar
Es hat mich einigen Schweiß und viel Zeit gekostet herauszufinden, dass
die beiden Notierungen unten nicht oder nicht überall funktionieren.
Lediglich die Notierung oben, mit 2 Paaren von Anführungszeichen ist gültig.
document.getElementById('textzelle').style.backgroundImage='grafik.gif';
document.getElementById('textzelle').style.backgroundImage=url('grafik.gif');
Anwendungsbeispiel zur Technik 2
Umsetzung des Grafiktausches mit JavaScript
Von der Möglichkeit im Vordergrund der Tabellenzelle einen Text oder eine (transparente) Grafik anzuzeigen (worin der eigentliche Sinn der Anwendung liegt) habe ich hier keinen Gebrauch gemacht.
Die Grafik ist ein Hintergrundbild einer Tabellenzelle mit der ID 'frankfurt'.
<td background="images/bg-frankfurt-00.gif" id="frankfurt" ... >
<a onMouseOver="javascript:Frankfurt01()" href="javasript:void(0)"> :: Textlink :: </a>
<a onMouseOver="javascript:Frankfurt02()" href="javasript:void(0)"> :: Textlink :: </a>
<a onMouseOver="javascript:Frankfurt03()" href="javasript:void(0)"> :: Textlink :: </a>
<script type="text/javascript" language="JavaScript">
<!-- Begin
function Frankfurt01() {
document.getElementById('frankfurt').style.backgroundImage="url('frankfurt-01.gif')";
}
function Frankfurt02() {
document.getElementById('frankfurt').style.backgroundImage="url('frankfurt-02.gif')";
}
function Frankfurt03() {
document.getElementById('frankfurt').style.backgroundImage="url('frankfurt-03.gif')";
}
// End -->
</script>
|
Home • Bilder • CSS • Hintergrundbild tauschen
