How to display alt tag on image as text using jQuery

Have you ever had an image that you wanted to let a user click and display text? For example; Show hidden price? Hidden image/text game? Although most browsers support hover over the img element to display the "title", this does not work in most mobile browsers. Android allows tap and hold on the image to display the title, but iPhone does not. I've got an alternative solution. See below:

 <html>
  <body>
    <script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <img 
      src="https://www.blogger.com/img/blogger-logotype-color-black-2x.png" 
      alt="my alt" 
      title="my title">
    <div id="show-text"></div>
    <script>
      $("img").on("click", function() {
        if( !$.trim( $('#show-text').html() ).length ) {
          $("#show-text").text($(this).attr("alt"));
        } else {
          $("#show-text").text("");
        }
      });
    </script>
  </body>
</html>


See an example in action at jsFiddle


Comments

Post a Comment

Popular posts from this blog

A Poem about Ed Bragg & His Family

Ed Bragg, a man of grace and might, With a heart that shines so bright. He leads his family with gentle care, And shows them love beyond compare. His wife, by his side, stands so tall, Her beauty and strength never fall. Together they weave a life so grand, A family full of love and hand in hand. Their children, dear, so full of glee, Bring laughter and joy to their family tree. With each day, their bond grows stronger, A love that lasts, like a song forever longer. And so, Ed Bragg and his kin, Live life to the fullest, without a grin. For their love for each other is what life’s about, And there's no doubt, they'll always be devout. So, here's to Ed Bragg and his family so true, May their love and bond forever shine anew. May they always laugh and dance through life, Together, as one, through joy and strife.
Read more

Use Winget to update and upgrade 3rd Party Apps and Packages in Windows 10+

Winget is a new command-line package manager for Windows that makes it easy to install and manage software. It is similar to other package managers like apt-get on Linux or Chocolatey on Windows. Winget is still in development, but it is already available for download from the Microsoft Store. To install Winget, open the Microsoft Store and search for "winget". Click on the "Get" button to install the app. Once Winget is installed, you can open it from the Start menu. To use Winget, you need to know the name of the package you want to install. You can find the names of packages by searching the Microsoft Store or by looking at the website of the software developer. Once you know the name of the package, you can use the following command to install it: winget install <package-name>  For example, to install the Notepad++ text editor, you would use the following command: winget install notepad++  Winget can also be used to update and uninstall software. To update...
Read more