удаление всплывающей подсказки

Question

Есть ли способ отключить всплывающую подсказку по умолчанию, которая отображается в браузере при наведении курсора на изображение? Это без удаления заголовка или тегов alt. Другой вариант: можно ли сделать всплывающую подсказку для отображения определенного текста для определенных типов изображений (например, JPG) и другого текста для другого типа изображений (например, PNG)?

Answer 1

Атрибут title используется в качестве текста при наведении в большинстве браузеров по умолчанию. Единственный способ увидеть их удаление - удалить атрибут title. JavaScript будет способен сделать это. Я уверен, что есть чистый способ DOM сделать это, но я использую небольшой jQuery:

$(function() { // when the document becomes ready for manipulation
  $("[title]").removeAttr('title'); // removes title from all things that have title
  // your other options:
  // all images who's src ends in .jpg       
  $("img[src$=.jpg]").attr('title','JPG Image'); 
  // all images who's src ends in .png 
  $("img[src$=.png]").attr('title','PNG Image'); 
}

Если вам нужно прикрепить это на своих страницах, я предлагаю создать файл site.js, содержащий этот код. Затем вам нужно указать свои HTML-страницы, чтобы загрузить его. У вас должен быть некоторый основной файл шаблона сайта (и он может уже иметь jQuery - если так, пропустите включение для jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="/js/site.js"> </script>

Ответ на комментарий: Как насчет того, чтобы ограничить символы, которые могут появиться во всплывающей подсказке, нулями или вплоть до 10?

Эта проблема немного усложняется, для этого давайте вытащим .each() для элементов с заголовками:

 $("[title]").each(function() {
    var $this = $(this); // shortcut for later
    var title = $this.attr('title'); // get the title attribute
    // if the length of our title was 10 characters or more, shorten it and set:
    if (title.length>10) {
      $this.attr('title', title.substring(0,10));
    }
 });