0

I am beginner to HTML I have given a task to add a text below an image after clicking on it

I am trying this

<a href="hh.jpg">
<img src="hh.jpg" width="100" figcaption="has">
</a>

but it requires 2 pages to my task to get completed. and I have to do it in one page. in order to complete my assignment. can any one guide me how to do it...?

Hussain Saifuddin
  • 11
  • 1
  • 4

3 Answers3

1

Here's an approach to do it with just HTML as you requested. The href of the a should target an anchor, then add a CSS style to only show the targeted location if the target pseudo-class is selected.

<style>
    #display { display: none; }
    #display:target { display: block; }
</style>
<a href="#display">
    <img src="hh.jpg" width="100" figcaption="has" />
</a>
<div id="#display">Show this text</div>
Jason W
  • 13,026
  • 3
  • 31
  • 62
  • @hussainsaifuddin - Please feel free to upvote an answer if it helped you and accept it if it solved your question. This helps others to know which answers may have helped and if any solved your question. It also increases your reputation. – Jason W Jul 09 '15 at 01:53
1

Here's how to do it without JavaScript, but with CSS.

input {
    display: none;
}
span#content {
    display: none;
}
input#show:checked ~ span#content {
    display: block;
}
<label for="show">
    <span>
        <img src="https://i.imgur.com/g3D5jNz.jpg" width="100" figcaption="A cat yesterday"/>
    </span>
</label>
<input type=radio id="show" name="group">
<span id="content">This is a caption</span>

Note: code adapted from this previous answer.

Community
  • 1
  • 1
Ken Y-N
  • 14,644
  • 21
  • 71
  • 114
0

If you know javascript, this can help you; if not then you have to learn at least the basics if you want to do things like what you're trying to do here. Inside your <header> tag, insert the following javascript code:

           function addtext(){
            document.getElementById('displaytext').innerHTML='THis is a text';
            }

then inside your img tag,add this event: onclick='addtext();' remove your anchor tags then add this tag after your img tag: <span id='displaytext'></span>

your code should look something like this:

                <html>
                <head>
                <script>
                    function addtext(){
                        document.getElementById('displaytext').innerHTML='THis is a text';
                       }
                   </script>
                   </head>
                   <body>
                  <img src="hh.jpg" width="100" figcaption="has" onclick='addtext();>
                  <br>
                  <span id='displaytext'></span>
                  </body>
                  </html>
Vance
  • 897
  • 5
  • 9