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>

FB Messenger:

Anklicken und im Messenger schreiben

weitere Tutorials :

Boxen

mehr

Verlinkung im Bild

Verlinkte Bereiche auf Grafik

Schritt 1: Der HTML-Code

Der CSS-Code

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2

Verlinkung im Bild

Verlinkte Bereiche auf Grafik

Schritt 1: Der HTML-Code

Der CSS-Code

Forum Login

Info zum Login

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2