Как показать все заголовки изображений div в onmouseover?

Question

У меня есть div, содержащий изображения, и я хочу показать все заголовки внутреннего изображения onmouseover.

Итак, у меня есть что-то вроде этого:

<div id=MyDiv onmouseover="highlight(this);"> 

И мой JavaScript:

function highlight(element) {  

     for (var i = 0; i < element.children.length; i++) { 
      if (element.children[i].tagName == "IMG") 
       element.children[i].title.show(); 
     } 
    } 

Но я получаю сообщение - Объект "X" не имеет никакого метода шоу.

Answer 1

Вот пример использования JQuery:

HTML:

<div id="MyDiv"> 
    <img src="http://chandra.harvard.edu/photo/2012/m101/m101_xray_thm100.jpg" title="img1" /> 
    <img src="http://passport-cdn.mobilenations.com/avatars/000/004/072/100x100_4072871.jpg?r=1" title="img2" /> 
</div> 

JQuery:

$("#MyDiv").mouseenter(function() { 
    $mydiv = $(this); 
    $.each($('img', $mydiv), function() { 
     var pos = $(this).position(); 
     $('<div>', { 
      class: 'imgtitle' 
     }).css({ 
      position: 'absolute', 
      color: 'red', 
      top: pos.top + 5, 
      left: pos.left + 5 
     }) 
     .html($(this).attr('title')) 
     .insertAfter($(this)); 
    }); 
}).mouseleave(function() { 
    $('.imgtitle').remove(); 
}); 

Вот такой jsfiddle показывая его в действии: http://jsfiddle.net/obryckim/k5hcJ/

Answer 2

Вы используете простой JavaScript. title - это строка, и, как говорится в сообщении, у нее нет метода show.

Если то, что вы хотите сделать, это предупреждение все названия в виде всплывающего окна, вы можете сделать это:

function highlight(element) {  

     for (var i = 0; i < element.children.length; i++) { 
      if (element.children[i].tagName == "IMG") 
       alert(element.children[i].title); 
     } 
    } 

Если, с другой стороны, вы хотите, чтобы показать их на своей странице вам нужно что-то как это:

function highlight(element) {  
     var outputelement = document.getElementById("idofsomeelementyouhaveonyourpage"); 
     for (var i = 0; i < element.children.length; i++) { 
      if (element.children[i].tagName == "IMG") 
       outputelement.innerHTML += element.children[i].title; 
     } 
    } 

конечно, со вторым способом, вам нужен onmouseout обработчик, который скрывает названия, а также.