Onmouseover-text In Css Einstellungen

[Gast_Apeman_*]

Hallo,

ich habe feststellen müssen, das der Firefox verschiedene Sachen nicht anzeigt, so z.B. einen onMouseover-Textwandel nach diesem Beispiel.

QUELLTEXT

<div id="Test">&nbsp;</div>

<map name="bedienung">
<area shape="circle" coords="60,45,15" title="Green Power" onMouseover="document.all.Test.innerText='Die Green-Power-Taste'" onMouseout="document.all.Test.innerText=''">

Da ich auch nicht unbedingt ein Freund von JavaScript bin, ist meine Frage: Gibt es eine Möglichkeit mittels CSS einen onMouseover- Effekt so hin zukriegen, das sich im HTML-Dokumnet kein Text dynamisch ändert?

Wenn ja, hat jemand eine Idee wie? Bitte ein Beispiel, ich will dazulernen.

Danke sehr

[Conny]

Hallo Apeman,
so aus'm Bauch heraus glaube ich nicht, daß das was Du vorhast -anhand Deines Beispieles- geht.
Außer man würde das JS in der CSS Datei verlagern?
Bei Selfhtml habe ich folgendes gefunden, vielleich hilft es Dir weiter.
CSS und Mousover
cu
Conny

[Gast_Apeman_*]

Hallo Apeman,
so aus'm Bauch heraus glaube ich nicht, daß das was Du vorhast -anhand Deines Beispieles- geht.
Außer man würde das JS in der CSS Datei verlagern?
Bei Selfhtml habe ich folgendes gefunden, vielleich hilft es Dir weiter.
CSS und Mousover
cu
Conny

Nun, mit dem InternetExplorer geht das, aber der zeigt auch alles an

Aber danke für deinen Link, werds mal lesen und ausprobieren.

[Gast_Apeman_*]

Nachtrag: Also, das Beispiel von dir ersetzt eine Grafik durch eine andere beim Mouseover. Ich habe allerdings eine MAP-Grafik, in Links aufgeteilt und beim Mouseover soll an einer frei definierbaren Stelle im HTML-Dokumnet ein Text eingeblendet werden, ähnlich dem "alt" oder "title"-Tag. Mit Grafiken habe ich das schon hinbekommen, aber nicht mit Text. Auch mit "innerHTML" bin ich bisher gescheitert, zeigt Firefox auch nicht an.

Kennt jemand eine Browserübergreifende Lösung?

Der Beitrag wurde von Apeman bearbeitet: 15.06.2004 - 17:30

[Gast_heinzelhund_*]

Hallo,

ein offensichtliches Problem in deinem Script ist 'document.all'. Hierbei handelt es sich um eine DHTML-Konvention von MS. Wird in der Gecko-Engine nicht interpretiert, da nicht W3C-konform.

Mit 'document.getElementById() ' kannst du zunächst deine Elemente ansprechen. Wird interpretiert vom IE5+, Moz, NS 6+, Opera etc..

Ferner dürfte 'innerText' nicht W3C-konform sein. Hier könntest du mit 'Textknoten' arbeiten. Funktioniert in den oben genannten Browsern.

Siehe W3C DOM2-Model
selfHTML: nodes

Ciao
Heinzelhund

Der Beitrag wurde von heinzelhund bearbeitet: 15.06.2004 - 19:15

[Gast_Apeman_*]

Danke für deine Mühe. Habe zwar den Wälzer von Münz/Nefzger vor mir zu liegen, finde dort "nodes" aber nicht. Wahrscheinlich schon zu alt. Werde mir deine Ratschläge ansehen.

Danke

[Gast_Apeman_*]

Man, ist das eine Materie!
Also, für die es auch wissen möchten ich habe es geschafft, DANK eurer Hilfe und Denkansätzen.
Und so funktioniert es (Beispiel):

QUELLTEXT

<div id="Absatz">Hier wird ein Text ausgegeben, der dynamisch geändert wird.</div>

<map name="Bild">
<area shape="circle" coords="60,45,15" title="Power" onMouseover="document.getElementById('Absatz').firstChild.nodeValue='Die Power-Taste zum ein- bzw. ausschalten der Anlage.'" onMouseout="document.getElementById('Absatz').firstChild.nodeValue=''">
...weitere <area's>
<img usemap="#Bild" align="left" src="pfad/zur/Grafik" width="200" height="560" border="0" alt="Die Bedienelemente">
</map>

Mittel CSS habe ich noch die Position, Schriftart, Farbe etc. des DIV-Containers bestimmt.
Der Effekt ist: Die Grafik ist das Bild einer Konsole und wird als MAP eingebunden und angezeigt. Beim darüberfahren mit der Maus über die verschiedenen Bedienknöpfe der Konsole wird ein Text im DIV-Container als Erläuterung angezeigt, ähnlich dem alt- bzw. title-Tag. Nicht spektakulär, aber genau was ich brauchte und es funktioniert mit IE und Firefox. Andere Browser habe ich nicht.

Danke

[Gast_heinzelhund_*]

Glückwunsch, ich hab für das Thema länger gebraucht.
Tipp zum Thema am Rande: Gecko interpretiert auch einen Zeilenumbruch im Quelltext als einen Knotenpunkt.

Ciao
Heinzelhund

[Gast_Apeman_*]

Danke für den Glückwunsch und auch für den Tipp!

Ich musste mir allerding SelfHTML 8 herunter laden. Mein Buch mit SelfHTML 7.0 ist doch schon etwas betagt, habe ich festgestellt. Die Änderungen sind im Detail schon enorm.

[Auge]

Ich musste mir allerding SelfHTML 8 herunter laden. Mein Buch mit SelfHTML 7.0 ist doch schon etwas betagt, habe ich festgestellt. Die Änderungen sind im Detail schon enorm.

Hallo

Das fällt dir jetzt auf, wo SelfHTML 8 auch schon ca. 2,5 Jahre alt ist, und viele,
wegen der neueren Browser, nach einer neuen Version der Doku rufen.

*btw*: Auf den SelfHTML-Seiten gibt es auch Beschreibungen, wie man die
verschiedenen Arten der verschiedenen Browser, auf JavaScript zuzugreifen,
kontrollieren kann (Feature Artikel, Tips und Tricks, Suche).

Sollte mit den neuen Servern jetzt auch rund um die Uhr funktionieren (namentlich die Suche).

Tschö, Auge

[Gast_Apeman_*]

Das fällt dir jetzt auf, wo SelfHTML 8 auch schon ca. 2,5 Jahre alt ist, und viele, wegen der neueren Browser, nach einer neuen Version der Doku rufen.

Ja, das ist mir erst jetzt so richtig klar geworden, weil ich bisher mit der "Bibel" allein klar kam. Jetzt, wo ich meinen Horizont etwas erweitern möchte und auch die Zeit dazu habe, habe ich erst die feinen Unterschiede begriffen. Was ist so schlimm daran?

[Gast_heinzelhund_*]

Was ist so schlimm daran?

Schlimm? - Nichts.
... es ist verwerflich, blasphemisch, unverzeihlich!

Heinzelhund

[Auge]

Was ist so schlimm daran?

Nichts. Ich hoffe aber für dich, daß du Emoticons deuten kannst.

Tschö, Auge

[i.b.g]

Hallo,

ich hab das selbst noch nicht benutzt, aber auf CSS-Fractulum wird so etwas ähnliches ausschließlich mit CSS realisiert. Ist vielleicht einen Besuch wert.

[Gast_Apeman_*]

Ist vielleicht einen Besuch wert.

Auf alle Fälle, danke

Ich hoffe aber für dich, daß du Emoticons deuten kannst.

Ja schon, habs nur zu spät gesehen

[Gast_Apeman_*]

...ich hab das selbst noch nicht benutzt, aber auf CSS-Fractulum wird so etwas ähnliches ausschließlich mit CSS realisiert.

Meiner Meinung nach nicht. Habe mir Seite mal geholt. Dort wird mit dem Tag <a> gearbeitet, nicht aber mit <area>.
Mit <a> wird das dort so realisiert:

QUELLTEXT

#navigation a .info {display:none;}

#navigation a:hover .info{
     position: absolute;

Das funktioniert Klasse und ich bin begeistert davon, ehrlich, das sag ich nicht nur so. Aber das ganze auf <area> bezogen funktioniert nicht. Wahrscheinlich weil es dort kein hover im Sinne von <a> gibt? Ich weiß es nicht. So weit bin ich noch nicht drin in dieser Thematik.

Gibt es eine Möglichkeit dies hinzubekommen? Weiß jemand Rat und würde dies hier auch Kund tun?

[i.b.g]

Hallo,

in den W3C-Recomandations habe ich folgendes gefunden:

QUELLTEXT

Client-side image map examples

In the following example, we create a client-side image map for the OBJECT element. We do not want to render the image map's contents when the OBJECT is rendered, so we "hide" the MAP element within the OBJECT element's content. Consequently, the MAP element's contents will only be rendered if the OBJECT cannot be rendered.

<HTML>
  <HEAD>
     <TITLE>The cool site!</TITLE>
  </HEAD>
  <BODY>
    <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
    <MAP name="map1">
      <P>Navigate the site:
      <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
      <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
      <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
      <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
    </MAP>
    </OBJECT>
  </BODY>
</HTML>

Vielleicht hilft es Dir, mal reinzuschauen und alles zu lesen.
Ich denke das wäre eine Lösung!?


[edit]
Ich vergaß: 13.6.1 Client-side image maps: the MAP and AREA elements
[/edit]

Der Beitrag wurde von i.b.g bearbeitet: 17.06.2004 - 6:41

[Google Bot]