Mouseover bei map ohne Javascript?

Hallo,
ich möchte, dass bei einem Gruppenbild, wenn man auf den Kopf einzelner Personen mit der Maus drüber geht, dass ein größeres Bild dieser Person angezeigt wird.
Mit dem normalen map-Code kann ich das mit einmal klicken aufmachen.

geht es aber auch, wenn ich nur mit der maus über den Kopf gehe?
also der mouseover-effekt wie bei Javascript, nur ohne Javascript?

vielen dank
Silke

Das geht nur mit JavaScript.

Du könntest das mittels CSS ganz einfach lösen. Allerdings würde ich hier ein Rollover empfehlen. das heisst, wenn man mit der Mouse über das Thumbnail (kleines Bild) fährt wird es vergrößert und wenn du mit der Mouse das Bild dann wieder verlässt, geht es zurück in den Normalzustand.

  • Bei src="" kommt natürlich deine Grafik rein.
  • Bei style="" legst du die Ausgangswerte fest, diese können sowohl die Größe als auch die Position oder andere Attribute enthalten.
  • Bei onMouseOver="" legt du im von mir gezeigten Format die Werte fest, welche geändert werden sollen, in deinem Fall eben die Größe der Grafiken.
  • Bei onMouseOut="" gibst du wieder die Werte ein, die du auch bei style="" verwendest, allerdings im selben Format (Syntax) wie bei onMouseOut.

du siehst also das es durchaus mit wenigen Mitteln und OHNE JavaScript Lösungen gibt, ganz hingegen der Meinung meines Vorredners.

Hoffe geholfen zu haben.

Grüße Michael

  • Bei onMouseOver="" legt du im von mir gezeigten Format die
    Werte fest, welche geändert werden sollen, in deinem Fall eben
    die Größe der Grafiken.
  • Bei onMouseOut="" gibst du wieder die Werte ein, die du auch
    bei style="" verwendest, allerdings im selben Format (Syntax)
    wie bei onMouseOut.

onMouseOver und onMouseOut ist also kein JavaScript?

Erst denken, und dann posten.

Selbstverständlich sind diese beiden Befehle JavaScript.

lg phoenix

Danke für Eure Hilfe
Silke

onMouseOver und onMouseOut ist also kein JavaScript?

Erst denken, und dann posten.

Selbstverständlich sind diese beiden Befehle JavaScript.

Rüchtüg.

es geht - theoretisch
Hallo Silke,

wie Michael schon andeutete, geht es auch ohne javascript und zwar mittels CSS. Dazu muss man nur kreativ genug sein:

Wenn du über das Gruppenfoto ein paar Ebenen so plazierst, dass sie die Gesichter der Personen überdecken, dann kannst du sehr wohl mittels CSS ihren Hintergrund bei mouseover (CSS:hover) ändern. Ich habe ein kleines Beispiel erstellt, das die Funktionsweise verdeutlichen kann:
http://www.toomuchcookies.net/gb_test/

Erklärung: die Kreise sollen Personen darstellen (unsere Klasse hatte so einige Probleme…:wink: ). Wenn du mit der Maus über den roten oder grünen Kreis fährst, verändert sich die darüber liegende Ebene so, dass sie grösser wird und ein bestimmtes Hintergrundbild anzeigt (das vergrösserte Gesicht).

Der CSS-teil dazu sieht folgendermassen aus:

img
{
 position:absolute;
 border:0px;
}

.gruener
{
 text-decoration:none;
 position:absolute;
 background:transparent;
 width:100px;
 height:100px;
 top:300px;
 left:120px;
}

.gruener:hover
{
 background:url(Gruppenbild\_gruen.jpg) no-repeat;
 top:200px;
 left:50px;
 width:280px;
 height:350px;
}

.roter
{
 text-decoration:none;
 position:absolute;
 background:transparent;
 width:120px;
 height:100px;
 top:50px;
 left:130px;
}

.roter:hover
{
 background:url(Gruppenbild\_rot.jpg) no-repeat;
 top:-20px;
 left:80px;
 width:280px;
 height:380px;
}

Ich hoffe, das hilft ein wenig.

Gruss,

Omar Abo-Namous

Hallo Silke,

auch wenn ich spät geantwortet habe wüsste ich gerne, ob dir mein Tipp geholfen hat…

ansonsten, wer die Idee „in Betrieb“ nimmt, bitte kurz bescheid geben, ich würde mir gerne ein fertiges Produkt ansehen…

Gruss, Omar Abo-Namous