Joomla dynamische Modulpositionen: Unterschied zwischen den Versionen

Aus revampedia
 
(12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 7: Zeile 7:
  
 
<nowiki>
 
<nowiki>
−
<map name="beschreibung_imagemap"></nowiki>
+
<map name="imagemap1"></nowiki>
 
<br/>&nbsp;&nbsp;<nowiki>
 
<br/>&nbsp;&nbsp;<nowiki>
 
   <div id="imagemap_modul1"></nowiki>
 
   <div id="imagemap_modul1"></nowiki>
Zeile 23: Zeile 23:
 
</map>
 
</map>
 
</nowiki>
 
</nowiki>
 +
 +
Dabei können beliebig viele Module hintereinander aufgelistet werden, wenn jedes Modul einen eigenen Namen bekommt.<br/><br/>Es ist auch möglich für mehrere Seiten unterschiedliche Image-Maps zu definieren. Dazu werden einfach noch weitere &lt;map&gt;-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 &lt;postitions&gt; hinter den bestehenden Postitionen eine Zeile für jedes ImageMap und eine Zeile für jedes Modul einfügen:
 +
 +
 +
<nowiki>
 +
<position>imagemap1</position></nowiki>
 +
<br/><nowiki>
 +
<position>imagemap_modul1</position></nowiki>
 +
<br/><nowiki>
 +
<position>imagemap_modul1</position>
 +
</nowiki>
 +
 +
=== 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
 +
<nowiki><div></nowiki>
 +
-Tags bei den jeweiligen Modulen gegeben wurden.<br/><br/>Also z.B. für das Module mit Namen "imagemap_modul1":<br/><nowiki>
 +
/* imagemap_modul1 */</nowiki><br /><nowiki>
 +
a.tooltip > span.imagemap1 {</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  position: absolute;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  width:    400px;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  height:  200px;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  left:    900px;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  top:      650px;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  background-color: white;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  z-index:  1;</nowiki>
 +
<br/>&nbsp;&nbsp;<nowiki>
 +
  padding: 10px;</nowiki>
 +
<br/><nowiki>
 +
}
 +
</nowiki>
 +
 +
== 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.<br/>Dort wird dann folgender Code eingetragen:
 +
 +
 +
<nowiki>
 +
<p></nowiki>
 +
<br/><nowiki>
 +
<a class="tooltip" href="index.php/pfad_zu_einem_Inhaltsbeitrag_mit_dem_Text_der_im_Popup_angezeigt_werden_soll"></nowiki>
 +
<br/><nowiki>
 +
<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" /></nowiki>
 +
<br/><nowiki>
 +
<span class="imagemap1"></nowiki>
 +
<br/><nowiki>
 +
Text der auf der Website im Popup erscheint</nowiki>
 +
<br/><nowiki>
 +
</span></nowiki>
 +
<br/><nowiki>
 +
</a></nowiki>
 +
<br/><nowiki>
 +
</p>
 +
</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]]

Aktuelle Version vom 20. Juli 2016, 12:44 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 */
a.tooltip > span.imagemap1 {
   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 im Popup 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.

Von «https://wiki.revamp-it.ch/index.php?title=Joomla_dynamische_Modulpositionen&oldid=3922»