CODEWITHSUNDEEP
javascriptphphtmlcss
Romeo
Romeo

Reputation: 117

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. guide me.

this is in the while loop-

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

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

Upvotes: 1

Views: 4424

Answers (7)

Utkarsh Singh
Utkarsh Singh

Reputation: 283

You can use jQuery for that purpose. 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.

Upvotes: 0

acarlon
acarlon

Reputation: 17272

Here is an example showing the Javascript side of things. Demo: 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";
}

Upvotes: 0

Hassan
Hassan

Reputation: 742

Your html should be like this

 <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

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

Upvotes: 2

Mario Radomanana
Mario Radomanana

Reputation: 1698

If you can use jquery, you can do like this

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

Upvotes: 1

Srijith Vijayamohan
Srijith Vijayamohan

Reputation: 915

With your js function, assuming the div is already in position change your js function like: 

    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:

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

Before that, the img line should change to use a different 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'. Make sure your HTML building follow the same naming.

Upvotes: 0

Martin Dixon
Martin Dixon

Reputation: 28

In your while loop, also have a div which contains the description and is marked with the id of the image like so:

<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";
}

Upvotes: 0

Class
Class

Reputation: 3160

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

Upvotes: 0

Related Questions