Add Button Link in Titel Attribut - HTML

Question

Ich benutze ein Wordpress Lightbox-Plugin, und das "Titel" -Attribut gibt die Beschreibung im Leuchtkasten. Dies ist, wie ein Beispiel für das Plugin Ich bin mit Aussehen wie:

<a href="link.to.video" class="wplightbox" title="The description video">Video</a> 

Ist es möglich, eine Schaltfläche als Link in dem title Attribute innerhalb des obigen Code enthält? Ist das in HTML möglich?

Answer 1

Es ist nicht möglich, etwas anderes als Text in dem Titel Attribut zu setzen:

Die Titel Attribut Hinweisinformationen für das Element darstellt, wie zum Beispiel für einen Tooltip angemessen wäre. Bei einem Link könnte dies der Titel oder eine Beschreibung der Zielressource sein; auf einem Bild könnte es das Bildguthaben oder eine Beschreibung des Bildes sein; in einem Absatz könnte es sich um eine Fußnote oder einen Kommentar zum Text handeln; auf ein Zitat könnte es weitere Informationen über die Quelle geben; und so weiter. Der Wert ist Text.

Quelle: https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-title-attribute

Sie müssen sich in den Optionen Ihres WP Plugin suchen, einen Weg zu finden, zu tun, was Sie benötigen, oder, wenn das Plugin keine solche Option bietet, ändern Sie es anderen mit, das tut.

SPÄTER BEARBEITEN: Nach einer schnellen Suche scheint, dass kein Leuchtkasten für WP die Möglichkeit bietet, etwas HTML-Code als Beschreibung anzuzeigen.

Wenn das der Fall ist, dann wird ein benutzerdefinierter Code benötigt. Ich würde dieses Verfahren verwenden:

• Verwendung der Link als Titel, zB: http://example.com/page

• auf Leuchtkasten Display (dies sollte ein Ereignis in der js-Plugin sein), wandeln jeden Titel, der mit http beginnt : // auf eine Schaltfläche js/jQuery

Hier ist der Code für die Verwendung von jQuery:

/** 
 
* This code should be run after the lightbox is displayed 
 
*/ 
 

 
//get the titles from the lightbox/lightboxes - use the appropriate selector 
 
var titleTag = $('.title'); 
 

 
//go over all the titles selected and replace the URLs with <a> tags 
 
titleTag.each(function(){ 
 
    url = findRegex($(this).text()); 
 
    if (url !== false) { 
 
    $(this).html('<a href="' + url + '" class="button">Button</a>'); 
 
    } 
 
}); 
 

 
//function to find an URL in a string 
 
//returns false if no URL in the string 
 
function findRegex(str) { 
 
    var regex = /^(https?:\/\/)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*\/?$/g; 
 
    let m; 
 
    var found = false; 
 
    while ((m = regex.exec(str)) !== null) { 
 
     // This is necessary to avoid infinite loops with zero-width matches 
 
     if (m.index === regex.lastIndex) { 
 
      regex.lastIndex++; 
 
     } 
 

 
     found = m[0]; 
 
    } 
 
    
 
    return found; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="title">http://example.com/page</div> 
 

 
<div class="title">Normal title</div>