 Hintergrundbild tauschen bei MouseOver
Das man die Hintergrundfarbe mit CSS (bei Mouseover z.B.) tauschen kann habe ich in einem anderen Beispiel erklärt. Hier demonstriere ich den Tausch einer Hintergrundgrafik.
 27.10.2007, neue Grafiken und Quellcode-Dateien
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.over: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:
Ein Menübeispiel nach diesem Prinzip finden sie im Menü 'Menüs' (Hintergrundgrafik tauschen)
2) Erweitertes Beispiel: 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,
- das mehr als 2 unterschiedliche Grafiken angezeigt werden könnten, wenn entsprechend viele Funktionen definiert sind.
- das unterschiedliche Anlässe (Events) die entsprechende Funktion für den Tausch auslösen könnten: OnMouseOver, OnMouseOut, OnClick, OnMouseDown, ...
- das 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 2-a
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 grafische Gestaltung einer Tabellenzelle mit zusätzlichem MouseOver- /MouseOut-Effekt für die Textlinks
Hier wurde für die Tabellenzelle eine Hintergrundgrafik festgelegt, die bei MouseOver ausgetauscht wird.
Bei MouseOut wird die vorherige Hintergrundgrafik wieder eingeseztzt.
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
|
Die Grafik ist ein 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 das
die beiden Notierungen unten nicht oder nicht überall funktionieren:
document.getElementById('textzelle').style.backgroundImage='grafik.gif';
document.getElementById('textzelle').style.backgroundImage=url('grafik.gif');
Anwendungsbeispiel 2-b
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" ... >
Erstellt: 12.01.2006
|
Home
ZURÜCK 
