Question

我有一个想要添加文字的图片。我不知道最好的方法是什么。我在HTML中看过地图标记，但我不知道这对我有帮助。对于图片的每个部分，我都希望在悬停时在其旁边添加文字。

到目前为止，我最好的解决方案是将图像作为背景图像制作div，并为图像的每个部分设置多个跨距，但在重新缩放图像时停止工作。

Answer 1

这是给你的一个片段。

＆＃13;

$('.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();                
            }
        });   
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望这可以帮助你。

如何在悬停时自动向图像添加文本

1 个答案: