Joomla dynamische Modulpositionen: Unterschied zwischen den Versionen
| Zeile 69: | Zeile 69: | ||
== Module erstellen und bearbeiten == | == Module erstellen und bearbeiten == | ||
| − | Mit "Erweiterungen -> Module -> Neu -> Eigene Inhalte (Leeres Modul)" wird ein neuen Modul erzeugt. | + | Mit "Erweiterungen -> Module -> Neu -> Eigene Inhalte (Leeres Modul)" wird ein neuen Modul erzeugt. |
| − | Für das Modul "imagemap_modul1", das zum Image-Map "imagemap1" gehört werden folgende Einträge gemacht: | + | Für das Modul "imagemap_modul1", das zum Image-Map "imagemap1" gehört werden folgende Einträge gemacht: |
Bei "Titel" und bei "Postition" wird der im Template festgelegte Modulname verwendet, also: imagemap_modul1 | Bei "Titel" und bei "Postition" wird der im Template festgelegte Modulname verwendet, also: imagemap_modul1 | ||
| − | Bei der Benutzerdefinierten Ausgabe muss der Editor in den Quellcode-Modul geschaltet werden.<br/>Dort wird dann folgender Code eingetragen: | + | Bei der Benutzerdefinierten Ausgabe muss der Editor in den Quellcode-Modul geschaltet werden.<br/>Dort wird dann folgender Code eingetragen: |
| Zeile 94: | Zeile 94: | ||
<br/><nowiki> | <br/><nowiki> | ||
</p> | </p> | ||
| − | </nowiki> | + | </nowiki><br /><br /> |
| + | Die Koordinaten für den Eintrag unter <nowiki><area></nowiki>können zum Beispiel mit dem Programm Gimp erstellt werden, indem das verwendete Hintergrundbild als Imagemap editiert wird. | ||
[[Category:Web]] | [[Category:Web]] | ||
Version vom 4. März 2016, 12:04 Uhr
Anpassungen am Template
index.php
Um Modulpostitionen mittels eines ImageMaps einzufügen muss in der index.php des gewählten Templates innerhalb des <body>-Tags hinter den bereits vorhandenen Modulpostitionen folgender Code eingetragen werden:
<map name="imagemap1">
<div id="imagemap_modul1">
<jdoc:include type="modules" name="imagemap_modul1" />
</div>
<div id="imagemap_modul2">
<jdoc:include type="modules" name="imagemap_modul2" />
</div>
</map>
Dabei können beliebig viele Module hintereinander aufgelistet werden, wenn jedes Modul einen eigenen Namen bekommt.
Es ist auch möglich für mehrere Seiten unterschiedliche Image-Maps zu definieren. Dazu werden einfach noch weitere <map>-Tags angefügt, wobei jedes >map>-Tag einen eigenen Namen bekommen muss.
templateDetails.xml
Die Datei templateDetails.xml des verwendeten Templates in einem Texteditor bearbeiten:
Im Bereich <postitions> hinter den bestehenden Postitionen eine Zeile für jedes ImageMap und eine Zeile für jedes Modul einfügen:
<position>imagemap1</position>
<position>imagemap_modul1</position>
<position>imagemap_modul1</position>
template.css
In der Datei template.css (im Template meist innerhalb des Ordners css zu finden), können die Postitionen für Popup-Tooltips zu den einzelnen Modulen festgelegt werden über die Namen, die den
<div>
-Tags bei den jeweiligen Modulen gegeben wurden.
Also z.B. für das Module mit Namen "imagemap_modul1":
#imagemap_modul1 {
position: absolute;
width: 400px;
height: 200px;
left: 900px;
top: 650px;
background-color: white;
z-index: 1;
padding: 10px;
}
Module erstellen und bearbeiten
Mit "Erweiterungen -> Module -> Neu -> Eigene Inhalte (Leeres Modul)" wird ein neuen Modul erzeugt.
Für das Modul "imagemap_modul1", das zum Image-Map "imagemap1" gehört werden folgende Einträge gemacht:
Bei "Titel" und bei "Postition" wird der im Template festgelegte Modulname verwendet, also: imagemap_modul1
Bei der Benutzerdefinierten Ausgabe muss der Editor in den Quellcode-Modul geschaltet werden.
Dort wird dann folgender Code eingetragen:
<p>
<a class="tooltip" href="index.php/pfad_zu_einem_Inhaltsbeitrag_mit_dem_Text_der_im_Popup_angezeigt_werden_soll">
<area coords="742,940,723,890,577,893,598" href="index.php/pfad_zum_Inhaltsbeitrag_der_beim_Anklicken_des_Links_geoeffnet_werden_soll" shape="poly" />
<span class="imagemap1">
Text der auf der Website als Link erscheint
</span>
</a>
</p>
Die Koordinaten für den Eintrag unter <area>können zum Beispiel mit dem Programm Gimp erstellt werden, indem das verwendete Hintergrundbild als Imagemap editiert wird.
