RSS

Posts Tagged ‘Map Area’

TYPO3: Jquery und eine Imagemap (MAP AREA) + TemplaVoila

0 Comments | This entry was posted on Okt 27 2009

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

1
2
3
4
5

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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">
    jQuery(document).ready(function(){
 
		jQuery('area').click(function() { 
			jQuery('div.maptextshow').hide('fast');
			jQuery('div.maptextshow').removeClass("maptextshow");
 
			classname = jQuery(this).attr('class');
			jQuery('div.'+classname).show('slow');
			jQuery('div.'+classname).addClass("maptextshow"); 
 
			return false; 
		});
 
    });
    </script>
)

Typo3: Content Element –> Plain HTML

1
2
3
4
5
6
7
8

<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 :) 

1
2
3

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

Viel Spaß beim ausprobieren :)

, , , , ,
Jquery, Typo3 Snippet, Typo3 Stuff