Sprungmarken mit Text einer Wiki-Page einrichten

Um im beliebigen Text einer Websiteseite eine Sprungmarke als Ziel zu platzieren, gilt es wie folgt vorzugehen.

Schritt 1:

SP - > Einstellungen -> Seite hinzufügen

Schritt 2:

Den Text mit beliebigen Inhalten versehen

Schritt 3:

An gewünschten Positionen Sprungmarken einbauen

Im Bearbeitungsmodus der Seite, werden über das Menüband Einfügen -> Code einbetten so viele Marken gesetzt wie erforderlich.

clip_image001

Diese Stellen bekommen folgenden Code eingefügt

clip_image002

Der Text, wie im vorliegenden Beispiel „MeinLink“ navigiert uns zu der gewünschten Stelle.

Schritt 4:

Die Auslöser für die Links müssen sich noch im Text befinden, um springen zu können.

In meinem Beispiel sind es die quadratischen Kacheln.

clip_image004

Den Code dazu gibt es noch anbei, abschließend nach der Beschreibung.

Der HTML Code wird dabei in ein Skript-Editor Webpart eingefügt, Einfügen -> Webpart -> Medien und Inhalt -> Skript-Editor

In Abhängigkeit davon, über welche Kachel welcher Link als Sprungmarke angezeigt werden soll, müssen diese Links mit den kacheln verknüpft werden.

Entscheidend sind die im nachfolgenden gekennzeichneten Stellen zu den Links

image

Schritt 5:

Seite inkl. Aller Webparts speichern.

HTML Code für die Kacheln

<html>

<head>

<title>Test</title>

<style type="text/css">

#body {

font-family: Arial;

}

.li {

display: inline;

}

.a {

display: inline-block;

width: 160px;

height: 160px;

background-color: gray;

position: relative;

/*background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');*/

background-position: top left;

text-decoration: none;

color: #ffffff;

text-align: center;

}

.a > span {

/*height: 10%;*/

position: absolute;

bottom: 0;

display: block;

width: 100%;

background-color: rgba(64, 64, 64, 0.5);

transition: all ease-in 0.3s;

text-align: center;

height: 2.5em;

ine-height: 2.5em;

}

.a:hover > span {

height: 100%;

}

#a1{

background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');

background-color: red;

}

#a2{

background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');

background-color: blue;

}

#a3{

background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');

background-color: green;

}

#a4{

background-image: url('http://srv1/_layouts/15/images/gettingstarted.png');

background-color: orange;

}

</style>

</head>

<body>

<div>

<ul>

<li class="li"><a href="http://www.google.de"><span id="a1" class="a"><span>Google</span></span></a></li>

<li class="li"><a href="#MeinLink"><span id="a2" class="a"><span>Lorem ipsum dolor</span></span></a></li>

<li class="li"><a href="#MeinLink2"><span id="a3" class="a"><span>Lorem ipsum dolor</span></span></a></li>

<li class="li"><a href="#"><span id="a4" class="a"><span>Lorem ipsum dolor</span></span></a></li>

</ul>

</div>

</body>

</html>

Fertig

Kommentare sind geschlossen