Results 1 to 3 of 3

Thread: Show / Hide div for image links

  1. #1
    Join Date
    Jul 2006
    Posts
    64
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default Show / Hide div for image links

    I looking for a show/hide div script that will work with my user registration form.

    I have two images Male & Female when user clicks either one it should show the reg info within the set div ID (id=male or id=female) and then a third option for a back link that would clear and hide everything back to the main.

    i hope that makes sense. i found one div script that displayed the different sections but everything was overlaping each other. i might of been a css issue not sure.

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Code:
    <script type="text/javascript">
    var display = function(el) {
      document.getElementById(el)["style"]["display"] = "block";
    }, hide = function(el) {
      document.getElementById(el)["style"]["display"] = "none";
    };
    </script>
    <img src="male.jpg" onclick="hide('female');display('male');" alt="male">
    <img src="female.jpg" onclick="hide('male');display('female');" alt="female">
    <img src="close.jpg" onclick="hide('male');hide('female');" alt="close all"> 
    <div id="male" style="width:100px;height:300px;position:absolute;left:10px;top:50px;border:1px solid black;display:none">Male</div>
    <div id="female" style="width:100px;height:300px;position:absolute;left:70px;top:50px;border:1px solid black;display:none">Female</div>
    I think this is what you mean.
    - Mike

  3. The Following User Says Thank You to mburt For This Useful Post:

    acctman (08-10-2008)

  4. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    I also wrote this program, a little more complicated but is much more versatile:

    Code:
    <script type="text/javascript">
    var s = "style", d = "display", sp = "split",
      b = "block", n = "none", x = "indexOf",
    $ = function(e) {
      return document.getElementById(e);
    },
    display = function(el) {
      var div = el[sp](";"),
        d0 = div[0],
        d1 = div[1];
      if (d0 != "0") {
        if (d0[x](",") == -1) {
          $(d0)[s][d] = b;
        } else {
          var com = d0[sp](",");
          for (var i = 0;i < com.length;i++) {
            $(com[i])[s][d] = b;
          };
        };
      };
      if (d1 != "0") {
        if (d1[x](",") == -1) {
          $(d1)[s][d] = n;
        } else {
         var com = d1[sp](",");
          for (var i = 0;i < com.length;i++) {
            $(com[i])[s][d] = n;
          };
        };
      };
    };
    </script>
    <img src="male.jpg" onclick="display('male;female')" alt="male">
    <img src="female.jpg" onclick="display('female;male')" alt="female">
    <img src="close.jpg" onclick="display('0;male,female')" alt="close all"> 
    <div id="male" style="width:100px;height:300px;position:absolute;left:10px;top:50px;border:1px solid black;display:none">Male</div>
    <div id="female" style="width:100px;height:300px;position:absolute;left:70px;top:50px;border:1px solid black;display:none">Female</div>
    display() is broken down into two parts separated by the ";".

    The first half: display("male,female") is what is displayed, and the second half: display("male,female") is what's hidden.

    If you want to only display something, you set the second value to 0:
    Code:
    display("displayThis;0");
    As displayed in the example program, you can only hide elements as well. Set the first value to 0:
    Code:
    display("0;male,female");
    You can also display or hide several elements separated by a comma:
    Code:
    display("displayThis,and_this;hideThis,also_this");
    - Mike

  5. The Following User Says Thank You to mburt For This Useful Post:

    acctman (08-10-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •