Results 1 to 4 of 4

Thread: Two Actions with one "OnClick" Javascript Command (Hide one, show another)

  1. #1
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Two Actions with one "OnClick" Javascript Command (Hide one, show another)

    Hi there! I'm an amateur who's been struggling with this for several hours: I'm trying to update a portfolio page and am having trouble figuring out how to infuse two actions into a single Javascript command. When the user clicks on an image pointing to "biztext," I want to get the existing "vidtext" to disappear and "biztext" to appear in its place. I can get either the appear or disappear commands to work on their own, but I don't know how to join them at "onclick" to get both to happen at once.

    {The page is set up with three sections. The first appears on the page when it first uploads. If a user clicks on buttons for the other two sections, the javascript should take away the first section and display the one the user clicked. I think the way I've arranged this, it should work as long as I can make one "onclick" command create more than a single action.}

    Code that performs "appear" action for "biztext":
    Code:
    <a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bizblack','','../images/subhead images/Work Buttons/workbutton-biz-green.png',1)" onClick="document.getElementById('biztext').style.display='block';"><img src="../images/subhead images/Work Buttons/workbutton-biz-black.png" width="200" height="26" id="bizblack" /></a>
    Code that should make "vidtext" disappear:
    Code:
    onClick="document.getElementById('vidtext').style.display='none';"
    ------------
    Full set of Javascript commands used in this part of the document:
    Code:
    <a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bizblack','','../images/subhead images/Work Buttons/workbutton-biz-green.png',1)" onClick="document.getElementById('vidtext').style.display='none';"><img src="../images/subhead images/Work Buttons/workbutton-biz-black.png" width="200" height="26" id="bizblack" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
      
      <img src="../images/subhead images/Work Buttons/workbutton-vid-green.png" width="194" height="26" id="vidblack" />
      
      <a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('printblack','','../images/subhead images/Work Buttons/workbutton-print-green.png',1)" onClick="document.getElementById('printtext').style.display='block';" onClick="document.getElementById('vidtext').style.display='none';"><img src="../images/subhead images/Work Buttons/workbutton-print-black.png" width="112" height="26" id="printblack" /></a>
    ---------

    Thanks for your help! Much appreciated.
    Last edited by james438; 10-13-2012 at 05:41 AM. Reason: formatted code.

  2. #2
    Join Date
    Mar 2011
    Location
    N 11° 19' 0.0012 E 142° 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Try
    Code:
    <a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bizblack','','../images/subhead images/Work Buttons/workbutton-biz-green.png',1)" onClick="document.getElementById('biztext').style.display='block';document.getElementById('vidtext').style.display='none';"><img src="../images/subhead images/Work Buttons/workbutton-biz-black.png" width="200" height="26" id="bizblack" /></a>

  3. #3
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Didn't Work :(

    Thanks for your suggestion. I couldn't get that to work either. The other sections will appear, but the first section will not disappear. Any other thoughts on how to do it? Thanks!

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    Yet keyboard's suggestion is right. There must be something in your swap function that spoils things. Take a look at this, without the swap and the images. It works:
    Code:
    <a href="javascript: void(0)" onclick="document.getElementById('biztext').style.display='block';document.getElementById('vidtext').style.display='none'; return false">hide vidtext and show biztext</a><br>
    <div id="biztext" style="display: none">biztext</div>
    <div id="vidtext" style="display: block">vidtext</div>
    Arie Molendijk.

Similar Threads

  1. Replies: 1
    Last Post: 02-28-2012, 01:21 AM
  2. Replies: 1
    Last Post: 06-09-2009, 05:38 AM
  3. playing backwards after a "load movie" command
    By niksan8787 in forum Flash
    Replies: 6
    Last Post: 01-14-2009, 07:50 PM
  4. Resolved "Local Time script" I want to hide the day and just show the time
    By coreyvf in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-19-2008, 04:23 PM
  5. Javascript "SHOW" Browser Toolbar
    By slyredfox in forum JavaScript
    Replies: 4
    Last Post: 07-17-2007, 09:00 PM

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
  •