Разве нельзя использовать объекты HTML в атрибуте заголовка?

Скриншот выше сделан из Firefox. Курсор нависает над желтым пятном в левой части изображения. Это элемент <img> (на самом деле это изображение вместе с картой изображения, содержащей один круговой элемент <area>, но я полагаю, что это различие не имеет значения), который был создан и оформлен в JavaScript, включая применение атрибута title (созданный вырезание и склеивание ниток). Как я могу заставить это вести себя и показывать предполагаемый символ, тире, вместо &ndash;? Он работает для innerHTML (текст «Barrow-In-Furness» в левом верхнем углу — это элемент div, который также был создан с использованием JavaScript и его набора innerHTML.)

Изменить: в ответ на вопрос Доменика: вот функция JavaScript, которая создает и применяет атрибут title (в дополнение к выполнению других заданий):

var StyleLinkMarker = function (LinkNumber, EltA, EltI) {
    var AltText = LocationName[LinkStart[LinkNumber]] +
                  " to " +
                  LocationName[LinkEnd[LinkNumber]];
    if (!EltA) {
        EltA = document.getElementById("link_marker_area" + LinkNumber);
        EltI = document.getElementById("link_marker_img" + LinkNumber);
    }
    if (LinkStatus[LinkNumber] === 9) {
        var CanBuyLinkCode = BoardPreviewMode ? 0 : CanBuyLink(LinkNumber);
        if (CanBuyLinkCode === 0) {
            EltI.src = ImagePath + "icon-buylink-yes.png";
            AltText += " (you can buy this " + LinkAltTextDescription + ")";
        } else {
            EltI.src = ImagePath + "icon-buylink-no.png";
            AltText += " (you cannot buy this " + LinkAltTextDescription;
            AltText += CanBuyLinkCode === 1 ?
                       ", because you aren't connected to it)" :
                       ", because you would have to buy coal from the Demand Track, and you can't afford to do that)";
        }
    } else if ( LinkStatus[LinkNumber] === 8 ||
                (LinkStatus[LinkNumber] >= 0 && LinkStatus[LinkNumber] <= 4)
                ) {
        EltI.src = ImagePath + "i" + LinkStatus[LinkNumber] + ".png";
        if (LinkStatus[LinkNumber] === 8) {
            AltText += " (orphan " + LinkAltTextDescription + ")";
        } else {
            AltText += " (" +
                       LinkAltTextDescription +
                       " owned by " +
                       PersonReference(LinkStatus[LinkNumber]) +
                       ")";
        }
    } else {
        throw "Unexpected Link Status";
    }
    EltA.alt = AltText;
    EltA.title = AltText;
};

LocationName выглядит следующим образом:

var LocationName = [
    "Barrow&ndash;In&ndash;Furness", "Birkenhead",                "Blackburn", "Blackpool",
                           "Bolton",    "Burnley",                     "Bury",     "Colne",
                   "Ellesmere Port",  "Fleetwood",                "Lancaster", "Liverpool",
                     "Macclesfield", "Manchester",             "The Midlands", "Northwich",
                           "Oldham",    "Preston",                 "Rochdale",  "Scotland",
                        "Southport",  "Stockport", "Warrington &amp; Runcorn",     "Wigan",
                        "Yorkshire"
];

javascript html html-entities
person Hammerite    schedule 04.05.2011    source источник
comment
Вы уверены, что &ndash; не кодируется дважды, например: &amp;ndash;   -  person Mark    schedule 05.05.2011
comment
Как вы устанавливаете атрибут title? Следующее работает нормально: <span title="test&ndash;test">test me</span>   -  person Domenic    schedule 05.05.2011
comment
@Mark: я уверен, что это не двойное кодирование. В частности, если бы он был закодирован дважды, я должен ожидать, что жирный текст Verdana в верхнем левом углу изображения также будет отображать объект HTML буквально, вместо правильного отображения предполагаемого символа. Это потому, что содержимое div создается из той же строки JavaScript.   -  person Hammerite    schedule 05.05.2011

Ответы (2)


arrow_upward
6
arrow_downward

Вы не устанавливаете атрибут title, вы устанавливаете свойство title, которое ожидает текст, а не HTML (хотя метод setAttribute также ожидает текстовую строку).

Вообще говоря, при работе с DOM вы предоставляете текст, а не HTML. .innerHTML является заметным исключением из этого правила.

person Quentin    schedule 04.05.2011
comment
Я понимаю. Как установить атрибут title? - person Hammerite; 05.05.2011
comment
Выбрасывая все содержимое родительского элемента и заменяя его с помощью innerHTML. Это не очень хорошая идея. Получите ваши данные в текстовом формате вместо формата HTML. (Вы можете, хотя я бы не рекомендовал это как подход, установить innerHTML из span, а затем прочитать data из textNode, который будет firstChild этого элемента… но лучше получить данные без кодирования HTML из источник) - person Quentin; 05.05.2011
comment
Я смог заставить его работать, используя текст UTF-8 вместо HTML. Я ожидал, что буквальный амперсанд в одном из других элементов LocationName приведет к тому, что страница не пройдет проверку, но оказалось, что происходит какое-то волшебство, превращающее ее в сущность. Нет ли способа конвертировать текст в объекты HTML и из них в JavaScript? Кажется удивительным, что так должно быть. - person Hammerite; 05.05.2011
comment
У вас есть некоторый HTML, который вы предоставляете браузеру. Браузер превращает его в DOM. Затем JavaScript работает с DOM, и ему все равно, что он начал свою жизнь как HTML, поэтому сущности не имеют смысла. - person Quentin; 05.05.2011

arrow_upward
1
arrow_downward

Вот простой способ преобразования HTML в текст:

function convertHtmlToText(value) {
    var d = document.createElement('div');
    d.innerHTML = value;
    return d.innerText;
}

Затем ваш код может быть обновлен до этого:

EltA.title = convertHtmlToText(AltText);
person Michael Best    schedule 03.04.2013
comment
Это невероятно практичное решение, спасибо! Жаль, что нет нативного способа сделать это, но что-то элегантное в этом способе есть. - person David John Welsh; 14.05.2014