 Hintergrund- und Textfarbe ändern (ImageMap)
Neben den Beispielen zur Änderung der Farben über ein DropDown-Menü, beim Anklicken eines Textlinks oder über Radio-Buttons habe für sie ein Scriptbeispiel für eine Image-Map entwickelt.
|
|
Hintergrund- und Textfarbe mit ImageMap bestimmen
Überschrift 18 Pixel
Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
Hintergrundfarbe
Vordergrundfarbe
Hier wird eine ImageMap mit einer Funktion zum Farbwechsel kombiniert. Für ihre Webseite wird die Grafik der Map sicher etwas kleiner ausfallen. Das Scrript ist ausbaufähig! Sie könnten z.B. die Farbwerte in einem Cookie ablegen und beim Laden einer Seite wieder auslesen.
Infos zum Aufbau einer ImageMap finden sie auf den Seiten:
 verweis-sensitiv01
verweis-sensitiv02
Farbwechsel
Die beiden Funktionen zur Farbänderung von Hintergrund und Text werden im Head-Bereich notiert.
<script type="text/javascript" language="JavaScript">
<!--
// Hintergrund
function Farbe01(Wahlfarbe)
{
document.getElementById('box01').style.backgroundColor = Wahlfarbe;
}
// Text
function Farbe02(Wahlfarbe)
{
document.getElementById('box01').style.color = Wahlfarbe;
}
-->
</script>
Der Aufruf der Funktion im Body ist hier mit der Imagemap umgesetzt:
<area shape="rect" coords="19,15,54,50" href="XXX">
<area shape="rect" coords="173,15,108,50" href="XXX">
<area shape="rect" coords="129,14,163,50" href="XXX">
...
Für XXX wird der jeweilige Funktionsaufruf eingetragen
javascript:Farbe01('#5C73AF')
javascript:Farbe02('#4B5D8E')
|
HOME
DOWNLOAD
BEISPIEL 
ZURÜCK