on Click problems

Discussion in 'HTML & Website Design' started by seanburby3, Apr 23, 2011.

0
  1. #1
    Hey there,
    Whenever I use an onClick statement with an image, I am successfully able to get it so that when image 'A' is clicked, image 'B' appears. However, I am having problems with then being able to click image 'B' and then image 'A' appears again.

    To try an illustrate my problem: http://en.wikipedia.org/wiki/Universities_in_the_United_Kingdom

    If you take a look at the left toolbar, you'll see the word 'Interaction' with a downward arrow. When it is clicked, the options become hidden and then there is a rightward arrow displayed. Then when you click it again, the downward arrow appears again. Essentially, this is what I want to achieve.



    Your help is greatly appreciated :D
     
    seanburby3, Apr 23, 2011 IP
  2. blakeembrey

    blakeembrey Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It depends if your using a Javascript library on whether I'll be much help. If your using jQuery, it's a pretty easy fix to complete (I haven't used any other libraries before), and you can see how to do it here: http://api.jquery.com/slideDown/

    If you look at the first example, it's probably the most relevant to you:

    <script>
    $("#slider").click(function () {
    if ($("#slider").is(":hidden")) {
    $("div").slideDown("slow");
    } else {
    $("div").slideUp("slow");
    }
    });
    </script>
     
    blakeembrey, Apr 24, 2011 IP
  3. om39a

    om39a Peon

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    om39a, Apr 24, 2011 IP
  4. seanburby3

    seanburby3 Peon

    Messages:
    8
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for your replies :)

    I'm not really sure I understand though as I am new to this :(

    In the code below, when 'Button.png' is clicked, 'Button2.png' appears. Then I need it so that when 'Button2.png' is clicked 'Button.png' appears.

    <head>
<script type="text/javascript">
function change(id){
     ID = document.getElementById(id);
    
     if(ID.style.display == "")
          ID.style.display = "none";
     else
          ID.style.display = "";
      }
</script>
<style type="text/css">
BODY { text-align: center}
.tbl { FONT: NORMAL 11px/14px verdana, arial, sans-serif; border: 0px solid black; padding: 3px; Background: #F3F3F3; height: auto }
A {COLOR: #333333; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold }
A:hover { COLOR: black; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold}
</style>
</head>

<body>
<table width="217" align="center">
  <tr>
    <td title="Show/Hide" style="cursor: hand" class="tbl" width="172" height="25">» <strong>Test </strong></td>
    <td title="Show/Hide" onclick="change(1), change(2), change(3), change(4)" style="cursor: hand" class="tbl" width="33"> <div align="center"><img src="Button.png" name="arrow" width="26" height="27" onClick="document.images['arrow'].src='Button2.png'"/></div></td>
    Code (markup):
    Thank you :)
     
    seanburby3, Apr 25, 2011 IP