Text in einem Feld bei mouseover austauschen

[bokkers]

Hallo.
Ich gestalte eine interaktive Landkarte und möchte beim mouseover über verschiedene Punkte der Karte Texte in einem vorher definierten (fixen) Feld anzeigen lassen. Bin mir nicht sicher, ob ich das Textfeld besser als div-Box oder Tabellenzelle realisiere. Habe aber irgendwo mal gesehen, dass das über HTML und CSS geht, ohne JavaScript zu bemühen.

Für einen Tipp oder einen Link zu einem Tutorial wäre ich super-dankbar.
Gruß

bokkers

 

[prm]

Vermutlich meinst du Image Maps?
SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

 

[bokkers]

Hallo prm und vielen Dank für die superschnelle Antwort. Ja, zum Auslesen des Mouseovers wollte ich eine Imagemap benutzen. Ich frage mich nur wie ich am geschicktesten den (dynamischen) Text ins Textfeld bekomme.
Hast Du da auch einen Tipp für mich?

Gruß
bokkers

 

[prm]

Wenn's dynamisch sein soll, geht's wohl mit PHP (kann ich nicht).
Ansonsten sieh mal im Beispiel in den Quelltext:

<area shape="rect" coords="11,10,59,29"
href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">

Das rote wäre dann der einzugebende Text.
Den Link kannst du weglassen und durch eine Raute # ersetzen.

 

[bokkers]

Coole Idee, das über alt zu machen. Dann würde ich mangels fester Textbox Platz auf der Karte sparen. Hast Du eine Ahnung, wieviel Zeichen ich maximal in ein alt reinhauen kann?

 

[prm]

Ich wüsste nicht, dass die Zeichen begrenzt sind, bin mir aber nicht sicher.

Da fällt mir aber auch noch was anderes ein, vielleicht kommt das auch in Betracht:

CSS

a
{text-decoration:none;}
a.info{
    position:relative;
    z-index:1; background-color:#ccc;
    width:10em;
    display:block;
    text-align:center;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:2; background-color:#ff0}

a.info span{display: none}

a.info:hover span{
    display:block;
    position:absolute;
    top:0em; left:0em; width:10em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

HTML

<a class=info href="#">Keller <span>
Im Keller steht das Weinfass</span></a>

 

[bokkers]

Auch sehr cool. Aber diese Technik kann ich nicht mit einer Imagemap kombinieren, oder?

 

[prm]

Na ja, du könntest die Links in unterschiedliche Div's packen und diese absolut zu der Karte positionieren.

 

[Junny]

Wieso nicht gleich die Links absolut positionieren?

a.info {
  display: block;
  position: absolute;
  /* ... */
}

Dazu sagen muss man, dass der Text an der Stelle der Karte erscheinen muss, an der sich auch der jeweilige Link befindet.

Wenn Du den Text immer an der gleichen Stelle außerhalb der Karte haben möchtest, musst Du auf Javascript zurückgreifen. Dabei ist darauf zu achten, dass bei abgeschaltetem Javascript die Informationen zugänglich bleiben: Ortsvorwahlenverzeichnis .

<p> <img src="karte-deutschland.gif" width="311" height="476" alt="Deutschland" usemap="#karte-deutschland" />
  <map id="karte-deutschland" name="karte-deutschland">
    <area shape="circle" coords="66,82,25" href="javascript:;" alt="Hamburg" title="Hamburg" id="mausBereich_hamburg" />
    <area shape="circle" coords="251,215,39" href="javascript:;" alt="Berlin" title="Berlin" id="mausBereich_berlin" />
    <area shape="circle" coords="165,398,18" href="javascript:;" alt="M&uuml;nchen" title="M&uuml;nchen" id="mausBereich_muenchen" />
  </map>
</p>
<ul id="ortsvorwahlen">
  <li id="hamburg">
    <dl>
      <dt>Hamburg</dt>
      <dd>040</dd>
    </dl>
  </li>
  <li id="berlin">
    <dl>
      <dt>Berlin</dt>
      <dd>030</dd>
    </dl>
  </li>
  <li id="muenchen">
    <dl>
      <dt>M&uuml;nchen</dt>
      <dd>089</dd>
    </dl>
  </li>
</ul>

function starteDynamik() {
    mausBereiche = document.getElementById("karte-deutschland").getElementsByTagName("area");
    for(i=0; mausBereiche[i]; i++) {
        mausBereiche[i].onmouseover =     function() { 
                                            zeigeVorwahl(this.id.split("_")[1]);
                                        };
        mausBereiche[i].onmouseout = versteckeVorwahlen;
    }
    
}
function versteckeVorwahlen() {
    stadtElement = document.getElementById("ortsvorwahlen").getElementsByTagName("li");
    for(i=0; stadtElement[i]; i++)
        stadtElement[i].style.display = "none";
}
function zeigeVorwahl(stadt) {
    versteckeVorwahlen();
    document.getElementById(stadt).style.display = "block";
}
window.onload = starteDynamik;

Gruß
Junny