Hallo Forum,
ich habe folgendes Problem:
Auf einer Webseite habe ich eine Grafik eingebunden, in der ich in einer Map drei Hotspots definiert habe. Nun möchte ich diese Hotspots jedoch nicht zu anderen Seiten verlinken sondern beim Drüberfahren mit der Maus (also wahrscheinlich onMouseOver) soll für jeden Hotspot ein separat erstellter Container mit dem dazu passenden Text "über" der Grafik sichtbar werden.
Bekommt man das mit Dreamweaver-Hausmitteln und CSS irgendwie hin oder muss ich jetzt tatsächlich auch noch Javascript lernen?

Im Netz bin ich auf ein Beispiel in JS gestoßen, dass meinen Vorstellungen schon sehr nahe kommt, allerdings auch wieder einen Link voraussetzt:


Vielen Dank schonmal,
Kev

Erstens: Überschrift: JavaScript ist ungleich Java und hat außer dem "Java" im Namen nichts mit Java gemein.

Zweitens: mit etwas Glück und Geschick geht's ganz ohne JavaScript. Und zwar nur mit HTML und CSS. Denn: das "onMouseOver" unter CSS ist die Pseudo-Klasse :hover, siehe auch bzw. .

Du musst also in HTML eine sog. Imagemap ( bzw. ) erstellen und diese dann an den betreffenden Stellen die Dir wichtig sind kombinieren mit einer :hover-Pseudoklasse. Und dann definierst Du eben Blockelemente (z.B. böte sich da <div> oder <p> an), welche Deinen Beschreibungstext behinhalten. Und diese Blockelemente werden dann eben bei jedem :hover an der betreffenden Stelle eingeblendet oder eben nicht (nämlich dann, wenn die Maus den mit :hover gekennzeichneten Bereich -- z.B einen Anker <a> oder ein anderes Element -- verlässt).

Kann man wunderbar und recht schnörkellos via HTML + CSS machen. Ohne unbedingt auf JavaScript zurückgreifen zu müssen.

Erstmal sorry wegen der Überschrift. Wie man sieht, kenne ich mich damit wirklich nicht aus. HTML & CSS verstehe ich ja gerade noch...
Uiuiui, habe die Links mal schnell überflogen und werde mich morgen noch genauer damit befassen. Vielen Dank für Deine schnelle und kompetente Antwort.

Also es gibt in Dreamweaver Verhalten/Behaviors und es gibt die Möglichkeit DIVs/Layers mit absoluter Positionierung zu erstellen. Das geschieht zwar mit CSS und Javascript, können muss man es aber nicht unbedingt, da alle nötigen Verhalten (Layer sichtbar machen / Layer verbergen) in Dreamweaver vorgefertigt enthalten sind. Hierzu erstellst Du einfach die drei Container Elemente, setzt ihren "visibility" Parameter auf "hidden" und machst sie dann bei onMouseOver/onMouseOut Ereignissen (über den Verhaltens-Inspektor) sichtbar bzw. wieder unsichtbar...

Wenn die Texte nur sehr einfach und unformatiert sein können, reicht es eigentlich auch, sie dem "title" Parameter des "area" Elementes mitzugeben.

Ich würde wegen so einer banalen Funktionalität nicht unbedingt gleich ein mächtiges Paket wie jQuery einbinden (wenn Du es denn nicht auch noch anderweitig brauchst), Du erhöhst nur die Ladezeit und den Speicherverbrauch der Seite für Nichts.

Wenn Du schon zu so einer Einsicht kommst -- warum dann sowas relativ Banales überhaupt mit JavaScript machen, wo es doch auch per CSS und :hover ginge?
Zumal Du davon ausgehen kannst, dass Dreamweaver in dieser Hinsicht alles andere als schlanken, optimierten Code ausspucken wird, sondern im Endeffekt etwas sehr Aufgeblähtes...

Ich bin jetzt nicht der Experte für Imagemaps, aber ich besinne mich, dass "area" ein leeres Element ist, also keinen Inhalt hat... Demnach kann ich da mit :hover wenig erreichen... den nicht vorhandenen Text sichtbar machen bringt nicht die Welt und nur mit CSS den Style eines anderen Elementes ändern...? Wie soll das gehen? (Oder: Was übersehe ich da?)

Der Code, den Dreamweaver generiert, ist gar nicht soooo schlimm, die Variablenbennenung und die Methodennamen sind meistens schon das Schlimmste daran. Die Menge Code, die man braucht, um die visibility Eigenschaft zu setzen, hält sich schon noch in Grenzen...

Wozu das area-Element, wenn er besser das map-element verwenden könnte/sollte bzw. beides in Kombination? Und wo steht geschrieben, dass das area-Element, wen nes auch per definitionem ein "EMPTY" Element ist (also kein schließendes End-Tag besitzt, deshalb nennt man es ein leeres Element), tatsächlich so empty sein muss, wie Du das vermutest?

Zumal man in das map-Element Anker (<a>) einbetten kann, welchen man das :hover mitgeben kann? :hover kann man im Übrigen so ziemlich jedem Element im DOM-Baum mitgeben, es gibt nur einen Browser, der will es unbedingt nur auf das <a>-Element angewendet haben. Dreimal darfst Du raten, welcher das ist: fängt mit "Internet" an und hört mit "Explorer 6" auf...

Mit :hover kannst Du eine ganze Menge erreichen.
Schau Dir u.a. mal die Beispiele von Eric Meyer, dem "CSS Papst" schlechthin (zuvor lange Jahre für Netsacep tätig, seit dem Niedergang von Netscape ist er freiberuflich unterwegs; sein Ruf eilt ihm voraus: Adobe heuerte ihn auch mal an, damit er dem Dreamweaver besseres CSS beibringt):

meyerweb.com: CSS/edge
meyerweb.com: Pure CSS popups (dürfte so in die Richtung gehen, was hier gebraucht wird)

Auch die anderen Beispiel sind sehr sehenswert.

Da er maschinengeneriert ist, ist er meistens immer noch aufgeblähter als handgeschriebener Code und an so mancher Stelle voller vermeidbarer Redundanzen oder "von hinten durch die Brust"...

Hallo ihr Beiden!
Erstmal eine dicke Entschuldigung dafür, dass ich mich erst heute wieder melde...
Viel wichtiger ist aber ein großes DANKESCHÖN an Euch. Die Tipps und Links haben mir die Augen geöffnet und mir meine vorherigen Denkfehler bei der Planung aufgezeigt. Jetzt funktioniert endlich alles wie gewünscht.
Vielen Dank für die Mühe und Hilfe!