Results 1 to 5 of 5

Thread: Show Hide DIV using Image

  1. #1
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Show Hide DIV using Image

    The script of below link is used to show and hide DIV tags. They have used onclick events on link and button. I need to have an image instead of submit button to show and hide a DIV. Can this be done?

    http://softflow.co.uk/design/Test/ToggleTest

    I tried replacing an image instead of a link, after saving and refreshing the page, i can see the image but once i click on it the image, the image goes off and the link is there !! can someone please tell me how to use IMG tags instead of link (href) and input button tags?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In the head:

    Code:
    <script type="text/javascript">
    function toggle(id){
    var el=document.getElementById(id);
    el.style.display=el.style.display=='block'? 'none' : 'block';
    }
    </script>
    In the body:

    HTML Code:
    <img src="some.gif" onclick="toggle('theDiv');"><br>
    <div id="theDiv" style="display:block;">Some content here</div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    That solution looks like it will work, but I want to note something it doesn't look like jpaulraj realized: you can have an image element enclosed by an anchor element.
    Code:
    <a href=wherever.html><img src=whatever.gif></a>
    So an image can become a link.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Jesdisciple
    That solution looks like it will work, but I want to note something it doesn't look like jpaulraj realized: you can have an image element enclosed by an anchor element.
    Code:
    <a href=wherever.html><img src=whatever.gif></a>
    So an image can become a link.
    Oh it works but, if you make the image a link (at least as shown in your example), it won't work. It will load wherever.html instead.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks guys... but i need to have image in the place of buttons in the script link that i posted.. i have used this for the entire app.. now if i change the script, i've got to change it everywhere.. can you please customize the code so that i can use image instead of submit buttons and link..

    I tried using <a href="..."><img tag></a> code, it looks ok but once you click on the image, the image goes off and a submit button gets displayed there !!

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
  •