nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
molily
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
Der Martin
Der Martin
Der Martin
Hallo zusammen,
ich bin HTML Neuling und wollte wissen, ob es eine einfache Lösung für folgende Problemstellung gibt.
Bei MouseOver über einen gewissen Bereich soll das Hintergrundbild gewechselt werden.
Der Bereich ist ursprünglich ein Link (<area href="beispiel/test/hintergrund.htm" shape="poly" coords="426,183,424,213,275,204,277,173">)
Kann ich an dieser Stelle irgendwie mitgeben, dass ein neues Bild geladen werden soll, wenn die Maus über die Koordinaten geführt wird?
Vielen Dank im voraus,
Gruss,
Martin
Hello out there!
ich bin HTML Neuling
Du bist HTML? Ich bin Deutschland.
↗ Agovis
Bei MouseOver über einen gewissen Bereich soll das Hintergrundbild gewechselt werden.
Der Bereich ist ursprünglich ein Link (<area href="beispiel/test/hintergrund.htm" shape="poly" coords="426,183,424,213,275,204,277,173">)
HTML kommt nicht infrage, weil das nur die statische Dokumentstruktur beschreibt, aber keine dynamischen Veränderungen auf einer Webseite.
CSS geht auch nicht, da du nicht die Eigenschaften des Elements verändern willst, wo das hover-Ereignis auftritt. (Und auf area lässt sich sowieso kein CSS sinnvoll anwenden.)
Bleibt also JavaScript.
Kann ich an dieser Stelle irgendwie mitgeben, dass ein neues Bild geladen werden soll, wenn die Maus über die Koordinaten geführt wird?
Ja, mit dem passenden http://de.selfhtml.org/javascript/sprache/eventhandler.htm@title=Eventhandler.
Du möchtest Style-Eigenschaften des bodys ändern, also den Wert von document.body.[ref:self811;javascript/objekte/style.htm@title=style].backgroundColor ändern.
See ya up the road,
Gunnar
Hello out there!
also den Wert von
document.body.[ref:self811;javascript/objekte/style.htm@title=style].backgroundColorändern.
Nein, Ingrid, nicht den von backgroundColor, sondern den von backgroundImage. Oder auch einfach den von background. ↗ <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrundfarben und -bilder>
Noch ’ne Frage in den Raum: document.body ist in http://de.selfhtml.org/javascript/objekte/htmlelemente.htm@title=HTML-Elementobjekte nicht aufgeführt, statt dessen wird document.getElementsByTagName("body")[0] verwendet. Muss das sein oder kann man sich darauf verlassen, dass document.body in allen Browsern funktioniert? (Tut es in IE und FF.)
See ya up the road,
Gunnar
Hallo Gunnar.
Muss das sein oder kann man sich darauf verlassen, dass
document.bodyin allen Browsern funktioniert? (Tut es in IE und FF.)
Du kannst dich darauf verlassen. Sogar noch eher als auf document.getElementsByTagName('body')[0].
Selbst in DOM Level 1 wird document.body schon erwähnt. Faktisch dürfte das body-Objekt aber sogar noch älter sein.
Einen schönen Montag noch.
Gruß, Ashura
Hallo Gunnar,
ok, danke für den Hinweis (auch den mit dem "Deppenleerzeichen" ;-)).
Der Vollständigkeit halber noch mal ne Frage:
Wie muss dass dann im Script lauten?
so irgendwie?
<script type="text/javascript">
function bild_wechseln () {
document.body.style.background = ???;
return true;
}
</script>
<area href="beispiel/test/hintergrund.htm" shape="poly" coords="426,183,424,213,275,204,277,173" onfocus="bild_wechseln">
Gruß,
Martin
Hallo,
document.bodyist in http://de.selfhtml.org/javascript/objekte/htmlelemente.htm@title=HTML-Elementobjekte nicht aufgeführt
document.body müsste eher unter http://de.selfhtml.org/javascript/objekte/document.htm aufgeführt sein und dort eine eigene Unterseite besitzen.
Die Eigenschaften von body-Elementknoten sind durchaus beschrieben: http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#body. Aber eben nicht, dass man auf den body-Elementknoten einfach über document.body zugreifen kann.
statt dessen wird
document.getElementsByTagName("body")[0]verwendet.
Das Problem ist bekannt und geht weit über die Geschichte mit document.body hinaus. SELFHTML ist in dem Punkt Bullshit. Es gibt keinen Grund, nicht von DOM HTML Gebrauch zu machen und sich auf Core-Methoden zu beschränken. Meistens ist das Gegenteil ratsam. Es wurde bisher noch nicht geändert, weil SELFHTML auf breiter Ebene so vorgeht und unzählige Beispiele und Erklärungstexte hätten geändert werden müssen. Das war bisher zuviel Arbeit für SELFHTML 8.1 und 8.1.1. Außerdem wäre der Nutzen im Vergleich zum Aufwand gering - die Modernisierung wäre nur äußerlich, eine Grundüberarbeitung ist nötig.
Mathias
Hello out there!
ich bin HTML Neuling
Du bist HTML? Ich bin Deutschland.
↗ Agovis
Bei MouseOver über einen gewissen Bereich soll das Hintergrundbild gewechselt werden.
Der Bereich ist ursprünglich ein Link (<area href="beispiel/test/hintergrund.htm" shape="poly" coords="426,183,424,213,275,204,277,173">)
HTML kommt nicht infrage, weil das nur die statische Dokumentstruktur beschreibt, aber keine dynamischen Veränderungen auf einer Webseite.
CSS geht auch nicht, da du nicht die Eigenschaften des Elements verändern willst, wo das hover-Ereignis auftritt. (Und auf area lässt sich sowieso kein CSS sinnvoll anwenden.)
Bleibt also JavaScript.
Kann ich an dieser Stelle irgendwie mitgeben, dass ein neues Bild geladen werden soll, wenn die Maus über die Koordinaten geführt wird?
Ja, mit dem passenden http://de.selfhtml.org/javascript/sprache/eventhandler.htm@title=Eventhandler.
Du möchtest Style-Eigenschaften des bodys ändern, also den Wert von
document.body.[ref:self811;javascript/objekte/style.htm@title=style].backgroundColorändern.See ya up the road,
Gunnar
Hallo Gunnar,
ok, danke für den Hinweis (auch den mit dem "Deppenleerzeichen" ;-)).
Der Vollständigkeit halber noch mal ne Frage:
Wie muss dass dann im Script lauten?
so irgendwie?
<script type="text/javascript">
function bild_wechseln () {
document.body.style.background = ???;
return true;
}
</script>
<area href="beispiel/test/hintergrund.htm" shape="poly" coords="426,183,424,213,275,204,277,173" onfocus="bild_wechseln">
Gruß,
Martin
Hello out there!
ok, danke für den Hinweis (auch den mit dem "Deppenleerzeichen" ;-)).
Gerngeschehn. Dann gleich noch der hinterher, kein Vollquottel zu sein.
so irgendwie?
function bild_wechseln () {
document.body.style.background = ???;
return true;
}
Ja, so irgendwie. Als Wert übergibst du den URI zu deinem Bild.
onfocus="bild_wechseln"
^^
Nein, so kannste eine Funktion nicht aufrufen. Auch wenn keine Parameter übergeben werden, die Klammern müssen sein:
onfocus="[code lang=javascript]bild_wechseln()"[/code]
Du hättest dir auch die Deklaration der Funktion sparen können und die Anweisung im Eventhandler notieren können:
onfocus="[code lang=javascript]document.body.style.background = 'http://example.net/myPicture'"[/code]
Oder du trennst konsequent das dynamische Verhalten vom statischen HTML: Du gibst der area eine ID (<area id="myArea">) und notierst in einem script-Bereich im head oder einer externen JavaSript-Datei
window.onload = function() {
document.getElementById("myArea").onfocus = function() {
document.body.style.background = 'http://example.net/myPicture';
};
};
See ya up the road,
Gunnar
Hallo Gunnar,
habs versucht, funktioniert aber leider nicht. Kann das daran liegen, dass mein Quellcode eine sensitive Grafik enthält.
Bsp.
<p><img src="karte.png" width="345" height="312" border="0" usemap="#Landkarte"></p>
Wie kann ich nun diese Krate (karte.png) in z.B. karte1.png wandeln?
P.S. Wie kommt man nur solche Brüller ;-) wie Vollquottel und Agovis?
Gruß,
Martin
Hello out there!
habs versucht, funktioniert aber leider nicht. Kann das daran liegen, dass mein Quellcode eine sensitive Grafik enthält.
Nee, aber das kann daran liegen, dass ich schusslig bin. [wahsaga, CSS2 §14.2.1, CSS2 §4.3.4]
Wie kann ich nun diese Krate (karte.png) in z.B. karte1.png wandeln?
Willst du das wirklich? ↗ Thread Bildwechsel bei verweissensitiven Grafiken
P.S. Wie kommt man nur solche Brüller ;-) wie Vollquottel und Agovis?
... und wie Gunnar™? ;-)
See ya up the road,
Gunnar
Hallo Gunner,
ich bekomm das einfach nicht hin!
Wo ist der Fehler???
<head>
<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="javascript:bildwechsel('url(test2.gif)')" onmouseout="javascript:bildwechsel('url(test1.gif)')">
</map>
<img src="test1.gif" width="501" height="369" border="0" usemap="#Linkmap" id="hintergrund">
</body>
Ich werd daraus nicht schlau! An welcher Stelle muss die id für den sensitiven Hintergrundbereich gestezt werden? Oder fehlt grundsätzlich noch ein Teil?
Gruß,
Martin
Hello out there!
Wo ist der Fehler???
<head>
Die <http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Doctype-Angabe > und das html-Element hattest du nicht vergessen, sondern hier nur weggelassen?
function bildwechsel (was) {
document.getElementById("hintergrund").style.backgroundImage = was;
}
Kein Fehler, aber ich würd als Parameter nicht den Wert für CSS, sondern den URI übergeben:
function bildwechsel (uri) {
document.getElementById("hintergrund").style.backgroundImage = "url(" + uri + ")";
}
onmouseover="javascript:bildwechsel('url(test2.gif)')" onmouseout="javascript:bildwechsel('url(test1.gif)')"
Nein, der Attributwert eines Eventhandlers ist ausführbarer Code (üblicherweise JavaScript), das javascript-Pseudoprotokoll hat darin nichts zu suchen. (In JavaScript wäre das eine Sprungmarke, aber sowas willst du nicht.)
<img src="test1.gif" width="501" height="369" border="0" usemap="#Linkmap" id="hintergrund">
Und hier isser, dein Denkfehler. Du änderst dynamisch den _Hinter_grund des img-Elements. Kannste machen, solltest dich aber nicht wundern, dass du davon nichts siehst, wenn dieser vom Vordergrund vollständig verdeckt ist.
Und die Angabe border="0" sollte auch weg und dieses mit CSS angegeben werden.
See ya up the road,
Gunnar
Hallo Gunnar,
Wie ich Anfangs schon erwähnt hatte, bin ich Anfänger.
Kein Fehler, aber ich würd als Parameter nicht den Wert für CSS, sondern den URI übergeben:
function bildwechsel (uri) {
document.getElementById("hintergrund").style.backgroundImage = "url(" + uri + ")";
}
Wie soll ich in diesem Zusammenhang das mit uri verstehen?
Nein, der Attributwert eines Eventhandlers ist ausführbarer Code (üblicherweise JavaScript), das javascript-Pseudoprotokoll hat darin nichts zu suchen. (In JavaScript wäre das eine Sprungmarke, aber sowas willst du nicht.)
Wie dann?
Und hier isser, dein Denkfehler. Du änderst dynamisch den _Hinter_grund des img-Elements. Kannste machen, solltest dich aber nicht wundern, dass du davon nichts siehst, wenn dieser vom Vordergrund vollständig verdeckt ist.
Wie bekomme ich dann das Standardbild bei keiner aktion in den Hintergrund?
Huch jetzt bin ich aber platt!
Vielen dank bereits an dieser Stelle für deine Hilfe.
Gruß,
Martin
Hi, schaulustiger Namensvetter!
Wo ist der Fehler???
Abracadabra ... !
function bildwechsel (was) {
document.getElementById("hintergrund").style.backgroundImage = was;
}
Hier setzt du ein Hintergrundbild eines Elements mit der ID "hintergrund". Kann man so machen.
<area href="test/index.jsp" shape="rect" coords="122,90,250,218" onmouseover="javascript:bildwechsel('url(test2.gif)')" onmouseout="javascript:bildwechsel('url(test1.gif)')">
Das sieht für sich genommen auch vernünftig aus.
<img src="test1.gif" width="501" height="369" border="0" usemap="#Linkmap" id="hintergrund">
Das auch. Aber in Kombination ergibt sich, dass du das Hintergrundbild eines Bildes ändern möchtest. Klingt das für dich sinnvoll? Für mich nicht, auch wenn's formal in Ordnung ist. Ich vermute, du möchtest hier [Wiederholung] ...
function bildwechsel (was) {
document.getElementById("hintergrund").style.backgroundImage = was;
}
keine Eigenschaft der style-Collection ändern, sondern das src-Attribut des img-Elements selbst, also
document.getElementById("hintergrund").src = was;
Es versteht sich von selbst, dass du dann natürlich nicht mehr "url(...)" übergibst, sondern nur noch die reine Bild-URL.
Viel Erfolg noch,
Martin
Hello out there!
<area href="test/index.jsp" shape="rect" coords="122,90,250,218" onmouseover="javascript:bildwechsel('url(test2.gif)')" onmouseout="javascript:bildwechsel('url(test1.gif)')">
Das sieht für sich genommen auch vernünftig aus.
Nanana ...
[…] dass du das Hintergrundbild eines Bildes ändern möchtest. Klingt das für dich sinnvoll? Für mich nicht, […]
Und wenn das Bild im Vordergrund aber nun transparente Bereiche hat ...
Und wenn der Topf aber nun ein Loch hat ...
See ya up the road,
Gunnar
Hallo Gunnar,
<area href="test/index.jsp" shape="rect" coords="122,90,250,218" onmouseover="javascript:bildwechsel('url(test2.gif)')" onmouseout="javascript:bildwechsel('url(test1.gif)')">
Das sieht für sich genommen auch vernünftig aus.
Nanana ...
ja, der Unsinn mit dem "javascript:" ist mir erst aufgefallen, als nach dem Abschicken ich dein Parallelposting gelesen habe.
[…] dass du das Hintergrundbild eines Bildes ändern möchtest. Klingt das für dich sinnvoll? Für mich nicht, […]
Und wenn das Bild im Vordergrund aber nun transparente Bereiche hat ...
Ich hab mit sowas mal putzige Effekte realisiert und noch überlegt, ob ich näher drauf eingehen soll. Aber "in der Regel" ist ein Hintergrundbild für ein Bild wohl nicht das, was der Autor meint. Einverstanden?
Und wenn der Topf aber nun ein Loch hat ...
Eben. :-)
Ciao,
Martin
Hallo Martin
Ich hab mit sowas mal putzige Effekte realisiert und noch überlegt, ob ich näher drauf eingehen soll. Aber "in der Regel" ist ein Hintergrundbild für ein Bild wohl nicht das, was der Autor meint. Einverstanden?
Also gemeint ist ein sensitiver Hintergrund in Form eines Bildes, auf welchem sich 4 Photos befinden. Alle Photos sind Schwarz/Weiß, und sollen erst wenn der User mit der Maus darüber fährt Farbig werden.
Auch dir schon mal besten Dank für die Unterstüzung - Ich kann jede Hilfe brauchen.
Gruss,
ebenfalls ein Martin
Hallo Liebes Forum,
ich brauche immer noch Hilfe, also wenn jemand weiter weiß...
Viele Grüße,
Martin
Hallo,
ich brauche immer noch Hilfe, also wenn jemand weiter weiß...
dann werde bitte konkreter: Was genau ist dir nach Gunnars und meinem Posting immer noch unklar? Du hast deutliche Hinweise bekommen, zumal wir beim eigentlichen Knackpunkt sogar fast zeitgleich denselben Gedanken hatten.
Ciao,
Martin
Hallo Martin,
in Gunnars Antwort hab ich geschrieben, was ich nicht weiß, und zwar:
Wie muss ich das Hintergrundbild (test1.gif) einbinden, sodass ich gleichzeitig usemap nutzen kann, und trotzdem bei mouseover einen Wechsel (Beispielsweise zu test2.gif) angezeigt bekomme.
Nochmal zum Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</html>
Viele Grüße,
Martin
Einen schönen guten Abend.
document.getElementById("hintergrund").src = was;
Wo ist denn dein Element mit der Id "hintergrund"?
<body>
<map name="Linkmap">
<area href="test/index.jsp" shape="rect" coords="122, 90, 250, 218" onmouseover="bildwechsel('test2.gif')" onmouseout="bildwechsel('test1.gif')">
</map>
<img src="test1.gif" width="501" height="369" border="0" usemap="#Linkmap">
</body>
</html>
Vielleicht bin ich ja blind aber ich sehe da keins.
So long and thanks for all the fish,
Oku
Hallo Oku,
danke für den Hinweis, habs nun geschafft. ;-))) Freu, freu...
Gute Nacht.
Gruß,
Martin
Hallo,
Wie muss ich das Hintergrundbild (test1.gif) einbinden, sodass ich gleichzeitig usemap nutzen kann, und trotzdem bei mouseover einen Wechsel (Beispielsweise zu test2.gif) angezeigt bekomme.
und Gunnar und ich haben dich darauf aufmerksam gemacht, dass du gar nicht das Hintergrundbild meinst, sondern das src-Attribut des img-Elements selbst. Dein Code-Beispiel hat doch nirgends ein Hintergrundbild - jedenfalls nicht im technischen Sinn!
function bildwechsel (was) {
document.getElementById("hintergrund").style.backgroundImage = was;
}
Nein, nicht style.backgroundImage, sondern src willst du ändern!
<area href="test/index.jsp" shape="rect" coords="122, 90, 250, 218" onmouseover="bildwechsel('url(test2.gif)')" onmouseout="bildwechsel('url(test1.gif)')">
Und hier möchtest du *nur* die Bild-URL übergeben und nicht die CSS-Notation 'url(...)'.
<img src="test1.gif" width="501" height="369" border="0" usemap="#Linkmap">
Und hier hast du plötzlich die ID "hintergrund" verloren. Vorhin war sie noch da.
Schönen Abend noch,
Martin
Hallo Martin,
vielen Dank nochmal für die Erklärung. Jetzt funktioniert das ganze auch so wie es soll. Hätt ich vorher auch schon hinkriegen müssen!
Bin eben absoluter Neuling auf diesem Gebiet.
Seis wie es ist es funktioniert und ich bin glücklich.
Schönen Abend noch.
Viele Grüße,
Martin
hi,
Ja, so irgendwie. Als Wert übergibst du den URI zu deinem Bild.
Nee, tuste nicht :-)
document.body.style.background = 'http://example.net/myPicture';
Das ist kein gültiger Wert für die CSS-Eigenschaft background.
'url(http://example.net/myPicture)' wäre einer.
gruß,
wahsaga