Skip navigation
Quadzilla_1111
Currently Being Moderated

How to make button stay active once clicked but reverts to normal state when another is clicked?

Sep 30, 2011 5:40 AM

Tags: #image #mac #dreamweaver #links #css #dreamweaver_cs5 #.html

Hi, I'm halfway through building a website. The page I'm trying to build is in essence a thumbnail gallery. I want a user to select a thumbnail and make a larger image off to the side change depending on which thumbnail has been selected. Doing disjointed rollovers is fine, but what I want is to make the currently clicked thumbnail to stay active and have a coloured image until a different thumbnail is clicked in which case the previous thumbnail reverts to a normal greyed out coloured image state and the recently clicked thumbnail becomes the currently coloured active one. Is it also possible to make the currently active thumbnail switch to a non link so that once you've clicked it once and it's active you can't click it again until you've clicked another thumbnail? Doing it in Flash used to be a doddle. I have a screenshot I can email so as to give an idea of what I'm doing. I'm new to web design, I'm not a coder and rely completely on Dreamweaver so I'm looking for a step by step tutorial if anyone knows of any? I thought I knew a way to do it but it turns out that I was completely wrong. Any help or point in the right direction would be much appreciated.

 

Jack

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Sep 30, 2011 5:53 AM   in reply to Quadzilla_1111

    This is a surprisingly fiddly thing to do in HTML, and relies on the use of javascript and absolutely positioned elements.

     

    Consider the following:

     

    1.  Put a thumbnail on the page.

    2.  Apply a normal image swap to it - onmouseover swap in the rollover image, and onmouseout revert the image.

    3.  Place another instance of the thumbnail image on the page, and use CSS to give it position:absolute, with top/left offsets that exactly superimpose this image over its duplicate placed in #1 above.

    4.  With this image correctly positioned, set the CSS visibility of it to hidden.

    5.  Again select the original thumbnail and add another behavior to it - Show-Hide elements, and pick the absolutely positioned duplicate to be shown.  Set the event for this behavior to "onclick".

     

    Here's what happens:

     

    * the thumbnail will do normal rollovers until it is clicked.  At that point the duplicate, superimposed (non-linked) image becomes visible, masking the original thumb image thereby blocking the rollover from occurring.  This new image will remail visible until it is finally hidden again, at which point the original thumb will again begin to show the rollover.

     

    Now - if you have 6 of these thumbs, you will have to repeat this process 6 times.  There is one final step:

     

    Each onclick behavior must show the hidden duplicate image for this thumb AND IT MUST ALSO HIDE ALL OTHER DUPLICATES, so if there are 6 thumbs, each onclick behavior will have to show one image and hide 5 others.

     

    See what I mean by fiddly?  But, it will work.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 30, 2011 6:57 AM   in reply to Quadzilla_1111

    Good luck.  And please, just post the link here.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2011 5:42 AM   in reply to MurraySummers

    Thanks Murray! I tried this method too and it worked perfectly!! However there is just one flow and I am not sure if I missed something or not.  So what I have done is I have used your method to create menu bars on the top of the site. And I wanted the rollover image once clicked to remain in the clicked position and also to direct to another page in the site. So it does remain clicked till I press another menu tab but I have to double click on the link before it directs me to another site. Can you tell me please what I have to do. I think i have pulled all my hair by now to figure this one out and it still doesn't work!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2011 6:09 AM   in reply to zDesign3

    Post a link to your page, please, so I can see the code and kick its tires.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2011 8:45 AM   in reply to MurraySummers

    i haven't uploaded the site yet. can i send you the index.html file?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2011 9:18 AM   in reply to zDesign3

    No, please don't.  You can save the file with a test name, and upload it (with its dependent files) and then just take it down when the issue is resolved.  That's really the very best way to get good help.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2011 6:09 AM   in reply to MurraySummers

    Hi Murray, for some reason I can't reply to the forum post. I am trying to

    upload the website but having some problem. As soon as it is uploaded I

    will email you with the link. Probably in the next couple of hours

     

    Thanks

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2011 7:48 AM   in reply to Quadzilla_1111

    Doing your own Javascript is always better but just in case...

     

    There's a commercial Dreamweaver Behavior that was designed to do this very thing. It's called FileTabs and you can try a demo at http://www.actionscafe.com/ft/. You can use any style of buttons, not just file tabs, and it works in a frameset or iFrame layout. Might be worth looking.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2011 7:52 AM   in reply to actionscafe

    hre is the link

     

    http://www.permachartshelpinghands.com/testing/index.html

     

    the links will only work if you dob;e clink on them.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 6:45 AM   in reply to zDesign3

    Did you see my problem?? Every menu tab button has to be double clicked for it to go to another page. Can you help me out please?

     

    http://www.permachartshelpinghands.com/testing/index.html

     

    Thanks

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 7:21 AM   in reply to zDesign3

    This is the link structure on your page -

     

    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Permacharts','','images/Side Tab Permacharts_RO.png',1)"><img src="images/Side Tab Permacharts.png" alt="Permacharts" name="Permacharts" width="190" height="32" border="0" id="Permacharts" onclick="MM_showHideLayers('apDivStrategic','','hide','apDivParticipating','', 'hide','apDivPermacharts','','show')" /></a></td>

          </tr>

     

    Note that the anchor tag is a null link.  And the rollover is achieved not by swapping that image, but by revealing a previously hidden AP container that contains the rollover image AND the hyperlink.  The first click reveals the rollover image and the second click actually goes to the hyperlink that is only present on the rollover.  That's an incredibly awkward way of achieving what could otherwise by done by using a simple rollover with a link, e.g.,

     

    <td><a href="Permacharts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Permacharts','','images/Side Tab Permacharts_RO.png',1)"><img src="images/Side_TabPermacharts.png" alt="Permacharts" name="Permacharts" width="190" height="32" border="0" id="Permacharts" /></a></td>

          </tr>

     

    Why did you do it this other way?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 7:37 AM   in reply to MurraySummers

    Well, I am trying for the clicked (rollover image) to stay clicked until another button is clicked, thats when it goes back to its original image.

    eg: In this case If I press the Home button, it should change from grey to green, and stay on green untill I press another button after which it should go back to grey.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 7:44 AM   in reply to MurraySummers

    basically I want to create a button with Hover and active state

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 8:31 AM   in reply to zDesign3

    You are moving from one page to another.  What has happened on one page CANNOT affect what you see on the next page.  If what you are wanting is this: when you click on a link to go to the next page, when that next page loads you see the button you clicked on as active, then your approach is not going to give you that.

     

    Here's what you need to do with what you already have:

     

    Construct your menu normally.  Without the show/hide stuff - normal rollover, and links.

     

    On each linked page, embed a small CSS file in the head with a single rule that shows the desired "active" state hidden container.  This rule would be different for each page.  Now you are done.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 8:46 AM   in reply to MurraySummers

    Thanks. I am sorry on being a pain but I am totally new to this CSS, can you please tell me how to write this rule.

     

    Thanks again for helping out. I feel i am going in some direction now.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 9:21 AM   in reply to zDesign3

    Change this -

     

    </head>

     

    to this -

     

    <style type="text/css">

    #apDivStrategic { visibility:visible; }

    </style>

    </head>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 10:27 AM   in reply to MurraySummers

    Thanks for helping out. For some reason it is still not working, I guess I am still not doing something right. I will look into it more with a clear mind later

     

    Thanks

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2011 10:32 AM   in reply to zDesign3

    You could always upload the page where you are trying this and posting a link....

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 19, 2012 2:48 PM   in reply to Quadzilla_1111

    Well done.  Looks nice and valid code to boot!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 6:57 AM   in reply to Quadzilla_1111

    Awsome! Great that it worked for you. Thats exactly what I wanted to do but still haven't figured out how. What did you do that the red shade remains on a tab until you click on another tab? I would still love to do that effect on my site but I still haven't been abple to. Murray was patient enough to help me out but I think because I am still new with the scripting I couldn't figure it out.

     

    Murray, do you think you can help me out one more time!

     

    check out the site

     

    http://www.permachartshelpinghands.com/index.html

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 7:02 AM   in reply to zDesign3

    Where do you want to use that effect?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 7:48 AM   in reply to zDesign3

    Are we talking about the 4 tabs down the left side of the page - Permacharts etc?

     

    If so change the table/link set up to as below:

     

    <table width="195" border="0" cellspacing="10" cellpadding="0">

    <tr>

    <td><a href="http://www.permacharts.com" id="linkOne"></a></td>

    </tr>

    <tr>

    <td><a href="Strategic Sponsors.html" id="linkTwo"></a></td>

    </tr>

    <tr>

    <td><a href="Participating Retailers.html" id="linkThree"></a></td>

    </tr>

    <tr>

    <td><a href="Login page.php" id="linkFour"></a></td>

    </tr>

    </table>

     

    Then add the below css styles to your existing css styles: (BUT see all those %20 in the file names - they are spaces which you should remove from file names...I use underscores....Side_Tab_Permacharts.png

     

    #linkOne {

    width: 195px;

    height: 35px;

    display: block;

    background-image: url(images/Side%20Tab%20Permacharts.png);

    background-repeat: no-repeat;

    }

    #linkOne:hover {

    background-image: url(images/Side%20Tab%20Permacharts_RO.png);

    }

    #linkTwo {

    width: 195px;

    height: 35px;

    display: block;

    background-image: url(images/Side%20Tab%20Strategic%20Sponsors.png);

    background-repeat: no-repeat;

    }

    #linkTwo:hover {

    background-image: url(images/Side%20Tab%20Strategic%20Sponsors_RO.png);

    }

    #linkThree {

    width: 195px;

    height: 35px;

    display: block;

    background-image: url(images/Side%20Tab%20Participating.png);

    background-repeat: no-repeat;

    }

    #linkThree:hover {

    background-image: url(images/Side%20Tab%20Participating%20RO.png);

    }

    #linkFour {

    width: 195px;

    height: 35px;

    display: block;

    background-image: url(images/Side%20Tab%20Login%20Blue.png);

    background-repeat: no-repeat;

    }

    #linkFour:hover {

    background-image: url(images/Side%20Tab%20Login%20Green.png);

    }

     

     

    That sets up the menu. To create a persistant page link you then need to add a specific line of css on each of the pages IT MUST come in the css list AFTER the styles we just created above.

     

    So on your Permacharts page you would include:

     

    #linkOne {

    background-image: url(images/Side%20Tab%20Permacharts_RO.png);

    }

     

    On your Strategic Sponsors page:

     

    #linkTwo {

    background-image: url(images/Side%20Tab%20Strategic%20Sponsors_RO.png);

    }

     

    On your Participating Retailers page:

     

    #linkThree{

    background-image: url(images/Side%20Tab%20Participating%20RO.png);

    }

     

    On your LOGIN page:

     

    #linkFour {

    background-image: url(images/Side%20Tab%20Login%20Green.png);

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 7:49 AM   in reply to osgood_

    I want to use it for the main tab on the top, HOME, Testimonilas, Special Offers, Sponcored Events and Contact us

     

    I want the hover image, which is the green box with the yellow arrow, to remain clicked on for instance Home page until I move to the next page.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 8:16 AM   in reply to zDesign3

    Your links there are simple rollovers -

     

    <a href="Testimonials.html" target="_parent" onmouseover="MM_swapImage('Testimonials','','images/tab Testimonials_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.permachartshelpinghands.com/images/tab%20Testimonials.jpg" alt="Testimonials" name="Testimonials" width="150" height="69" border="0" id="Testimonials" onclick="MM_showHideLayers('apDivSponsored','','hide','apDivSpecial', '','hide','apDivTestimonials','','show','apDivHome','','hide')"></a>

     

    You make the rollovers persistent in exactly the way I have already described (replace the word "thumbnail" with "tab image"-

     

    1.  Put a thumbnail on the page.

    2.  Apply a normal image swap to it - onmouseover swap in the rollover image, and onmouseout revert the image.

    3.  Place another instance of the thumbnail image on the page, and use CSS to give it position:absolute, with top/left offsets that exactly superimpose this image over its duplicate placed in #1 above.

    4.  With this image correctly positioned, set the CSS visibility of it to hidden.

    5.  Again select the original thumbnail and add another behavior to it - Show-Hide elements, and pick the absolutely positioned duplicate to be shown.  Set the event for this behavior to "onclick".

     

    Here's what happens:

     

    * the thumbnail will do normal rollovers until it is clicked.  At that point the duplicate, superimposed (non-linked) image becomes visible, masking the original thumb image thereby blocking the rollover from occurring.  This new image will remail visible until it is finally hidden again, at which point the original thumb will again begin to show the rollover.

     

    Now - if you have 6 of these thumbs, you will have to repeat this process 6 times.  There is one final step:

     

    Each onclick behavior must show the hidden duplicate image for this thumb AND IT MUST ALSO HIDE ALL OTHER DUPLICATES, so if there are 6 thumbs, each onclick behavior will have to show one image and hide 5 others.

     

    If there is something in there you don't understand or can't make work, then mention it specifically in a reply post, please.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 8:36 AM   in reply to MurraySummers

    Thanks a lot Let me try this and see if I got it right this time. I am doing it right now and will update you. Thanks again

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 8:38 AM   in reply to zDesign3

    You would do the same:

     

    Change the 'tab' <div> block to as below: (make a dupliacate copy of your page just incase you want to go back to your original)

     

    <div id="tab"><a href="index.html" id="tab1"></a>

      <a href="Testimonials.html" id="tab2"></a>

      <a href="Special Offers.html" id="tab3"></a>

      <a href="Sponsored Events.html" id="tab4"></a>

      <a href="Contact Us.html" id="tab5"></a>

    </div>

     

    Add the below css to your current styles:

     

    #tab {

    height: 59px;

    width: 750px;

    margin-top: 110px;

    float: right;

    }

    #tab1 {

    float:left;

    display: block;

    width: 148px;

    height: 80px;

    background-image: url(images/tab%20home.jpg);

    background-repeat: no-repeat;

    }

    #tab1:hover {

    background-image: url(images/tab%20home_RO.jpg);

    }

    #tab2 {

    display: block;

    float:left;

    width: 150px;

    height: 80px;

    background-image: url(images/tab%20Testimonials.jpg);

    background-repeat: no-repeat;

    }

    #tab2:hover {

    background-image: url(images/tab%20Testimonials_RO.jpg);

    }

    #tab3 {

    display: block;

    float:left;

    width: 150px;

    height: 80px;

    background-image: url(images/tab%20Special%20Offers.jpg);

    background-repeat: no-repeat;

    }

    #tab3:hover {

    background-image: url(images/tab%20Special%20Offers_RO.jpg);

    }

    #tab4 {

    display: block;

    float:left;

    width: 150px;

    height: 80px;

    background-image: url(images/tab%20S%20Events.jpg);

    background-repeat: no-repeat;

    }

    #tab4:hover {

    background-image: url(images/tab%20S%20Events_RO.jpg);

    }

    #tab5 {

    display: block;

    float:left;

    width: 152px;

    height: 80px;

    background-image: url(images/tab%20ContactUS.jpg);

    background-repeat: no-repeat;

    }

    #tab5:hover {

    background-image: url(images/tab%20ContactUS_RO.jpg);

    }

     

    Then create the persistant page marker: Remember to add the line of css AFTER the above styles in the css list so it overides the original style, which is waht we want to do.

     

    Home page:

     

    #tab1 {

    background-image: url(images/tab%20home_RO.jpg);

    }

     

    Testimonials:

     

    #tab2 {

    background-image: url(images/tab%20Testimonials_RO.jpg);

    }

     

    Special Offers:

     

    #tab3 {

    background-image: url(images/tab%20Special%20Offers_RO.jpg);

    }

     

    Events:

     

    #tab4{

    background-image: url(images/tab%20S%20Events_RO.jpg);

    }

     

    Contact Us:

     

    #tab5{

    background-image: url(images/tab%20ContactUS_RO.jpg);

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 8:41 AM   in reply to MurraySummers

    Murray *ACP* wrote:

     

    Your links there are simple rollovers -

     

    <a href="Testimonials.html" target="_parent" onmouseover="MM_swapImage('Testimonials','','images/tab Testimonials_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="http://www.permachartshelpinghands.com/images/tab%20Testimonials.jpg" alt="Testimonials" name="Testimonials" width="150" height="69" border="0" id="Testimonials" onclick="MM_showHideLayers('apDivSponsored','','hide','apDivSpecial', '','hide','apDivTestimonials','','show','apDivHome','','hide')"></a>

     

    You make the rollovers persistent in exactly the way I have already described (replace the word "thumbnail" with "tab image"-

     

    1.  Put a thumbnail on the page.

    2.  Apply a normal image swap to it - onmouseover swap in the rollover image, and onmouseout revert the image.

    3.  Place another instance of the thumbnail image on the page, and use CSS to give it position:absolute, with top/left offsets that exactly superimpose this image over its duplicate placed in #1 above.

    4.  With this image correctly positioned, set the CSS visibility of it to hidden.

    5.  Again select the original thumbnail and add another behavior to it - Show-Hide elements, and pick the absolutely positioned duplicate to be shown.  Set the event for this behavior to "onclick".

     

    Here's what happens:

     

    * the thumbnail will do normal rollovers until it is clicked.  At that point the duplicate, superimposed (non-linked) image becomes visible, masking the original thumb image thereby blocking the rollover from occurring.  This new image will remail visible until it is finally hidden again, at which point the original thumb will again begin to show the rollover.

     

    Now - if you have 6 of these thumbs, you will have to repeat this process 6 times.  There is one final step:

     

    Each onclick behavior must show the hidden duplicate image for this thumb AND IT MUST ALSO HIDE ALL OTHER DUPLICATES, so if there are 6 thumbs, each onclick behavior will have to show one image and hide 5 others.

     

    If there is something in there you don't understand or can't make work, then mention it specifically in a reply post, please.

     

    Aint that a bit overkill with the javascript......as I read it the OP only wants a persistant page marker when going from page to page?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 8:50 AM   in reply to osgood_

    True, indeed.  It's a bit complicated by the fact that the tab menu is built with rollovers rather than as a CSS menu.  But now that you mention it, there is another way that's a bit easier -

     

    With javascript, put this in script tags in the head of the document -

     

    function P7_downImage() {

    var g7="<imagename>"

    var g7url="<pathname>"

    if ((g7=MM_findObj(g7))!=null) {g7.src=g7url;}

    }

     

    and this on the <body> tag

     

    onload="P7_downImage()"

     

    Then on each page you would need to make two edits:

     

    Set g7 to the *name* of the button (not the file name but the HTML name -

    e.g., "productsbutt"), and g7url to the pathname to the button (e.g.,

    "images/nav/button3.gif"), and bada bing, bada boom!

     

    There is an excellent tutorial here -

     

    http://www.projectseven.com/support/answers.asp?id=126

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 8:54 AM   in reply to MurraySummers

    ok, so did steps 1 & 2. But I am stuck in step 3. When I add a CSS style, should it be a Class, Id, tag or comound rule? Also how do I make the top/left offsets exactly the same as the image in #1?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 9:22 AM   in reply to zDesign3

    Is it too late to suggest that you read my previous post?  I think that way is really much easier for you.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 9:32 AM   in reply to MurraySummers

    Ok, so i tried doing it with the easier method, with the javascipt. But looks like I might not be putting the code in the wrong position. If you could check for me that would be great. Below it is with the javascript codes already inco-operated. I have made the scipt bold so you canknow exactly where I added it.

     

     

     

    <!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>Helping Hands: Contact Us</title>

     

     

    <script type="text/javascript">

    </script>

    <style type="text/css">

    body {

              background-color: #9ECD51;

              background-image: url(images/background_main.gif);

              background-repeat: repeat-x;

              text-align: center;

              margin-top: 25px;

              font-family: Verdana, Geneva, sans-serif;

              font-size: 100%;

    }

    html, body {

              margin: 0px;

              padding: 0px;

    }

    #mainNav {

              background-color: #DBDCDE;

              height: auto;

              width: 195px;

              float: left;

              margin-top: 110px;

              border: thin none #999;

    }

    #maincontent {

              height: auto;

              width: 680px;

              float: right;

              margin-bottom: 45px;

              padding-right: 25px;

    }

    #sidebar {

              background-color: #CCC;

              height: auto;

              width: 190px;

              clear: left;

              float: left;

              margin-top: 25px;

              margin-right: 0px;

              margin-bottom: 0px;

              margin-left: 0px;

    }

    #footer {

              height: 1px;

              width: 885px;

              clear: both;

              margin-top: 45px;

              font-family: Verdana, Geneva, sans-serif;

              font-size: 10px;

              text-align: center;

              color: #FFF;

              padding: 10px 30px 45px;

              background: #68A748;

    }

    #wrapper {

              background-color: #fff;

              width: 945px;

              text-align: left;

              margin-top: 25px;

              margin-right: auto;

              margin-bottom: 25px;

              margin-left: auto;

              position: relative;

              border: thick solid #999;

    }

    #header {

              height: 110px;

              width: 945px;

              position: absolute;

              background: url(images/Website%20Banner_WEB.png) no-repeat;

    }

    #tab {

              background-color: #999;

              height: 59px;

              width: 750px;

              margin-top: 110px;

              float: right;

    }

    #wrapper #maincontent h1 strong {

              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

              color: #9CCB58;

              font-size: 80%;

              border: 100% none #A4A5A9;

    }

    #wrapper #maincontent p {

              line-height: 1.5;

              font-size: 90%;

    }

    #wrapper #maincontent h4 {

              font-family: Verdana, Geneva, sans-serif;

              font-size: 100%;

              color: #A3A4A8;

    }

    .followus {

              font-family: Verdana, Geneva, sans-serif;

              color: #3E61B1;

              padding-top: 10em;

              padding-bottom: 10px;

    }

    #wrapper #maincontent p u a strong {

    }

    .clickhere {

              font-family: Verdana, Geneva, sans-serif;

              color: #999;

    }

    #wrapper #maincontent h2 strong {

              border-bottom: medium solid #DBDCDE;

              font-family: Verdana, Geneva, sans-serif;

              font-size: 60%;

              color: #9E9FA3;

    }

    .top {

              float: right;

    }

    #wrapper #footer {

              font-style: normal;

              text-align: center;

    }

    #wrapper #footer {

              line-height: 2em;

    }

    .col1 {          float: left;

              width: 200px;

              margin-right: 20px;

              padding-left: 20px;

    }

    /*form styling ^6f */

    #maincontent form {

              font: notmal .9em Verdana, Geneva, sans-serif;

              color: #193742;

    }

    #maincontent fieldset {

              padding: 40px 20px 0 0;

              margin: 0 0 2em;

              background-color: #F2F4CE;

              border: none;

              position: relative;

              float: left;

    }

    #maincontent fieldset legend {

              padding: 0;

              margin: 0;

              color: #286B9A;

    }

    #maincontent fieldset legend strong {

              position:absolute;

              margin-left: 20px;

              margin-top: 10px;

              font-size: 1em;

    }

    #maincontent form p {

              color: #193742;

              margin: 0 0 20px 20px;

    }

    #maincontent form label {

              width: 130px;

              float:left;

              clear:left;

              margin-right:.75em;

    }

     

     

     

     

     

     

     

    /*individual forms */

     

     

    /* support forms */

    /* contact forms */

    #maincontent form#frmContact fieldset {

              width: 580px;

              clear: none;

              float: none;

    }

    .col1 {

              float: left;

              width: 200px;

              margin-right: 20px;

              padding-left: 20px;

    }

    #maincontent form#frmContact label {

              width: 150px;

    }

    #maincontent form#frmContact input.text {

              width:200px

    }

    #maincontent form#frmContact textarea {

              width:500px;

              height:150px;

    }

    #maincontent input.text:focus,

    #maincontent textarea:focus {

              background:#E6E6E6;

    }

    #maincontent form#frmContact .col1 {

              float: left;

              padding-left:20px;

              margin-right:20px;

              width:550px;

    }

    #maincontent form#frmContact div {

              margin:0 0 20px 0;

    }

    #maincontent form#frmContact div p {

              margin: 0 0 .5em 0;

    }

    #maincontent form#frmContact div label {

              display: inline;

              float: none;

              width: 300px;

    }

    #maincontent form#frmContact label.inline {

              float:none;

              width:auto;

    }

    #maincontent form#frmContact p.subHead {

              margin:0 0 0 20px;

              clear: both;

    }

    #maincontent form#frmContact label.subHead {

              display:block;

              float: none;

              margin:0;

              width:auto;

    }

    #wrapper #maincontent #frmContact fieldset p strong {

              font-size: 1em;

              color: #286B9A;

    }

    #wrapper #mainNav table tr td p {

              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

              font-size: 100%;

              line-height: 1.5em;

              color: #286B9A;

    }

    .followUsNew {font-family: Verdana, Geneva, sans-serif;

              font-size: 70%;

              color: #0D5890;

    }

    a:link, a:visited {

              color:#00C;

              text-decoration:none;

    }

    a:hover, a:active {

              color:#FFF;

              border-bottom:1px dashed #FFF;

    }

    function P7_downImage() {

    var g7="<contact_us>"

    var g7url="<images/tab ContactUS_RO.jpg>"

    if ((g7=MM_findObj(g7))!=null) {g7.src=g7url;

    }

    </style>

    <script type="text/javascript">

    function MM_preloadImages() { //v3.0

      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

    }

    function MM_swapImgRestore() { //v3.0

      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

    }

    function MM_findObj(n, d) { //v4.01

      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

      if(!x && d.getElementById) x=d.getElementById(n); return x;

    }

     

     

    function MM_swapImage() { //v3.0

      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

    }

    function MM_showHideLayers() { //v9.0

      var i,p,v,obj,args=MM_showHideLayers.arguments;

      for (i=0; i<(args.length-2); i+=3)

      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

        obj.visibility=v; }

    }

    function MM_goToURL() { //v3.0

      var i, args=MM_goToURL.arguments; document.MM_returnValue = false;

      for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");

    }

    </script>

    </head>

     

     

    <body onLoad="P7_downImage();"MM_preloadImages('images/Side Tab Permacharts Green.jpg','images/tab S Events_RO.jpg','images/tab home_RO.jpg','images/tab Testimonials_RO.jpg','images/tab Special Offers_RO.jpg','images/tab ContactUS_RO.jpg','images/Side Tab Participating RO.png','images/Side Tab Strategic Sponsors_RO.png','images/Side Tab Permacharts_RO.png','images/Side Tab Login Green.png')">

    <div id="wrapper">

      <div id="header"><a name="Top" id="Top"></a></div>

      <div id="tab"><a href="index.html" target="_parent" onmouseover="MM_swapImage('Home','','images/tab home_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/tab home.jpg" alt="Home" name="Home" width="150" height="69" border="0" id="Home" onclick="MM_showHideLayers('apDivSponsored','','hide','apDivSpecial', '','hide','apDivTestimonials','','hide','apDivHome','','show')" /></a><a href="Testimonials.html" target="_parent" onmouseover="MM_swapImage('Testimonials','','images/tab Testimonials_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/tab Testimonials.jpg" alt="Testimonials" name="Testimonials" width="150" height="69" border="0" id="Testimonials" onclick="MM_showHideLayers('apDivSponsored','','hide','apDivSpecial', '','hide','apDivTestimonials','','show','apDivHome','','hide')" /></a><a href="Special Offers.html" target="_parent" onmouseover="MM_swapImage('Special Offers','','images/tab Special Offers_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/tab Special Offers.jpg" alt="Special Offers" name="Special Offers" width="150" height="69" border="0" id="Special Offers" onclick="MM_showHideLayers('apDivContact','','hide','apDivSponsored', '','hide','apDivSpecial','','show','apDivTestimonials','','hide','apDi vHome','','hide')" /></a><a href="Sponsored Events.html" target="_parent" onmouseover="MM_swapImage('Special Events','','images/tab S Events_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/tab S Events.jpg" alt="Special Events" name="Special Events" width="150" height="69" border="0" id="Special Events" onclick="MM_showHideLayers('apDivContact','','hide','apDivSponsored', '','show','apDivSpecial','','hide','apDivTestimonials','','hide','apDi vHome','','hide')" /></a><a href="contact_us.html" target="_parent" onmouseover="MM_swapImage('Cobtact Us','','images/tab ContactUS_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/tab ContactUS.jpg" alt="Contact Us" name="contact_us" width="150" height="69" border="0" id="contact_us" onclick="MM_showHideLayers('apDivContact','','show','ContactRoCL','', 'show','apDivSponsored','','hide','apDivSpecial','','hide','apDivTesti monials','','hide','apDivHome','','hide')" /></a>

        <div id="apDivContact"></div>

    <div id="home1"></div>

      </div>

      <div id="mainNav">

        <table width="190" border="0" cellspacing="0" cellpadding="10">

          <tr>

            <td><span class="followUsNew">FOLLOW US</span><a href="http://www.facebook.com/pages/HelpingHands/171055699604203" target="_new"><img src="images/icon_Facebook.png" width="30" height="21" alt="Facebook" /></a><a href="https://twitter.com/#!/_helpinghands_" target="_new"><img src="images/icon_Twitter.png" width="30" height="21" alt="Twittter" /></a><a href="http://helpinghandsprogram.wordpress.com/" target="_new"><img src="images/icon_Wordpress.png" width="30" height="21" alt="Wordpress" /></a></td>

          </tr>

        </table>

        <hr />

        <table width="195" border="0" cellspacing="10" cellpadding="0">

          <tr>

            <td><a href="http://www.permacharts.com/" target="_new" onmouseover="MM_swapImage('Permacharts','','images/Side Tab Permacharts_RO.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/Side Tab Permacharts.png" alt="Permacharts" name="Permacharts" width="190" height="32" border="0" id="Permacharts" onclick="MM_showHideLayers('apDivStrategic','','hide','apDivParticipa ting','','hide','apDivPermacharts','','show')" /></a></td>

          </tr>

          <tr>

            <td><a href="Strategic Sponsors.html" target="_parent" onmouseover="MM_swapImage('Strategic Sponsors','','images/Side Tab Strategic Sponsors_RO.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/Side Tab Strategic Sponsors.png" alt="Strategic Sponsors" name="Strategic Sponsors" width="190" height="32" border="0" id="Strategic Sponsors" onclick="MM_showHideLayers('apDivStrategic','','show','apDivParticipa ting','','hide','apDivPermacharts','','hide')" /></a></td>

          </tr>

          <tr>

            <td><a href="Participating Retailers.html" target="_parent" onmouseover="MM_swapImage('Participating Retailers','','images/Side Tab Participating RO.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/Side Tab Participating.png" alt="Participating Retailers" name="Participating Retailers" width="190" height="32" border="0" id="Participating Retailers" onclick="MM_showHideLayers('apDivStrategic','','hide','apDivParticipa ting','','show','apDivPermacharts','','hide')" /></a></td>

          </tr>

          <tr>

            <td><a href="Login page.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('login','','images/Side Tab Login Green.png',1)"><img src="images/Side Tab Login Blue.png" alt="Retailer Login" name="login" width="190" height="32" border="0" id="login" /></a></td>

          </tr>

        </table>

        <hr />

        <div id="apDivParticipating"></div>

        <table width="190" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td align="center"><p>&quot;Attending Hippocrates will transform your life after one week! Since attending in 1985, I am still eating raw.&quot;<br />

            </p>

              <p> ~ <em>Wayne Gendel, <br />

              Longevity Coach</em></p>

            <p><a href="Testimonials.html" target="_parent"><img src="images/Read more.png" width="94" height="20" alt="read more" /></a></p></td>

          </tr>

        </table>

        <hr />

        <p> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.fac ebook.com%2Fpages%2FHelpingHands%2F171055699604203&amp;width=180&amp;h eight=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&a mp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:290px;" allowTransparency="true"></iframe></p>

      </div>

      <div id="maincontent">

        <h2><strong>::CONTACT US</strong></h2>

        <h1><strong>For more Information Contact:</strong></h1>

        <p><strong>PERMACHARTS HELPING HANDS PROGRAM<br />

        </strong><a href="mailto:helpinghands@permacharts.com"><strong>helpinghands@permacharts.com</strong></a> <strong><br />

        Phone: 1-800-387-3626 ext. 210</strong></p>

        <p><strong>Permacharts Inc.</strong><br />

          163 Buttermill Avenue, Suite 13<br />

          Concord, Ontario L4K 3X8<br />

          <a href="http://maps.google.ca/maps?q=163+Buttermill+Avenue,+Suite+13+Concord,+ Ontario+L4K+3X8&hl=en&sll=49.891235,-97.15369&sspn=49.326373,154.07226 6&vpsrc=0&hnear=163+Buttermill+Ave+%2313,+Concord,+Ontario+L4K+4A8&t=m &z=17&iwloc=A" target="_new">Canada</a><br />

          <br />

          <strong>Permacharts Inc.</strong><br />

          60 Industrial Parkway, Suite 616<br />

          Cheektowaga, New York 14227<br />

          <a href="http://maps.google.ca/maps?q=60+Industrial+Parkway,+Suite+616+Cheektow aga,+New+York+14227&hl=en&sll=49.891235,-97.15369&sspn=49.326373,154.0 72266&vpsrc=0&hnear=60+Industrial+Pkwy+%23616,+Cheektowaga,+New+York+1 4227,+United+States&t=m&z=17" target="_new">USA</a><br />

        </p>

    </div>

      <div id="footer"><a href="index.html">HOME </a>• <a href="Testimonials.html">TESTIMONIALS</a> • <a href="Special Offers.html">SPECIAL OFFERS</a> • <a href="Sponsored Events.html">SPONSORED EVENTS</a> • <a href="contact_us.html">CONTACT US</a> • <a href="http://www.permacharts.com/" target="_parent">PERMACHARTS</a> • <a href="Strategic Sponsors.html">STRATEGIC SPONSORS</a> • <a href="Participating Retailers.html">PARTICIPATING RETAILERS</a><br />

      © 2011 Permacharts Inc./Helping Hands. All rights reserved.</div>

    </div>

    <div id="apDiv1"></div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 10:03 AM   in reply to zDesign3

    That's definitely in the wrong place!  Delete it from there.  It's javascript not CSS!

     

    Did you go to the tutorial I linked?

     

    Change this -

     

    </script>

    </head>

     

    to this -

     

    function P7_downImage() {

    var g7="contact_us"

    var g7url="images/tab ContactUS_RO.jpg"

    if ((g7=MM_findObj(g7))!=null) {g7.src=g7url;

    }

    </script>

    </head>

     

    (make sure you note the changes I have made) and you should be OK.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2012 10:13 AM   in reply to MurraySummers

    thanks, i will do this later ans see if it works

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2012 9:24 AM   in reply to MurraySummers

    Thanks for your help and support Murray!

     

    Thanks to you, I finally got it to work using the javascript method! I will post th elink one I upkoad ths site

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 24, 2012 10:16 AM   in reply to zDesign3

    Good luck!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 25, 2012 8:05 AM   in reply to MurraySummers

    Hi Murray

     

    I might have a slight issue. The tabs worked great when I tested it before uploading, but once uploaded there is an error on the down link

     

     

    check it out

     

    http://www.impactguides.com/

     

    Any idea why?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 25, 2012 8:22 AM   in reply to zDesign3

    You have used spaces in your filenames.  That's a poor practice and is undoubtedly causing the problems. Use hyphens or underscores instead.

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points