当对图像进行单击时，如何在div中显示该图像的描述？
[英]when a click is done on an image, how to show description of that image in a div?
问题描述
i am fetching images from a database and showing on the page. 
我从数据库中提取图像并在页面上显示。 now i want that, whenever a user clicks on any image, the description to that image should appear in a div. 现在我想要的是，每当用户点击任何图像时，该图像的描述应该出现在div中。 guide me. 引导我。
this is in the while loop- 这是在while循环中 -
<input type="image" src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>" onclick="showElement(this.id)" height=97>
and the js function- 和js功能 -
function showElement(x){
alert(x);
var divid=document.getElementById(x);
divid.style.visibility="visible";
}
7 个解决方案
解决方案1
2 已采纳 2014-01-23 08:16:06
Your html should be like this 你的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>
and javascript like this 和这样的javascript
function showElement(x){
alert(x);
var divid=document.getElementById('des_'+x);
divid.style.disply="inline";
}
解决方案2
1 2014-01-23 08:14:06
If you can use jquery, you can do like this 如果你可以使用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>
解决方案3
0 2014-01-23 08:05:15
you probably want to use 你可能想用
onclick="showElement(yourdescription.id)"
OR something like 或类似的东西
onclick="showElement(<?php echo $row_data['description_id']; ?>)"
because this.id is the current element id (the one you clicked) and not your description's id 因为this.id是当前元素id（你点击的那个）而不是你描述的id
解决方案4
0 2014-01-23 08:07:07
In your while loop, also have a div which contains the description and is marked with the id of the image like so: 在你的while循环中，还有一个包含描述的div，并用图像的id标记，如下所示：
<div id="description-<?php echo $row_data['name'];?>" style="display:none;"><?php echo $row_data['desscription']' ?></div>
Then, modify your function like so: 然后，像这样修改你的函数：
function showElement(x){
var divid=document.getElementById(x);
document.getElementById('description-' + divid).style.display="block";
}
解决方案5
0 2014-01-23 08:07:19
With your js function, assuming the div is already in position change your js function like: 使用你的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";
}
You basically add the following line before making the div visible: 在使div可见之前，您基本上添加以下行：
divid.innerHTML = <?php echo $row_data['description'];?>
Before that, the img line should change to use a different id: 在此之前，img行应该更改为使用不同的id：
<input type="image" src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>" onclick="showElement(this.id)" height=97>
So the image line will have the id as 'imageName' and the description DIV will have the id in format 'desc_imageName'. 因此图像行的id为'imageName'，描述DIV的id为'desc_imageName'格式。 Make sure your HTML building follow the same naming. 确保您的HTML构建遵循相同的命名。
解决方案6
0 2014-01-23 08:30:11
Here is an example showing the Javascript side of things. 这是一个显示Javascript方面的例子。 Demo: jsfiddle 演示： jsfiddle
<input type="image" id="theImage" onclick="showElement('textSpan')" src="imageUrl" onclick="showElement('textSpan')" height=97>
<div id='textSpan'>something</div>
Javascript: 使用Javascript：
function showElement(x){
var theDiv = document.getElementById(x);
theDiv.style.visibility="visible";
}
解决方案7
0 2014-01-23 08:37:12
You can use jQuery for that purpose. 你可以使用jQuery来达到这个目的。 I'll explain with a small piece of code: 我将用一小段代码解释：
<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>
This above piece of code displays the details about an image that has been put in the alt attribute of the img tag. 上面这段代码显示了有关放在img标记的alt属性中的图像的详细信息。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.