Question

所以我有一个名为map的图像映射，我希望文本显示在我的div #show_message中。图像映射在左侧，文本将显示在右侧。我相信我现在面临的唯一问题是将show_message div集成到下面的脚本中。另外如何在点击之前隐藏文字？我认为。（）隐藏会做，但它不起作用。请帮忙！

这是我的div

<style>
    #show_message {
        float: right;
        width: 500px;
        height: 750px;
        position: relative;
        padding:20px; 
        margin:20px; 
        background:#fff;
        color:#000
    },
    map {
        float: left;
    }
</style>

这是我的地图

<img src="{{ 'image.jpg' | asset_url }}" alt="" usemap="#map" id="" />
<map id="map" name="map">
<area alt="" item="abc" href="#" shape="rect" coords="33,110,395,217" />
<area alt="" item="efg" href="#" shape="rect" coords="35,222,395,321" />
<div id="show_message">Click to see text.</div>
<div id="abc show_message" class="display">You clicked abc!</div>
<div id="def show_message" class="display">You clicked def!</div>

</body></html>

这是脚本

<script type="text/javascript">
    $('[item]').click(function() {
        var item=$(this).attr('item');
        $(".display").hide();
        $("#"+item).show();
        return false;
     });
</script>

Answer 1

要隐藏文字，你必须做这样的事情

<div id="abc show_message" class="display">You clicked abc! <input type="button" id="hide" name="hide" value="Hide" /></div>

隐藏在你的js中的函数是：

$('#hide').click(function(){
    $(".display").hide();
});

制作图像地图的点击功能出现在特定的Div中

1 个答案: