How to change an image with text

Question

I want to ask, is there any way to change an image with text when i hover or click that image?

my code is :

<div class="container3">
        <h1 class="header3"><font color="white">Tentang Kami</h1>
            <div class="content2">
                <img src="about.png" align="center" class="gambar3">
            </div>
</div>

Possible duplicate of [Change the image source on rollover using jQuery](http://stackoverflow.com/questions/540349/change-the-image-source-on-rollover-using-jquery) — ventiseis, Apr 29 '17 at 18:40
Please mark any answer as answered by clicking on the green tick, if you got your satisfied answer. — bhansa, Apr 30 '17 at 13:57

score 0 · Answer 1 · answered Apr 29 '17 at 15:10

See the below example onclick event.

.container3
{
background:black;
}
#content 
{
color:white;
}

<div class="container3">
    <h1 class="header3"><font color="white">Tentang Kami</font></h1>
                <div class="content2" id="content">
                    <img src="about.png" align="center" class="gambar3" onclick="img_click()" />
                </div>
    </div>

    <script>
    function img_click(){
    document.getElementById("content").innerHTML = "Image Clicked";
      }
    </script>

Thanks so much, I will use this way for my other project :D – Muhammad Anas Apr 30 '17 at 12:20 — Muhammad Anas, Apr 30 '17 at 12:20

Dan Philip Bejoy · Accepted Answer · 2017-04-30T03:23:07.393

Simplest way is to toggle visibility of an image and a sibling text.

$(".hover").mouseover(function() {
  $(this).find('img').hide();
  $(this).find('.text').show();
}).mouseleave(function() {
  $(this).find('img').show();
  $(this).find('.text').hide();
});

$(".click").click(function() {
  $(this).find('img').toggle();
  $(this).find('.text').toggle();
});

.hover,
.click {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}

.hover .text,
.click .text {
  display: none;
}

.hover .text,
.click .text {
  line-height: 200px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content2 hover">
  <img src="https://www.qvb.com.au/images/phocagallery/thumbs/phoca_thumb_l_sample-200x200.png" align="center" class="gambar3">
  <p class="text">Demo Text</p>
</div>

<div class="content3 click">
  <img src="https://www.qvb.com.au/images/phocagallery/thumbs/phoca_thumb_l_sample-200x200.png" align="center" class="gambar3">
  <p class="text">Demo Text</p>
</div>

why it doesn't working when I try it myself? [pict](http://imageshack.com/a/img922/268/sCFOFs.png) — Muhammad Anas, Apr 30 '17 at 12:44
Ok, now it's working after I change a few codes, thanks a lot — Muhammad Anas, May 01 '17 at 01:28

How to change an image with text

2 Answers2