Javascript 使图像地图的点击功能出现在特定的Div中

因此，我有一个名为map的图像映射，我希望文本显示在我的div#show#消息中。图像地图位于左侧，文本将显示在右侧。我相信我现在面临的唯一问题是将show_message div集成到下面的脚本中。还有，在单击文本之前，如何隐藏文本？我以为藏起来就行了，但没用。请帮忙

这是我的部门

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

#显示消息{
浮动：对；
宽度：500px；
高度：750px；
位置：相对位置；
填充：20px；
利润率：20px；
背景：#fff；
颜色：#000
},
地图{
浮动：左；
}

这是我的地图

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

单击以查看文本。
你点击了abc！
你点击了def！

这是剧本

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

$（“[item]”）。单击（函数（）{
var item=$（this.attr（'item'）；
$（“.display”）.hide（）；
$（“#”+项）.show（）；
返回false；
});

要隐藏文本，必须执行以下操作

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

---

在单击方法之前编写隐藏方法。谢谢！您知道如何使用单击功能创建单击区域的红色轮廓吗？是的，您可以使用$（'#ID'）.css（“边框”，“红色实心1px”）$（'#ID'）.css（“边界”、“开始”）；您可以添加更多您想要的样式。对不起，我对JQuery/Java真的很陌生。我是否将您的代码添加到clickFunction部分$（1）隐藏$（2）隐藏$（3）隐藏$隐藏$隐藏$（6）隐藏$隐藏$（8）隐藏$（9）隐藏$（10）隐藏$（11）隐藏$（12）隐藏$（13）隐藏$（14）隐藏$（15）隐藏$（16）隐藏$（“[item]”）。单击（函数（）{var item=$（this.attr（'item'）；$（.display”）.hide（）；$（“#”+item.show（）；返回false；}）；当然尝试使用$（'#hide'）。单击（function（）{//要单击的元素的id$（“.display”）。hide（）；//隐藏id=display$（'#hide'）.css（“border”，“red solid 1px”）；//红色border$（'#hide'）。css（“border”，“start”）//style border}）；

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