Im Imagemap Bild tauschen UND Text in sep. div zeigen

needful · 22 November 2010

Hallo zusammen,

ich möchte in einem ImageMap ein Bild tauschen und gleichzeitig in einem separaten div einen Text zeigen.

Das Bild tauschen geht ODER den Text anzuzeigen geht. Aber beides gleichzeitig bekomme ich nicht hin.

Hier mal der HTML Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Architekten</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
    <link rel="stylesheet" href="css/layout_ie7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 6]>
    <link rel="stylesheet" href="css/layout_ie6.css" type="text/css" media="screen" />
<![endif]-->
</head>
<script type="text/javascript">
    
   var mapcomment = new Array(5);
       mapcomment[0] = '<strong>Name</strong><br />        1958 GEBOREN IN K&Ouml;LN<br />1982 SCI ARC<br />1984 DIPLOM<br />1990 B&Uuml;ROGR&Uuml;NDUNG<br />2001 LEHRAUFTRAG FH K&Ouml;LN<br />2004 SIGEKO';
       mapcomment[1] = 'Name 2';
       mapcomment[2] = 'Name 3';
       mapcomment[3] = 'Name 4';
       mapcomment[4] = 'Name 5';

   function writeTest(mapcomment)
     {
     document.getElementById("comment").innerHTML=mapcomment;
     }    

</script>    
<body>

<div id="container">

    <div id="content">

        <div id="headline">
            <h1>ARCHITEKTEN</h1>
        </div>
    
        <div id="navi">
            <ul>
                <li><a href="index.html">START</a></li>
                <li class="activelink"><a href="buero.html"><span>B&Uuml;RO</span></a></li>
                <li><a href="projekte.html">PROJEKTE</a></li>
                <li><a href="leistungen.html">LEISTUNGEN</a></li>
                <li><a href="kontakt.html">KONTAKT</a></li>
                <li><a href="impressum.html">IMPRESSUM</a></li>
            </ul>
        </div>
   
        
          <div id="picContainer">
            <map name="Map" id="Map">
                <area shape="rect" coords="149,4,290,143" href="#" alt="Name" onMouseOver="writeTest(mapcomment[0])">
            </map>
            <img src="http://www.html.de/images/team.jpg" name="Bild" border="0" usemap="#Map" id="Bild"/>
        </div>
        
        <div id="RightCol">
            <img src="http://www.html.de/images/ta_logo.png" />
            <div id="RightText">
            <p id="comment"></p>
            </div>
        </div>
    
    </div>
        
</div>



</body>
</html>

Die entscheidende Stelle ist:

Code:

<area shape="rect" coords="149,4,290,143" href="#" alt="Name" onMouseOver="writeTest(mapcomment[0])">

Im Moment wird damit der Text für das separate div generiert. Ich möchte jedoch zusätzlich (gleichzeitig) erreichen, dass das Bild ausgetauscht wird. Den Bildtausch alleine mache ich wie folgt:

Code:

<area shape="rect" coords="149,4,290,143" href="#" alt="Name" onMouseOver="document.Bild.src='images/team_mt.jpg'" onMouseOut="document.Bild.src='images/team.jpg'"/>

Wie bekomme ich aber nun beides gleichzeitig hin? Mit HTML only scheint das nicht möglich zu sein. Mit JS habe ich mich bisher nicht wirklich beschäftigt, ich glaube aber hier liegt die Lösung. Kann mir jemand helfen? Vielen Dank schon jetzt.

Jörg

Hab's gefunden, hat sich erledigt.

Im Imagemap Bild tauschen UND Text in sep. div zeigen

needful

Neues Mitglied

Neueste Beiträge