Home/ Questions/Q 9200755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:50:17+00:00

I’m trying to make an image onclick function with a fadein hidden div the

  • 0

I’m trying to make an image onclick function with a fadein hidden div the problem is I don’t really know jquery or javascript all that well. I have searched to try to do it in css but i heard it’s buggy as hell and I don’t understand enough of it js/jq to piece together what code i need and where it should go.

Basically what i want is this:
you click on an image, the image fades in the hidden div, and preferably darkens the background (kind of like shadowbox would) then on the click of the close link within the hidden div, the div fades out and the background goes back to normal.

Right now I have the normal div with the image to be clicked, the hidden div, and the links set up.

I know it can be done, I’m just having a hell of a time figuring it out. Please help?

::UPDATED CODE TO REFLECT JS CHANGES::

HTML-

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title Goes Here</title>
    <meta name="keywords" content=" Enter Metatags" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">Shadowbox.init();
    </script></head>

    <body bgcolor="#547FA1">
    <div id="content">
<div id="wrapper">
    <div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
      </img></div> 
      <div class="shadowdisc">
        <p>&nbsp;</p>
        <font size=4 color=#999><p align=center>Content for Hidden Div.</p>
     <p align=center>Here is more content</p>
     <br /><br />
     <p align=center>Finishing the content here</p>
      <p>
      <p>
      <p align=center><a href="welcome.html">ENTER</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.com">EXIT</a></p>
    <p>
   <p>
     <p align=right><a href="#">Close</a>
     </font>   
      </div>
       </div>
      </div>
     </div>
    </body
    </html>

CSS- 

      #content{
width: auto;
height: auto;
overflow: hidden;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed
color: #5B5B5B;
           }



     #wrapper{
width: 1200px;
margin-right: auto;
margin-left: auto;
height: 1100px;
           }


      #holder{
position: relative;
width: 1200px;
top: 150px;
background-color: #E3E3E3;
height: 594px;
           }

    .shadowdisc{
width: 900px;
background-image: url(images/disbg.png);
position: relative;
bottom: 400px;
border: 1px solid #999;
left: 148px;
padding: 10px;
display: none;
           }
</style>

Javascript

     <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script>
    <script>
      $(function () { // Onload

        $("#showImage").click(function () {
          $("#shadowdisc").fadeIn(1000);
       });

        $("#closeLink").click(function () {
          $("#shadowdisc").fadeOut(1000);
        });

      });
    </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is an example how to do it with JQuery and a little bit of CSS.

    HTML

    <button id="showButton">Show Panel</button>
<div id="hiddenPanel" class="hidden">
  <p>I'm a hidden div</p>
  <button id="closeButton">close me</button>
</div>

    CSS

    .hidden {
    display: none;
    opactiy: 0;
}

    JavaScript

    <script>
  $(function () { // Onload

    $("#showButton").click(function () {
      $("#hiddenPanel").fadeIn(1000);
    });

    $("#closeButton").click(function () {
       $("#hiddenPanel").fadeOut(1000);
    });

  });
</script>
    • 0