Design Clean
    >> Tipps zum anpassen

Verlinkung im Bild

Verlinkte Bereiche auf Grafik

hier möchte ich zeigen, wie sich z.B. Personen auf einem Foto verlinken lassen.
Siehe Foto von mir. Fahre mit der Maus über die Rahmen.



Schritt 1: Der HTML-Code

- gehe auf "Seiten"
- wähle gewünschte Seite aus
- oben im Editor (Werkzeugleiste) auf "Quellcode"
- diesen HTML-Code an gewünschter Stelle einfügen
<ul class="grafik">

<li class="position_1"> 
<a class="rahmen" href="#">  <span class="text"> Hier Inhalt Info-Fenster </span> </a> 
</li>

<li class="position_2"> 
<a class="rahmen" href="#">  <span class="text"> Hier Inhalt Info-Fenster </span> </a> 
</li>

<li class="position_3"> 
<a class="rahmen" href="#">  <span class="text"> Hier Inhalt Info-Fenster </span> </a> 
</li>

</ul>

Dieses Beispiel ist für 3 verlinkte Bereiche.
Der HTML-Code kann beliebig erweitert werden


Der CSS-Code

Einfügen im Feld "Text über Design"
oder im Feld "Eigener <head> - Inhalt" (bei Extras zu finden)
 <style type="text/css">
<!--

/* Eigenschaften für das Bild */
.grafik {
  list-style-type:none;
   width: 500px;
   height: 333px;
  padding: 0px; margin: 10px; 
  background-image: url( GRAFIKADRESSE); 
  border: 10px solid #fff;
  box-shadow: 5px 5px 15px #444;
  position: relative; }

 /* Eigenschaft für alle 3 Rahmen */
.grafik  a {
   position:absolute;
   display: block;
   width: 70px;
    height: 70px;
   text-decoration: none; }

 /* Position Link 1 */
.position_1 a {
   top: 10px;
   margin-left: 180px;
   border: 1px solid #ddd; }

 /* Position Link 2 */
.position_2 a {
   margin-top: 25px;
   margin-left: 70px;
   border: 1px solid #eee; }

 /* Position Link 3 */
.position_3 a {
   margin-top: 100px;
   margin-left: 290px;
   border: 2px solid green; }

 /* für das Tooltip-Fenster mit Infotext */
span.text { 
   position:absolute;
    width: 170px;
   color: #fff!important;
   padding: 8px;
   margin-top: 100px;
   margin-left: 0px;
    background-color: #000000;
   border: 1px solid #c9c9c9;
   z-index: 90;
   visibility: hidden;
   overflow:hidden; }

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

-->
</style>






Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :23 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben