find-templates

Links auf Grafik 2

zurück zur Übersicht

verlinkte Bereiche auf einem Bild



Wir können auch verlinkte Flächen auf einem Bild platzieren (z.B. Gruppenfoto).
Der sichtbare Rahmen kann natürlich im CSS Code (border) entfernt werden.
Bei Mauskontakt öffnen sich Info-Fenster. Fahre mit der Maus über die Köpfe.





Tipp:
Diese Beschreibung habe ich auf clean-test.de.tl erneuert: neue Beschreibung hier


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

<ul class="grafik">
<li class="position_1"> <a class="tooltip" href="#"> &nbsp; <span>Info</span></a> </li>
<li class="position_2"> <a class="tooltip" href="#"> &nbsp; <span>Info</span></a> </li>
<li class="position_3"> <a class="tooltip" href="#"> &nbsp; <span>Info</span></a> </li>
</ul>




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: 400px;
  height: 237px;
  list-style-type: none; 
  padding: 0px; margin: 0px; 
  background-image: url(Grafikadresse); }

/* Linktext nicht sichtbar */
ul.grafik li a {
  font-size: 0px;
  text-decoration: none;
  position: absolute; }

/* Position Link 1 */
li.position_1 a {
  width: 60px;
  height: 70px;
  display: block;
  margin-top: 30px;
  margin-left: 160px;
  border: 3px solid blue; }

/* Position Link 2 */
li.position_2 a {
  width: 70px;
  height: 70px;
  display: block;
  margin-top: 100px;
  margin-left: 100px;
  border: 3px solid red; }

/* Position Link 3 */
li.position_3 a {
  width: 80px;
  height: 70px;
  display: block;
  margin-top: 100px;
  margin-left: 220px;
  border: 3px solid green; }

/* --- für das Tooltip-Fenster --- */
.tooltip span { 
   position: absolute;
   width: 150px;
   color: #FFFFFF;
   padding: 8px;
   margin-top: -30px;
   margin-left: 50px;
   background-color: #202020;
   border: 1px solid #c9c9c9;
   z-index: 90;
   visibility: hidden; }

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

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

Verlinkte Bereiche positionieren, siehe li.position_1 a bis li.position_3 a

width = Breite der verlinkten Fläsche
height = Höhe der verlinkten Fläche
margin-top = Abstand von oben
margin-left = Abstand zum linken Bildrand
border = Rahmen um verlinkte Fläche


Tooltip-Fenster ausrichten


Bei Mauskontakt öffnen sich ein Tooltip-Fenster.Auch dieses kannst du anpassen.
Siehe im CSS Code das .tooltip 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: 31 Besucher