Question

拥有以下代码：

 <script language="javascript" type="text/javascript">
 function SetImageName(strName)
 {
 document.getElementById("ImageName").value = strName;
 }
 </script>

 <form>
 <div id="slideshow">
 <div id="Container">
 <div id="Images">
            <img src="images/image1.jpg" name="image1.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image2.jpg" name="image2.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image3.jpg" name="image3.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image4.jpg" name="image4.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image5.jpg" name="image5.jpg" onclick="SetImageName(this.name)"/>
            <div id="slideEnd"></div>
          </div>
        </div>
    </div>
        <input type="hidden" value="" id="ImageName" name="ImageName"/></form>

用户可以从列表中选择图像。想要预览图像用户的选择。像

 You are selected image is
 <?
 $image = $_POST["ImageName"];
 echo ('<img src="'.$image.'" />');
 ?>

Answer 1

请尝试以下方法：

<html>
<head>
<title>sample</title>

<style type="text/css">
.hover_image a{
position:relative;
}
.hover_image a span{
position:absolute;
display:none;
z-index:99;
}
.hover_image a:hover span{
display:block;
}
</style>
</head>
<body>
<div class="hover_image">
<a href="#">Links text <span><img src="image.png" alt="image" height="100" /></span></a>
</div>
</body>
</html>

将任意图像名称image.png放在相对目录中，并将文本悬停在页面上以查看图像。

你可以编辑它以满足你的需要。

Answer 2

这对你有用..享受它。我使用jQuery进行本练习。

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function()
    {
        $('div').click(function() {
            var image = $(this).text();
            $("#showImage").html("<img src='your_path/"+image+".png'>");
            // do something with the text
        });
    });
</script>
<div id="image1" >Image1</div>
<div id="image2" >Image2</div>
<div id="image3" >Image3</div>
<div id="image4" >Image4</div>

<div id="showImage"></div>

Answer 3

Okey然后你可以这样做：

添加您的代码： - 为每个img标记添加title属性，删除名称属性
为要在点击事件上显示的title属性赋值

现在添加此代码

<script>
$(document).ready(function()
{
    $('img').click(function(){  
        var nameImg = $(this).attr('title');
        alert("you have selected "+nameImg);  
    });
});

此代码将提醒图像的名称如果要在其他div中显示此名称，则添加一个ID为“selectedImgTag”的div，并将以上代码替换为此代码 -

<script>
        $(document).ready(function()
        {
            $('img').click(function(){  
                var nameImg = $(this).attr('title');
                $("$selectedImgTag").html("you have selected "+nameImg);  
            });
        });
    </script>

有人点击它时如何获取图像预览？

3 个答案: