nicht angemeldet
Hintergrundbild bei onmouseover ändern
Gunnar BittersmannHallo,
ich möchte, dass sich das Hintergrundbild der Seite ändert, wenn man mit der Maus über einen bestimmten Bereich in einem eingebetteten Bild fährt. Von diesen betimmten Bereichen gibt es 4, und dahe auch 4 unterschiedliche spezifische Hintergrundbilder. Ich habe leider nicht sonderlich viel Ahnung von der Thematik, speziell alles was über HTML hinaus geht. Folgendes hab ich schon zustande gebracht, fehlt nur noch diesee onmouseover-hintergrund geschichte. Also praktisch alles -.- :
<html>
<head>
<style type="text/css">
body {
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed; padding:0px; }
div.mybody { }
</style>
</head>
<BODY bgcolor="#808080" text="red" background-repeat:no-repeat;>
<center>
<img name="header" src="images/header.png" width="800" height="100" style="filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;" border="0" id="header" usemap="#m_header" alt="" /><map name="m_header" id="m_header">
<area shape="poly" coords="704,39,781,66,775,92,692,65" href="hintergrundbild1" alt="" />
<area shape="poly" coords="368,3,554,22,553,56,366,34,368,3" href="hintergrundbild2" alt="" />
<area shape="poly" coords="114,45,273,26,274,54,119,73,114,45" href="hintergrundbild3" alt="" />
<area shape="poly" coords="18,13,98,24,95,56,13,44,18,13" href="hintergrundbild4" alt="" />
</map>
</center>
</body>
</html>
"hintergrundbild1-4" steht da nur zur info, macht natürlich keinen Sinn an der Stelle....
Ich habe über Google schon vereinzelt Threads zu diesem Thema gefunden, allerdings hatten die alle keine Koordinaten auf einem Bild, die verlinkt werden sollten. Daher hat das mit deren Code nicht funktioniert, bzw mich komplett verwirrt.
Wäre also echt nett wenn mir jemand da weiterhelfen könnte.
Gruß,
Theo
-
Ich habe über Google schon vereinzelt Threads zu diesem Thema gefunden, allerdings hatten die alle keine Koordinaten auf einem Bild, die verlinkt werden sollten. Daher hat das mit deren Code nicht funktioniert, bzw mich komplett verwirrt.
In den gefundenen Beispielen gab es sicherlich sowas wie
<a ... onmouseover="irgendwelches JavaScript" onmouseout="irgendwelches anderes JavaScript">das geht genauso mit
<area ... onmouseover="irgendwelches JavaScript" onmouseout="irgendwelches anderes JavaScript">-
In den gefundenen Beispielen gab es sicherlich sowas wie
<a ... onmouseover="irgendwelches JavaScript" onmouseout="irgendwelches anderes JavaScript">
> das geht genauso mit > `<area ... onmouseover="irgendwelches JavaScript" onmouseout="irgendwelches anderes JavaScript">`{:.language-html} Danke für deine Antwort! Ja, soetwas gab es, aber das bezog sich nur auf einen "Link", aber ich hab ja 4. Mit nur einem Würde ich das bestimmt auch hinbekommen, aber wie man dann den Sprung auf mehrere schafft... Bsp mit einer area: ~~~html <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> function bildwechsel (was) { document.getElementById("hintergrund").style.backgroundImage = was; } </script> </head> <body> <map name="Linkmap"> <area href="test/index.jsp" shape="rect" coords="122, 90, 250, 218" onmouseover="bildwechsel('url(test2.gif)')" onmouseout="bildwechsel('url(test1.gif)')"> </map> <img src="test1.gif" width="501" height="369" border="0" usemap="#Linkmap"> </body>Was muss ich tun wenn ich das auf mehrere erweitern möchte?
-
@@Theo:
nuqneH
function bildwechsel (was) {
document.getElementById("hintergrund").style.backgroundImage = was;
}Welches Element hat denn bei dir die ID "hintergrund"?
Willst du nicht den Hintergrund des 'body'-Elements (
document.body) oder des 'html'-Elements (document.documentElement) ändern?Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck) -
Hi,
<area ... onmouseover="irgendwelches JavaScript" onmouseout="irgendwelches anderes JavaScript">Danke für deine Antwort! Ja, soetwas gab es, aber das bezog sich nur auf einen "Link", aber ich hab ja 4. Mit nur einem Würde ich das bestimmt auch hinbekommen, aber wie man dann den Sprung auf mehrere schafft...
Rufe die Funktion mit einem Parameter, der den Namen/die Adresse des Hintergrundbildes enthält, auf.
http://de.selfhtml.org/javascript/sprache/funktionen.htmMfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
-
-
-
Hallo,
...</head>
<BODY bgcolor="#808080" text="red" background-repeat:no-repeat;>
<center>
<img name="header" src="images/header.png" width="800" height="100" style="filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;" border="0" id="header" usemap="#m_header" alt="" /><map name="m_header" id="m_header">
<area shape="poly" coords="704,39,781,66,775,92,692,65" href="hintergrundbild1" alt="" />
<area shape="poly" coords="368,3,554,22,553,56,366,34,368,3" href="hintergrundbild2" alt="" />
<area shape="poly" coords="114,45,273,26,274,54,119,73,114,45" href="hintergrundbild3" alt="" />
<area shape="poly" coords="18,13,98,24,95,56,13,44,18,13" href="hintergrundbild4" alt="" />
</map>
</center>
</body>
</html>[/code]
Dazu hat Opa Horst eine Idee: Ändere im obigen Script die HREF-tags!
href="javascript:document. ... .src='hintergrungbildx'"
hoffentlich klappt's Opa Horst