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.
<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 🙂
Schreibe einen Kommentar