当对图像进行单击时，如何在div中显示该图像的描述？

Question

我从数据库中提取图像并在页面上显示。 现在我想要的是，每当用户点击任何图像时，该图像的描述应该出现在div中。 引导我。

这是在while循环中 -

<input type="image" src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>" onclick="showElement(this.id)" height=97>

和js功能 -

function showElement(x){
    alert(x);
    var divid=document.getElementById(x);
    divid.style.visibility="visible";
}

Answer 1

你的HTML应该是这样的

 <img src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>"  onclick="showElement(this.id)" />
 <div id="des_<?php echo $row_data['name'];?>" style="display:none;">Hard coded value here</div>

和这样的javascript

function showElement(x){
        alert(x);
        var divid=document.getElementById('des_'+x);
            divid.style.disply="inline";
}

Answer 2

如果你可以使用jquery，你可以这样做

<div class="image_block">
    <img src="path/to/image.png" alt='myimage' class='an_image' />
    <div class="image_desc" style="display:none">
        Lorem ipsum dolor consectetuer sit amet
    </div>
</div>

<script>
$( document ).ready(function() {
    $('.image_block .an_image').click(function() {
        $(this).parent().find('.image_desc').toggle();
    });
});
</script>

Answer 3

你可能想用

onclick="showElement(yourdescription.id)"

或类似的东西

onclick="showElement(<?php echo $row_data['description_id']; ?>)"

因为this.id是当前元素id（你点击的那个）而不是你描述的id

Answer 4

在你的while循环中，还有一个包含描述的div，并用图像的id标记，如下所示：

<div id="description-<?php echo $row_data['name'];?>" style="display:none;"><?php echo $row_data['desscription']' ?></div>

然后，像这样修改你的函数：

    function showElement(x){
    var divid=document.getElementById(x);
    document.getElementById('description-' + divid).style.display="block";
}

Answer 5

使用你的js函数，假设div已经在位置改变你的js函数，如：

    function showElement(x){
        alert(x);
        var divid=document.getElementById('desc_'+x);
        divid.innerHTML = <?php echo $row_data['description'];?>
        divid.style.visibility="visible";
    }

在使div可见之前，您基本上添加以下行：

divid.innerHTML = <?php echo $row_data['description'];?>

在此之前，img行应该更改为使用不同的id：

<input type="image" src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>" onclick="showElement(this.id)" height=97>

因此图像行的id为'imageName'，描述DIV的id为'desc_imageName'格式。 确保您的HTML构建遵循相同的命名。

Answer 6

这是一个显示Javascript方面的例子。 演示： jsfiddle

<input type="image" id="theImage"  onclick="showElement('textSpan')"  src="imageUrl"  onclick="showElement('textSpan')" height=97>
<div id='textSpan'>something</div>

使用Javascript：

function showElement(x){    
    var theDiv = document.getElementById(x);
    theDiv.style.visibility="visible";
}

Answer 7

你可以使用jQuery来达到这个目的。 我将用一小段代码解释：

<html>
<head>
    <script>
        $(document).ready(function(){
            $("img").click(function(){
                var alt = $(this).attr("alt");
                alert(alt);
            });
        });
    </script>
</head>
<body>
    <img src="test.jpg" alt="IMAGE HAS THESE(WHATEVER) DETAILS" />
</body>
</html>

上面这段代码显示了有关放在img标记的alt属性中的图像的详细信息。

当对图像进行单击时，如何在div中显示该图像的描述？

问题描述

7 个解决方案

解决方案1
2 已采纳 2014-01-23 08:16:06

解决方案2
1 2014-01-23 08:14:06

解决方案3
0 2014-01-23 08:05:15

解决方案4
0 2014-01-23 08:07:07

解决方案5
0 2014-01-23 08:07:19

解决方案6
0 2014-01-23 08:30:11

解决方案7
0 2014-01-23 08:37:12

当对图像进行单击时，如何在div中显示该图像的描述？

问题描述

7 个解决方案

解决方案1 2 已采纳 2014-01-23 08:16:06

解决方案2 1 2014-01-23 08:14:06

解决方案3 0 2014-01-23 08:05:15

解决方案4 0 2014-01-23 08:07:07

解决方案5 0 2014-01-23 08:07:19

解决方案6 0 2014-01-23 08:30:11

解决方案7 0 2014-01-23 08:37:12

解决方案1
2 已采纳 2014-01-23 08:16:06

解决方案2
1 2014-01-23 08:14:06

解决方案3
0 2014-01-23 08:05:15

解决方案4
0 2014-01-23 08:07:07

解决方案5
0 2014-01-23 08:07:19

解决方案6
0 2014-01-23 08:30:11

解决方案7
0 2014-01-23 08:37:12