---
title: "ImageMaps mit Tooltips"
url: "https://www.typo3.net/d/53069-imagemaps-mit-tooltips"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2006-11-09"
last_reply: "2006-11-09"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# ImageMaps mit Tooltips

Allgemein · 0 Antworten · gestartet 2006-11-09

## Eröffnungsbeitrag

**AlexVo** · 2006-11-09 · [Beitrag #1](https://www.typo3.net/d/53069-imagemaps-mit-tooltips/1)

Hallo zusammen,
ich versuche gerade eine HTML - Seite, die Imagemaps und Tooltips in javaskript enthält mithilfe von TYPO3 barrierefrei zu gestalten.
Sie soll, so viel habe ich aus dem HTML - Code herausgefunden tooltips und imagemaps enthalten.
Der ursprüngliche Quelltext:
<html>
<head>
<title>Orte zum Leben</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
hr {
	height: 1px;
	border: 1px solid #000000;
}
.nav {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	line-height: 20px;
	font-weight: bold;
	letter-spacing: 1px;
}
a {
	text-decoration: none;
}
a:visited {
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: #000000;
}
-->
</style>
<script language="javascript">
<!--
//Begin dHTML Toolltip Timer
var tipTimer;
//End dHTML Toolltip Timer

function locateObject(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[​i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[​i].document); return x;
}

function hideTooltip(object)
{
if (document.all)
{
	locateObject(object).style.visibility="hidden"
	locateObject(object).style.left = 1;
	locateObject(object).style.top = 1;
return false
}
else if (document.layers)
{
	locateObject(object).visibility="hide"
	locateObject(object).left = 1;
	locateObject(object).top = 1;
	return false
}
else
	return true
}

function showTooltip(object,e, tipContent, backcolor, bordercolor, textcolor, displaytime)
{
	window.clearTimeout(tipTimer)

	if (document.all)
		{
			locateObject(object).style.top=document.body.scrollTop+event.clientY+20

			locateObject(object).innerHTML='<table style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; border: '+bordercolor+'; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: '+backcolor+'" width="10" border="0" cellspacing="1" cellpadding="1"><tr><td nowrap><font style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table> '

if ((e.x + locateObject(object).clientWidth) > (document.body.clientWidth + document.body.scrollLeft))
				{
					locateObject(object).style.left = (document.body.clientWidth + document.body.scrollLeft) - locateObject(object).clientWidth-10;
				}
			else
			{
			locateObject(object).style.left=document.body.scrollLeft+event.clientX
			}
		locateObject(object).style.visibility="visible"
		tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
		return true;
		}
	else if (document.layers)
		{
		locateObject(object).document.write('<table width="10" border="0" cellspacing="1" cellpadding="1"><tr bgcolor="'+bordercolor+'"><td><table width="10" border="0" cellspacing="0" cellpadding="2"><tr bgcolor="'+backcolor+'"><td nowrap><font style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table></td></tr></table>')
		locateObject(object).document.close()
		locateObject(object).top=e.y+20

if ((e.x + locateObject(object).clip.width) > (window.pageXOffset + window.innerWidth))
			{
				locateObject(object).left = window.innerWidth - locateObject(object).clip.width-10;
			}
		else
			{
			locateObject(object).left=e.x;
			}
		locateObject(object).visibility="show"
		tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
		return true;
	}
	else
	{
		return true;
	}
}

function showTooltip2(object,e, tipContent, backcolor, bordercolor, textcolor, displaytime)
{
	window.clearTimeout(tipTimer)

	if (document.all)
		{
			locateObject(object).style.top=document.body.scrollTop+event.clientY-200

			locateObject(object).innerHTML='<table style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; border: '+bordercolor+'; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: '+backcolor+'" width="10" border="0" cellspacing="1" cellpadding="1"><tr><td nowrap><font style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table> '

if ((e.x + locateObject(object).clientWidth) > (document.body.clientWidth + document.body.scrollLeft))
				{
					locateObject(object).style.left = (document.body.clientWidth + document.body.scrollLeft) - locateObject(object).clientWidth-10;
				}
			else
			{
			locateObject(object).style.left=document.body.scrollLeft+event.clientX-220
			}
		locateObject(object).style.visibility="visible"
		tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
		return true;
		}
	else if (document.layers)
		{
		locateObject(object).document.write('<table width="10" border="0" cellspacing="1" cellpadding="1"><tr bgcolor="'+bordercolor+'"><td><table width="10" border="0" cellspacing="0" cellpadding="2"><tr bgcolor="'+backcolor+'"><td nowrap><font style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'</font></td></tr></table></td></tr></table>')
		locateObject(object).document.close()
		locateObject(object).top=e.y-200

if ((e.x + locateObject(object).clip.width) > (window.pageXOffset + window.innerWidth))
			{
				locateObject(object).left = window.innerWidth - locateObject(object).clip.width-10;
			}
		else
			{
			locateObject(object).left=e.x;
			}
		locateObject(object).visibility="show"
		tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime);
		return true;
	}
	else
	{
		return true;
	}
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[​i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[​i];}}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('img/diakoniewerk.gif','img/heeren_loo.gif','img/herzogsaegmuehle.gif','img/hohenroth.gif','img/muenzinghof.gif','img/neuerkerode.jpg','img/palme.gif','img/sonnenhof.gif','img/verband_anthro.gif','img/zkj.gif','img/Zonnelied.jpg','img/pandy.gif')">
<div id="dHTMLToolTip" style="position: absolute; visibility: hidden; width:10; height: 10; z-index: 1000; left: 0; top: 0"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td align="center"><table border="0" cellpadding="0" cellspacing="0" width="673">
				<tr>
					<td rowspan="2"><a href="index.htm"><img name="n1" src="img/1.gif" width="226" height="129" border="0"></a></td>
					<td><img name="n2" src="img/2.gif" width="447" height="103" border="0"></td>
				</tr>
				<tr>
					<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td align="center" valign="top" nowrap background="img/bg.gif"><a href="wir.htm" class="nav">Wir &uuml;ber
									uns</a></td>
								<td width="13"><img src="img/teiler.gif" width="13" height="26"></td>

                <td align="center" valign="top" nowrap background="img/bg.gif"><a href="info.htm" class="nav">Weitere
                  Informationen</a></td>
				  <td width="13"><img src="img/teiler.gif" width="13" height="26"></td>

                				<td align="center" valign="top" nowrap background="img/bg.gif"><a href="info.htm#kontakt" class="nav">Kontakt</a></td>
								<td width="18" align="right"><img src="img/ende.gif" width="18" height="26"></td>

							</tr>
						</table></td>
				</tr>
				<tr valign="top">
					<td height="26" colspan="2" background="img/laender.gif"><table width="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="11"><img src="img/spacer.gif" width="11" height="26"></td>
								<td width="8" background="img/bg.gif"><img src="img/bg.gif" width="8" height="26"></td>
								<td width="195" align="center" valign="top" background="img/bg.gif"><a href="index.htm" class="nav">deutsch</a></td>
								<td width="13"><img src="img/teiler.gif" width="13" height="26"></td>
								<td align="center" valign="top" background="img/bg.gif"><a href="english.htm" class="nav">english</a></td>
								<td width="13"><img src="img/teiler.gif" width="13" height="26"></td>
								<td align="center" valign="top" background="img/bg.gif"><a href="francais.htm" class="nav">fran&ccedil;ais</a></td>
								<td width="13"><img src="img/teiler.gif" width="13" height="26"></td>
								<td align="center" valign="top" background="img/bg.gif"><a href="nederlands.htm" class="nav">nederlands</a></td>
								<td width="18" align="right"><img src="img/ende.gif" width="18" height="26"></td>
							</tr>
						</table></td>
				</tr>
				<tr>

          			<td colspan="2"><img name="karte" src="img/karte.gif" width="673" height="421" border="0" usemap="#Map" href="http://www.fondation-sonnenhof.org"></td>
				</tr>
			</table>

		</td>
	</tr>
</table>
<map name="Map">

  <area shape="rect" coords="216,94,233,121" href="<http://www.zonneliedvzw.be>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/Zonnelied.jpg%22%3E%0D%0A%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EZonnelied%3C/b%3E%3Cbr%3E%0D%0AKloosterstraat%3Cbr%3E%0D%0AB-1761%20Roosdaal%20%3Cbr%3E%0D%0Awww.zonneliedvzw.be', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
    <area shape="rect" coords="246,59,262,87" href="<http://www.sheerenloo.nl/>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%3Cimg%20src=%22img/heeren_loo.gif%22%3E%3C/center%3E%3Chr%3E%0D%0AStiftung%20%3Cb%3E%60sHeeren%20Loo%3C/b%3E%3Cbr%3E%0D%0APostbus%20647%2c%20NL-3800%20AP%20Amersfoort%3Cbr%3E%0D%0Awww.sheerenloo.nl', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
    <area shape="rect" coords="333,55,351,84" href="<http://www.neuerkerode.de/>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%3Cimg%20src=%22img/neuerkerode.jpg%22%3E%3C/center%3E%3Chr%3E%0D%0AEvangelische%20Stiftung%3Cbr%3E%3Cb%3ENeuerkerode%3C/b%3E%3Cbr%3E%0D%0AD-38173%20Sickte%20%3Cbr%3E%0D%0Awww.neuerkerode.de', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="301,133,319,162" href="<http://www.verband-anthro.de>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%3Cimg%20src=%22img/verband_anthro.gif%22%3E%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EVerband%20f%FCr%20Anthroposophische%3Cbr%3E%0D%0AHeilp%E4dagogik%2c%20Sozialtherapie%20und%20%3Cbr%3E%0D%0Asoziale%20Arbeit%20e.V.%3C/b%3E%3Cbr%3E%0D%0ASchlo%DFstra%DFe%209%3Cbr%3E%0D%0AD-61209%20Echzell-Bingenheim%20%3Cbr%3E%0D%0Awww.verband-anthro.de', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="345,191,360,219" href="<http://www.herzogsaegmuehle.de>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/herzogsaegmuehle.gif%22%3E%0D%0A%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EHerzogs%E4gm%FChle%3C/b%3E%3Cbr%3E%0D%0AOrt%20zum%20Leben%3Cbr%3E%0D%0A86971%20Peiting-Herzogs%E4gm%FChle%3Cbr%3E%0D%0Awww.herzogsaegmuehle.de', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="479,232,498,260" href="#" onMouseMove="showTooltip2('dHTMLToolTip',event, '%3Ccenter%3E%3Cimg%20src=%22img/pandy.gif%22%3E%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EPándy%20Kálmán%20Otthona%3C/b%3E,<br>Mohács,%20Újváros%2010.<br>H-7700%20Mohàc,%20Ungarn<br>Tel./Fax:%200036%2069%20322345<br>pandyk@mail.dravanet.hu', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="391,183,407,211" href="<http://www.diakoniewerk.at/>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/diakoniewerk.gif%22%3E%0D%0A%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EEvang.%20Diakoniewerk%20Gallneukirchen%3C/b%3E%3Cbr%3E%0D%0APostfach%2017%2c%20A-4210%20Gallneukirchen%3Cbr%3E%0D%0Awww.diakoniewerk.at', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="323,161,341,190" href="<http://www.sos-kinderdorf.de/dg-hohenroth/>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/hohenroth.gif%22%3E%0D%0A%3C/center%3E%3Chr%3E%0D%0A%3Cb%3ESOS%20Dorfgemeinschaft%20Hohenroth%3C/b%3E%3Cbr%3E%0D%0A97737%20Gem%FCnden%2c%20Deutschland%3Cbr%3E%0D%0Awww.sos-kinderdorf.de/dg-hohenroth', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="289,196,302,223" href="<http://www.zkj.ch>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/zkj.gif%22%3E%0D%0A%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EStiftung%20Z&uuml;rcher%20Kinder-%20und%20Jugendheime%3C/b%3E%3Cbr%3E8004%20Z&uuml;rich%2c%20Schweiz%20%3Cbr%3E%0D%0Awww.zkj.ch', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="267,170,285,198" href="<http://www.fondation-sonnenhof.org>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/sonnenhof.gif%22%3E%0D%0A%3C/center%3E%3Chr%3E%0D%0A%3Cb%3EFondation%20Protestante%20Sonnenhof%3C/b%3E%3Cbr%3E%0D%0A67242%20Bischwillier/Cedex%2c%20Frankreich%3Cbr%3E%0D%0Awww.fondation-sonnenhof.org', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="302,196,315,223" href="<http://www.palme.ch>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/palme.gif%22%3E%0D%0A%3C/center%3E%3Chr%3E%3Cb%3EStiftung%20Zur%20Palme%3C/b%3E%3Cbr%3E8330%20Pf&auml;ffikon/ZH,%20Schweiz%3Cbr%3Ewww.palme.ch', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
	<area shape="rect" coords="355,150,373,177" href="<http://www.muenzinghof.de/>" target="_blank" onMouseMove="showTooltip('dHTMLToolTip',event, '%3Ccenter%3E%0D%0A%3Cimg%20src=%22img/muenzinghof.gif%22%3E%0D%0A%3C/center%3E%0D%0A%3Chr%3E%0D%0A%3Cb%3EDie%20Lebensgemeinschaft%20M%FCnzinghof%20e.V%3C/b%3E%20%3Cbr%3E%0D%0AD-91235%20Velden%2c%20Deutschland%3Cbr%3E%0D%0Awww.muenzinghof.de', '#FFFFFF','#000000','#000000','1000000')" onMouseOut="hideTooltip('dHTMLToolTip')">
</map>
</body>
</html>

Der Quelltext, so wie ich ihn umgebaut habe:
<html>

<head>
<title>Orte zum Leben</title>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table border="0" cellpadding="0" cellspacing="0" width="673">
<tr>
<td rowspan="2"><a href="index.htm"><img name="n1" src="fileadmin/bilder/1.gif" width="226" height="129" border="0"></a></td>
<td><img name="n2" src="fileadmin/bilder/2.gif" width="447" height="103" border="0"></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" nowrap background="fileadmin/bilder/bg.gif"><a href="wir.htm" class="nav">Wir &uuml;ber uns</a></td>
<td width="13"><img src="fileadmin/bilder/teiler.gif" width="13" height="26"></td>
<td align="center" valign="top" nowrap background="fileadmin/bilder/bg.gif"><a href="info.htm" class="nav">Weitere Informationen</a></td>
<td width="13"><img src="fileadmin/bilder/teiler.gif" width="13" height="26"></td>
<td align="center" valign="top" nowrap background="fileadmin/bilder/bg.gif"><a href="info.htm#kontakt" class="nav">Kontakt</a></td>
<td width="18" align="right"><img src="fileadmin/bilder/ende.gif" width="18" height="26"></td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td height="26" colspan="2" background="fileadmin/bilder/laender.gif"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11"><img src="fileadmin/bilder/spacer.gif" width="11" height="26"></td>
<td width="8" background="fileadmin/bilder/bg.gif"><img src="fileadmin/bilder/bg.gif" width="8" height="26"></td>
<td width="195" align="center" valign="top" background="fileadmin/bilder/bg.gif"><a href="index.htm" class="nav">deutsch</a></td>
<td width="13"><img src="fileadmin/bilder/teiler.gif" width="13" height="26"></td>
<td align="center" valign="top" background="fileadmin/bilder/bg.gif"><a href="english.htm" class="nav">english</a></td>
<td width="13"><img src="fileadmin/bilder/teiler.gif" width="13" height="26"></td>
<td align="center" valign="top" background="fileadmin/bilder/bg.gif"><a href="francais.htm" class="nav">fran&ccedil;ais</a></td>
<td width="13"><img src="fileadmin/bilder/teiler.gif" width="13" height="26"></td>
<td align="center" valign="top" background="fileadmin/bilder/bg.gif"><a href="nederlands.htm" class="nav">nederlands</a></td>
<td width="18" align="right"><img src="fileadmin/bilder/ende.gif" width="18" height="26"></td>
</tr>
</table></td>
</tr>
<tr>
<td class="bgcontent" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr
<td><table width="100%" border="0" cellspacing="0" cellpadding="8">
<tr>
<td class="nav"></td>
</tr>
###KARTE###
###NAVIGATION###
<tr>
<td>
</td>
</tr>

</body>
</html>

Die TYPO3 - Extension dazu:

# AV 2006-11-09
# Dieses Template soll mithilfe von imagemaps (hier mit in TYPO-Script
# progarmmiert) den alt-Tag anzeigen)
#

# Haupttemplate
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
	template = FILE
	template.file = fileadmin/info2.html
}
page = PAGE

page.typoeNum = 0

page.10 < temp.mainTemplate
page.stylesheet = fileadmin/css/orte_zum_leben.css

page.10.marks.NAVIGATION= HMENU
page.10.marks.NAVIGATION.entryLevel = 0

page.10.marks.KARTE = IMAGE
page.10.marks.KARTE.file = fileadmin/bilder/karte.gif

page.10.marks.NAVIGATION= IMGMENU
page.10.marks.NAVIGATION.{
	main.XY=673,421
	main.10.reduceColors =16
	main.10.marks.KARTE = IMAGE
 	main.10.marks.KARTE.file = fileadmin/bilder/karte.gif
	dWorkArea = 0,0
	NO.distrib textX+10, 0
  	NO.10.TEXT
  	NO.10 {
		10.text.field = title
		10.fontSize=11
		10.fontColor = #000000
		10.niceText = 1
		10.explode = 5,10
  		20 <.10
  		20.offset = 224,106
		20 = HTML
		20.value= <a href ="http://www.zonneliedvzw.be"></a>
		20 = TEXT
		20.value=Zonnelied
		30 <.10
		30.offset = 254,73
		30 = HTML
		30.value= <a href="<http://www.sheerenloo.nl/%22%3E%3C/a>>
		30 = TEXT
		30.value=s' Heeren Loo
		40 <.10
		40.offset = 342,69
		40 = HTML
		40.value=  <a href="<http://www.neuerkerode.de/%22%3E%3C/a>>
		40 = TEXT
		40.value=Neuerkerode
  	  	50 <.10
  	  	50.offset = 310,147
  	  	50 = HTML
		50.value=  <a href="http://www.verband-anthro.de"></a>
		50 = TEXT
		50.value=	Verband für anthropsofische Heilpädagogik Echzell - Bingenheim
		60 <.10
		60 offset = 352,204
		60 = HTML
		60.value=  <a href="http://www.herzogsaegmuehle.de"></a>
		60 = TEXT
		60.value=Herzogsaegmuehle
		70 <.10
		70 offset = 489,246
		70 = HTML
		70.value=  <a href="#"></a>
		70 = TEXT
		70.value=Pándy Kálmán Otthona
		80 <.10
		80 offset = 399,197
		80 = HTML
		80.value=  <a href="<http://www.diakoniewerk.at/%22%3E%3C/a>>
		80 = TEXT
		80.value=Diakoniewerk Gallneukirchen
		90 <.10
		90 offset = 332,175
		90 = HTML
		90.value=  <a href="<http://www.sos-kinderdorf.de/dg-hohenroth/%22%3E%3C/a>>
		90 = TEXT
		90.value=SOS Kinderdorf Hohenroth
		100 <.10
		100 offset = 296,209
		100 = HTML
		100.value=  <a href="http://www.zkj.ch"></a>
     	 	100 = TEXT
     	 	100 value=Stiftung Zürcher Kinder- und Jugendheime
		110 <.10
		110 offset = 276,184
		110 = HTML
     	 	110.value=  <a href="http://www.fondation-sonnenhof.org"></a>
		110 = TEXT
		110 value=Fondation Protestante Sonnenhof
		120 <.10
		120 offset = 309,210
		120 = HTML
		120.value=  <a href="http://www.palme.ch"></a>
     		120 = TEXT
     		120 value=Palme
		130 <.10
		130 offset = 364,164
		130 = HTML
		130.value=  <a href="<http://www.muenzinghof.de/%22%3E%3C/a>>
		130 = TEXT
		130 value=Münzinghof
	 }

}

Zunächst einmal würde es mir reichen, wenn wenigstens ein Text angezeigt werden würde, ähnlich dem alt-Tag in HTML.
Das Bild dazu müsste man mit Gifbuilder dann irgendwie einfügen.
Ich weiss, dass das alles nicht ganz einfach ist und ich programmiere erst seit eineinhalb Wochen mit TYPOSCRIPT.
Hier noch einmal der Link zur Seite, die barrierefrei werden soll.
<http://www.herzogsaegmuehle.equali.de/eigene_domain/orte_zum_leben/index.htm>

---

Quelle: „ImageMaps mit Tooltips“, typo3.net, https://www.typo3.net/d/53069-imagemaps-mit-tooltips
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
