Im Imagemap Bild tauschen UND Text in sep. div zeigen

needful · 21.11.2010, 17:39

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] = 'FDDDDDDFFFFFFFFFDDDDDDDDDDDDDDDDDD';
       mapcomment[2] = 'BFDDDDDFFFFFFFFFFFDDDDDDDDDDDDDFMW';
       mapcomment[3] = 'VolvDFFFFFFFFFFFFFFFFFFFFFFFFFFFFo';
       mapcomment[4] = 'VolDFFFFFFFFFFFFFFFFFFFFFFFFFFFFvo';

   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])" "document.Bild.src='images/team_mt.jpg'" onMouseOut="document.Bild.src='images/team.jpg'"/>
        	</map>
        	<img src="images/team.jpg" name="Bild" border="0" usemap="#Map" id="Bild"/>
        </div>
        
        <div id="RightCol">
        	<img src="images/ta_logo.png" />
            <div id="RightText">
		    <p id="comment"></p>
            </div>
        </div>
    
	</div>
        
</div>



</body>
</html>

An dieser Stelle

Code:

onMouseOver="writeTest(mapcomment[0])" "document.Bild.src='images/team_mt.jpg'"

habe ich jetzt mal beides eingefügt wohl wissend, dass jeweils nur eines funktioniert. Wie bekomme ich sowohl Bild ausgetauscht als auch Text angezeigt?

Herzlichen Dank für jeden Tipp.

Viele Grüße

Jörg

eagle275 · 21.11.2010, 17:55

du musst bei onMouseOver eine separate JS Funktion aufrufen, die dann wiederum beide Aktionen / Funktionen aufruft

needful · 21.11.2010, 23:35

soweit verstanden. Als nicht JSler - ähem - wie mache ich das?

ChrisB · 21.11.2010, 23:58

Als Nicht-JSler beschäftigst du dich am besten wenigstens ein bisschen mit den Grundlagen, wenn du diese Technik anwenden willst.

Es muss übrigens keine Funktion sein, du kannst natürlich auch die Anweisungen mit dem üblichen Befehls-Separator hintereinander im Eventhandler-Attribut unterbringen.

Nur dass der gezeigte Code,

Code:

onMouseOver="writeTest(mapcomment[0])" "document.Bild.src='images/team_mt.jpg'"

Unfug ist, das muss eigentlich klar sein, schon vom HTML-Grundlagenwissen her - kein Element hat ein Attribut, das "document.Bild.src='images/team_mt.jpg'" heißt, also ist es Blödsinn, ein solches zu notieren.

needful · 22.11.2010, 00:39

Zitat:

Zitat von ChrisB

Nur dass der gezeigte Code,

Code:

onMouseOver="writeTest(mapcomment[0])" "document.Bild.src='images/team_mt.jpg'"

Unfug ist, das muss eigentlich klar sein, schon vom HTML-Grundlagenwissen her - kein Element hat ein Attribut, das "document.Bild.src='images/team_mt.jpg'" heißt, also ist es Blödsinn, ein solches zu notieren.

Hab ja schon geschrieben, dass mir klar ist es, dass es so wie es dort steht nicht funktioniert. Aber

Code:

onMouseOver="document.Bild.src='images/team_mt.jpg'"

alleine funktioniert bei mir. So blödsinniger Unfug kann's also nicht sein.

Ich verzichte auch gerne auf JS. Leider komme ich auch nach einigem googeln nicht dahinter was Du mit

Zitat:

du kannst natürlich auch die Anweisungen mit dem üblichen Befehls-Separator hintereinander im Eventhandler-Attribut unterbringen

meinst. Du sprichst immer noch von JS? Gibt es gar eine Lösung ohne JS. Bisher hab ich auch nach längerer Suche dazu nichts gefunden.

ChrisB · 22.11.2010, 00:58

Zitat:

Zitat von needful

So blödsinniger Unfug kann's also nicht sein.

Doch, das zweite ist absolut blödsinniger Unfug.

"document.Bild.src='images/team_mt.jpg'" - das steht einfach so da, als wäre es ein eigenständiges HTML-Attribut. Eines mit diesem Bezeichner gibt es aber nicht.

Zitat:

Leider komme ich auch nach einigem googeln nicht dahinter was Du mit

Zitat:

du kannst natürlich auch die Anweisungen mit dem üblichen Befehls-Separator hintereinander im Eventhandler-Attribut unterbringen

meinst.

Damit meine ich die absolut grundlegendsten Basics von JavaScript ...

Der Befehlstrenner ist, wie in PHP auch, das Semikolon.

needful · 22.11.2010, 08:36

Zitat:

"document.Bild.src='images/team_mt.jpg'" - das steht einfach so da

Nun, so alleine steht es ja nicht da:

Code:

      	<div id="picContainer">
	        <map name="Map" id="Map">
                <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'"/>
        	</map>
        	<img src="images/team.jpg" name="Bild" border="0" usemap="#Map" id="Bild"/>
        </div>

In diesem Kontext funktioniert es.

Naja, danke für die Antworten.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bei Klick auf Bild -> Text in eine Textdatei + Speichern?!	Saiboti	PHP Tipps 2010	1	19.08.2010 11:24
Bild zwischen Hintergrund und Text	TheRahl	Scriptbörse	12	10.02.2010 20:12
Bild statt Text	BenediktK	PHP Tipps 2010	20	27.01.2010 14:07
[Erledigt] Text über Bild in Tabelle	Ryuuzaki93	HTML, Usability und Barrierefreiheit	8	17.12.2009 16:56
Text Ersetzen an anderer Stelle	phpde	Off-Topic Diskussionen	6	03.08.2009 20:12
Text im bild	Ablo	PHP Tipps 2009	4	24.05.2009 20:49
Text in Datenbank umwandeln	muffinsbacken	PHP Tipps 2009	9	07.01.2009 18:40
JavaScript/PHP: qooxdoo 0.7.1 - Teil 1 : Eine Einführung	Zergling-new	Tutorials	6	25.01.2008 10:41
Text um Bild		HTML, Usability und Barrierefreiheit	3	12.12.2005 16:43
[Erledigt] Vertikale Ausrichtung von Text auf Rollover Bild		HTML, Usability und Barrierefreiheit	2	16.11.2005 14:47
[Erledigt] durch Klick auf Text anderen Text einblenden		HTML, Usability und Barrierefreiheit	3	03.07.2005 14:41
Text in Bild schreiben	GSJLink	HTML, Usability und Barrierefreiheit	1	01.07.2005 19:29
Text auf Bild		HTML, Usability und Barrierefreiheit	6	08.02.2005 17:02
[Erledigt] Bild hinter den Text stellen		HTML, Usability und Barrierefreiheit	12	07.01.2005 18:38
mit gd text in ein bild schreiben	Sclot	PHP Tipps 2004-2	4	08.12.2004 18:33


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.11.2010, 17:55
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	du musst bei onMouseOver eine separate JS Funktion aufrufen, die dann wiederum beide Aktionen / Funktionen aufruft __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

21.11.2010, 23:35
needful Neuer Benutzer Registriert seit: 08.04.2010 Beiträge: 13 PHP-Kenntnisse: Anfänger	soweit verstanden. Als nicht JSler - ähem - wie mache ich das?

21.11.2010, 23:58
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Als Nicht-JSler beschäftigst du dich am besten wenigstens ein bisschen mit den Grundlagen, wenn du diese Technik anwenden willst. Es muss übrigens keine Funktion sein, du kannst natürlich auch die Anweisungen mit dem üblichen Befehls-Separator hintereinander im Eventhandler-Attribut unterbringen. Nur dass der gezeigte Code, Code: onMouseOver="writeTest(mapcomment[0])" "document.Bild.src='images/team_mt.jpg'" Unfug ist, das muss eigentlich klar sein, schon vom HTML-Grundlagenwissen her - kein Element hat ein Attribut, das "document.Bild.src='images/team_mt.jpg'" heißt, also ist es Blödsinn, ein solches zu notieren. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?