Wer schon immer mal eine Grafik mit Dynamischen Inhalten aus Typo3 haben wollte,
kann dies leicht mit Typo3 & TemplaVoila machen und ein bisschen Jquery (Danke Bernhard).
Zuerst muss man im TemplaVoila ein HTML-Template anlegen.
Das muss wie im Bild angelegt werden.
templavoila

<div id="maptext">
<div class="classattribute">Text</div>
</div>

Feld1: CO = CONTENT OBJECT (id=“maptext“)
Feld2: AT = ATTRIBUTE (class=“classattribute“)
+ Mapping Type: Attribute
+ Title: CSS Attribut
+ Editing Type: Plain Input Field

Feld3: EL = ELEMENT (class=“classattribute“)

>> Speichern unter >> CONTENT ELEMENT!!!

Dieses Element kann man nun im Typo3 als Flexibles Content Elment einfügen 😉
+ Beim Einfügen, daran denken CSS Attribute „maptext maptext1“, 2te Box: „maptext maptext2“ usw. einzugeben

Typo3Script zum einbinden des Jquery
jQuery ist statt $ verwendet worden, damit alles immer 100% läuft.

page.headerData.95 = TEXT
page.headerData.95 = TEXT
page.headerData.95.value (
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript"><br />
    jQuery(document).ready(function(){</p>
<p>		jQuery('area').click(function() {<br />
			jQuery('div.maptextshow').hide('fast');<br />
			jQuery('div.maptextshow').removeClass("maptextshow");</p>
<p>			classname = jQuery(this).attr('class');<br />
			jQuery('div.'+classname).show('slow');<br />
			jQuery('div.'+classname).addClass("maptextshow"); </p>
<p>			return false;<br />
		});</p>
<p>    });<br />
    </script>
)

Typo3: Content Element –> Plain HTML

<div id="karte">
<img src="karte.jpg" usemap="#map">

<map name="map" id="map">
<area shape="circle" coords="235,141,7" href="#" class="maptext1">
<area shape="circle" coords="265,122,6" href="#" class="maptext2">
<area shape="circle" coords="287,97,6" href="#" class="maptext3">
</map></div>

So noch ein bisschen CSS, dann ist es schon fertig 🙂

.maptext {display:none;}
.maptext1 {}
.maptext2 {}

Viel Spaß beim ausprobieren 🙂