turtleshark: Mehrere Mouseover via Image-Map

SELF-Forum

Mehrere Mouseover via Image-Map

turtleshark
– Informationen zu den Bewertungsregeln

Hi Leute,

ich hab mich schon halb tot gesucht - aber bisher keine vernünftige oder verständliche Lösung fürt mein Problem gefunden.

Hier der "Quälgeist":

http://www.bandallemann.de/nw/allemaenner.html

Es funktioniert zumnidest der erste Mouseover. Die anderen Drei sollten auch so aussehen.

Mit Image-Maps habe ich bereits ganz sauber die einzelnen Mitgleider von einander getrennt, die entsprechenden Hyperlinks funktionieren tadellos.

Allerdings funktioniert nur EIN Mouseover. Denn wenn ich die nächsten "Austausch" definiere, findet die Aktion nicht mehr in dem Urtsprungs- sondern in einem völlig neuen Bild statt.

Kann ich denn nicht die "Austausch" kombinieren, ohne dass jedesmal ein zusätzliches Bild angezeigt wird?

Ich meine das in etwa so:

<img src="Band_sw_klein.gif" width="315" height="440" border="0" alt="" title="" name="austausch5";"austausch6";"austausch7" ... usw. usemap="#allemaenner_over" />

Irgendwie funktioniert das nicht und der Browser sagt jedes Mal, der erste Austausch (5) sei nicht definiert...

Ich bin hier echt am verzweifeln - vielen Dank für Eure Hilfe!

greez turtleshark

p.s.: nein - ich kann nicht mit flash arbeiten. ;o)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mehrere Mouseover via Image-Map

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo turtleshark,

    .. habe mir deine Seite schon mal angeschaut. Das könnte so ein tolles Projekt sein ...

    aber leider geht's schon los mit einem Tabellenlayout. Mache dich bitte mit CSS vertraut, und du wirst dich ärgern, schon so lange an deiner Tabelle und den passenden Teilbildchen gebastelt zu haben.

    Dabei ist der CSS-Teil für dich auf 1 Seite nachzulesen: http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=css/eigenschaften/positionierung.htm

    und so kurz wird dann dein HTML:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>xy</title>  
<style type="text/css">  
  body {background-image:url("img/back.jpg"); }  
  #a_stuff {position:absolute; left:200px; top:200px; }  
  #a_setlist {position:absolute; left:180px; top:260px; }  
  #content {position:absolute; left:600px; top:300px; }  
</style>  
</head>  
  
<body>  
<div>  
<a id="a_stuff" href="stuff.html">  
<img id="stuff" src="img/stuff.gif" alt="Stuff">  
</a>  
  
<a id="a_setlist" href="stuff.html">  
<img id="setlist" src="img/setlist.gif" alt="set">  
</a>  
  
<img id="content" src="Band_sw_klein.gif" alt="Band, Programm">  
  
</div>  
</body>  
</html>

    fast genauso kurz kann man die Funktionalität mit javascript definieren.

    würdest du nach diesem Konzept einen Neustart probieren?

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Mehrere Mouseover via Image-Map

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo turtleshark,

    möglicherweise ist dir noch nicht klar wie die Maps funktionieren:
    http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=html/grafiken/verweis_sensitive.htm

    <img src="Band_sw_klein.gif" width="315" height="440" border="0" alt="" title="" name="austausch5";"austausch6";"austausch7" ... usw. usemap="#allemaenner_over" />

    hier wird das name-Attribut nicht erkannt, weil ein Leerzeichen fehlt.

      
<img src="Band_sw_klein.gif" width="315" height="440" border="0" alt="" title="" name="austausch5" ;"austausch6";"austausch7" usemap="#allemaenner_over" />

    das würde besser funktionieren, ist aber auch nicht richtig

    Dein Austauschbild hat nur einen Namen. "austausch5" damit wird das html-Element <img ....> bezeichnet und kann so gefunden werden

    document.images["austausch5"]

    um den Bildinhalt zu ändern schreibt man (ausführliche Schreibweise )
    document.images["austausch5"].src="img/jani_klein.gif";

    in der map wird eine kürzere Schreibweise benutzt

      
<map name="allemaenner_over" >  
<area href="allemaenner_jani.html" onClick="return confirm(this.alt)"  
  onmouseover="austausch5.src='img/janiover_klein.gif';"  
  onmouseout="austausch5.src='img/Band_sw_klein.gif'"  
  alt="Jani: Gitarre" title="Jani: Gitarre"  
  shape="poly"  
coords="65,410,50,394,29,108,53,102,63,53,80,56,86,107,100,119,101,352,114,369,76,366,79,405"  
 >  
  
<area href="man2.html" onClick="return confirm(this.alt)"  
  onmouseover="austausch5.src='img/man2over_klein.gif';"  
  onmouseout="austausch5.src='img/Band_sw_klein.gif'"  
  alt="man2" title="der 2. von links"  
  shape="poly"  
coords="166,334,133,331,121,243,105,258,109,88,136,88,124,115,135,137,147,197,154,318,168,326"  
  >  
</map>  
  
<img src="Band_sw_klein.gif" width="315" height="440" border="0" alt="" title="" name="austausch5" usemap="#allemaenner_over" />

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·  eine Testseite: usemap onmouseover (momentan in Arbeit)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Mehrere Mouseover via Image-Map

      turtleshark
      – Informationen zu den Bewertungsregeln

      Hallo Plan_b,

      also ich weiß gar nicht, wie ich dir danken soll. DAS ist die lösung meines problems. und bei deiner perfekten beschreibung hab ich das jetzt auch verstanden! Es funktioniert wunderbar.

      Ich weiß, dass es nicht die sauberste lösung ist, css wäre wirklich wesentlich besser. ich werde mich auch mit diesem thema befassen - weil es einfach isnn macht. aber fürs erste hast du mich ans zei gebracht.

      HERZLICHEN dank dafür!

      gruß turtleshark

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln