Question

我有一个小问题，我能够以水平缩略图的形式显示图像。这些缩略图的行为类似于按钮。因此，当用户点击任何图像时，我的图像不会水平显示，点击后位置会发生变化。

这是我的HTML代码

<div class="thumbnailDiv">  
    <img src="/Ecm/HelloWorld0.png" width="80px" height="100px" style="margin-left: 20px;" onclick='displayPdfImage("image")/>              
</div>

这是我的css代码

.thumbnailDiv {
    white-space: nowrap;
    float: left;
    display:inline-block;
    width: 100%;
    height:100px;
    overflow-x:auto;
    background-color:  #C2DFFF;
 }

每当单击图像时，都会调用java脚本函数

这是java脚本函数

function displayPdfImage(img) {
    $("#dropdiv object").remove();
    $("#dropdiv img").remove();
    $("#dropdiv input").remove();
    $("#dropdiv").append(
        "<img src='/Ecm/Temp/HelloWorld"+img+".png' style='z-index:-1;width:800px;height:720px;'/>");
    $("#dropdiv").append(
        "<input  type='submit' value='SAVE' style='position:absolute; top: 670px; left:900px; z-index:10;' onclick='saveBothImages("+ img + ");'/>");
    document.getElementById(img).style.display = 'block';
}

当我点击图片时，我的缩略图图像位置发生了变化，但最初没有。我已经理解了我的问题..

请帮帮我

提前致谢：）

在html中水平显示缩略图图像

0 个答案: