h2. pic-link
pic-link ist ein TC-Kommando, mit dem eine Bildquelle angezeigt werden kann. Dabei werden diese Funktionalitäten angeboten:
* Vorschaubild anzeigen (nutzt die CSS-Klasse tc-pic)
* Mit Klick auf das Bild wird das Originalbild angezeigt
h3. Syntax
bc(tc3-panel tc3-light-grey tc3-round-large). "(pic-link)$":{URL}
Parameter:
* URL
** Die Bildadresse
h3. Beispiel:
bc(tc3-panel tc3-light-grey tc3-round-large). "(pic-link)$":https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/EuclidStatueOxford.jpg/755px-EuclidStatueOxford.jpg
h3. Ergebnis
"(pic-link)pinocchio":https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/EuclidStatueOxford.jpg/755px-EuclidStatueOxford.jpg
h2. Technische Informationen
h3. Selector
bc(tc3-panel tc3-light-grey tc3-round-large). querySelectorAll(".pic-link")
h3. Implementierug in JavaScript
bc(tc3-panel tc3-light-grey tc3-round-large).. //+-----:
//+-----:
//+-----: picLink zeigt zu einer Foto-Adresse ein Vorschaubild an und mit dem Klick auf das Bild das Originalbild
//+-----:
//+-----:
function picLink() {
const linkTemplate = '
';
// elementText is the changed string value of the const linkTemplate;
let elementText = "";
let titleText = "";
let footerText = "";
let innerText = "";
const nodeList = document.querySelectorAll(".pic-link");
let mouseOverLabeSeperator = " - " ;
for (let i = 0; i < nodeList.length; i++) {
innerText = nodeList[i].innerText;
titleText = nodeList[i].getAttribute("title");
hrefText = nodeList[i].getAttribute("href");
elementText = linkTemplate.replaceAll("{{link-target}}", hrefText);
elementText = elementText.replace("{{TitleReplacement}}", titleText);
//elementText = elementText.replace("{{link-label}}", linkTemplate2.replace("{{link-target}}", hrefText));
nodeList[i].outerHTML = elementText;
}
if ( nodeList.length < 1 ) {
//document.getElementById("my-demo").innerHTML = "function picLink(): No Element with class pic-link found!" ;
}
}
*(#edit-link2) auto-replace
p. lorem ipsum right pinned here!
h3. Stories about Success and Boxes