Как автоматически добавить текст в изображение при зависании

Question

У меня есть изображение, на которое я бы хотел добавить текст. Я не знаю, какой будет лучший метод. Я видел тег карты в HTML, но я не знаю, помогает ли это мне. Для каждой отдельной части изображения я хотел бы добавить текст рядом с ним при наведении.

Мое лучшее решение до сих пор состоит в том, чтобы сделать div с изображением в качестве фонового изображения и иметь несколько интервалов для каждой части моего изображения, но это прекратило работать именно при перемасштабировании изображения.

Answer 1

Это фрагмент для вас.

$('.hover-with-caption').on('mousemove',function(e){  
 
    
 
    $('#dynamicCaption').remove(); 
 
    $('body').append("<span id='dynamicCaption' class='dynamic-caption'></span>"); 
 
    $('#dynamicCaption').text('what ever you want to show here!! '+event.pageX + ", " + event.pageY); // you need to decide what to show and how you are going to generate the caption, As you have not given mush info about it. 
 
    
 
    $('#dynamicCaption').finish().toggle(100). 
 
      css({ 
 
       top: e.pageY + "px", 
 
       left: e.pageX + "px" 
 
      });  
 
    
 
    $(document).off("click.customCaption").on("click.customCaption", function (e) { 
 
      // alert('context menu other mouse events'); 
 
      if (!$(e.target).parents('#dynamicCaption').length > 0) { 
 
       $('#dynamicCaption').remove();     
 
      } 
 
     }); 
 
});

div.parent{ 
 
    width:200px; 
 
    height:150px; 
 
    position: relative;   
 
    border: 1px solid black; 
 
    cursor:pointer; 
 
} 
 

 

 
img{ 
 
    width:200px; 
 
    height:150px; 
 
} 
 

 
.dynamic-caption { 
 
    display: none; 
 
    z-index: 1000; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    border: 1px solid #CCC; 
 
    white-space: nowrap; 
 
    font-family: sans-serif; 
 
    background: #FFF; 
 
    color: #333; 
 
    border-radius: 0px; 
 
    list-style-type: none; 
 
    padding-left: 0px; 
 
    min-width: 100px; 
 
    margin-bottom:0px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
<img class="hover-with-caption" src="http://cdn.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" /> 
 

 
</div>

Надеется, что это помогает вам.