find-templates

Links auf Grafik

zurück zur Übersicht

verlinkte Texte auf einem Bild



Eine Möglichkeit, um verlinkte Texte auf einem Bild zu platzieren.
Ein Beispiel: Spieler-Übersicht auf Fußballfeld.
Bei Mauskontakt öffnen sich Info-Fenster. Fahre mit der Maus über einen Text.



Schritt 1: HTML-Code


- auf "Eigene Seiten editieren"
- Seite wählen, wo das Bild hinein soll
- im Editor oben links auf "Quellcode" klicken
- nun folgenden HTML-Code einfügen (Beispiel für 5 Links) :

<ul class="grafik">
<li class="position_1"> <a class="info" href="#">Name 1<span>Info</span> </a> </li>
<li class="position_2"> <a class="info" href="#">Name 2<span>Info</span> </a> </li>
<li class="position_3"> <a class="info" href="#">Name 3<span>Info</span> </a> </li>
<li class="position_4"> <a class="info" href="#">Name 4<span>Info</span> </a> </li>
<li class="position_5"> <a class="info" href="#">Name 5<span>Info</span> </a> </li>
</ul>

Wenn sich kein Tooltip-Fenster, sondern eine Seite öffnen soll:
- entferne aus dem Code class="info"
- entferne aus dem Code <span>Info</span>
- ersetze # Zeichen durch den Link zur Seite




Schritt 2: Der CSS Code


Baukasten-Design "CSS" ? Einfügen im Feld "css ohne style tags"
Alle anderen Designs: Einfügen im Feld "Text über Design", vor dem --></style> 

/* Element mit Hintergrundbild */
ul.grafik {
  width: 370px;
  height: 533px;
  list-style-type: none; 
  padding: 0px; margin: 0px; 
  background-image: url(Grafikadresse); }

/* Linkfarbe auf dem Bild */
ul.grafik li a {
  color: #FFFFFF;
  text-decoration: none;
  position: absolute; }

/* Position Link 1 */
li.position_1 a { margin-top: 30px; margin-left: 160px; }

/* Position Link 2 */
li.position_2 a { margin-top: 100px; margin-left: 100px; }

/* Position Link 3 */
li.position_3 a { margin-top: 100px; margin-left: 220px; }

/* Position Link 4 */
li.position_4 a { margin-top: 130px; margin-left: 70px; }

/* Position Link 5 */
li.position_5 a { margin-top: 130px; margin-left: 250px; }

/* Tooltip Fenster Aussehen */
.info span { 
   position: absolute;
   width: 150px;
   color: #FFFFFF;
   padding: 8px;
   background-color: #202020;
   border: 1px solid #c9c9c9;
   z-index: 90;
   visibility: hidden; }

/* bei Mauskontakt sichtbar */
.info:hover span { visibility: visible; }

Codezeile ul.grafik bekommt die Grafikadresse des Hintergrundbildes.
Dort bekommen width und height auch die Breite und Höhe des Bildes.

verlinkte Texte positionieren

siehe im CSS Code li.position_1 a bis li.position_5 a :

margin-top = Abstand von oben
margin-left = Abstand zum linken Bildrand



Tooltip-Fenster ausrichten


Bei Mauskontakt öffnen sich ein Tooltip-Fenster.Auch dieses kannst du anpassen.
Siehe im CSS Code das .info span

width: = die Breite des Info-Fensters
color: = die Textfarbe im Info-Fenster
margin-top = Abstand über den verlinkten Bereich
margin-left = Abstand neben den verlinkten Bereich
background-color: = Hintergrundfarbe im Info-Fenster
border: = Rahmen um das Info-Fenster


Heute: 26 Besucher