Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member medlington's Avatar
    Join Date
    Nov 2005
    Location
    Sheffield, UK
    Posts
    377
    Member #
    11968
    Liked
    4 times
    Hi All,

    Iv got a problem with my rollover images on this site:

    http://www.waresdesign.com

    the problem is with the navigation buttons below the main picture.

    The buttons are supposed to go black like they do but they are supposed to stay black while active but instead they revert back to their original state.

    ie. the contact button should be black on the contact page.

    this is the css code im using:

    a.aboutbutton:link, a.aboutbutton:visited {
    display: block;
    background-image:url(images/aboutwares.gif);
    float:left;
    height: 15px;
    width: 73px;
    text-decoration: none;
    background-repeat:no-repeat}

    a.aboutbutton:hover, a.aboutbutton:active {
    background-image:url(images/aboutwareson.gif);
    text-decoration: none;
    float:left;
    background-repeat:no-repeat}

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    active means while viewing that page and the mouse is over the link.

    displaying another page is a new page.

    I think you need to use PHP scripting to check which page you're on
    and force that particular link to be black. This would mean that you need
    to change each of the page extensions from ".htm" to ."php" and do some
    PHP scripting to deal with the link colors. It not only would make the link
    black, but it would no longer be a link.

    for example, when on the contact page, the "Contact us." would not only
    be black, but since you're already on that page, it would no longer be a link.

    If you're willing and able to change your page extensions to PHP, and your
    webhost allows PHP scripting, we can get you pointed in the right direction.


  4. #3
    Senior Member medlington's Avatar
    Join Date
    Nov 2005
    Location
    Sheffield, UK
    Posts
    377
    Member #
    11968
    Liked
    4 times
    ah, i see.

    I always thought active was the page you are on and hover was when the mouse was over it.

    I dont think il change every page to php as this would mean changing all of the links within my site which would definately be a pain. you have given me an idea of how to fudge it though. I can just make different buttons on the pages that are active.

    thanks for the advice,

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    In that case, you would have to make a change on each page for the link
    associated with that page (it will be just as much work). Example:

    Take the "Contact Us" button.
    Create another class for displaying the correct image, but not a link:

    a.contactbutton:link, a.contactbutton:visited {display: block; background-image:url(images/contact.gif); float:left;height: 15px !important;height: 15px;width: 63px;text-decoration: none; background-repeat:no-repeat}
    a.contactbutton:hover, a.contactbutton:active { background-image:url(images/contacton.gif); text-decoration: none; float:left; background-repeat:no-repeat}
    .contactpage { background-image:url(images/contacton.gif); text-decoration: none; float:left; background-repeat:no-repeat;}


    Then, on the "Contact Us" page, change only the section for the "contact.htm" part:
    (leave the other buttons alone).

    <div id="menubar">
    <a href="aboutwaresdesign.htm" accesskey="2" class="aboutbutton" title="Find out more about Wares Ltd and their product designs and developments"></a>
    <span class="buttonspacer"></span>
    <a href="waresservices.htm" accesskey="3" class="servicesbutton" title="Here is a complete list of services offered by Wares"></a>
    <span class="buttonspacer"></span>
    <a href="waresportfolio.htm" accesskey="4" class="portfoliobutton" title="Wares Design portfolio"></a>
    <span class="buttonspacer"></span>
    <div class='contactpage' accesskey='5' title='Contact Wares Design'></div>
    <span class="buttonspacer"></span>

    <a href="news.htm" accesskey="6" class="newsbutton" title="All the latest news from Wares"></a>
    <span class="buttonspacer2"></span>


    There are reasons for making your page extensions .php ....

    Most importantly, you will then be able to do server-side scripting directly inside your
    pages. That's very powerful, because you can access files, and manipulate content
    as the page is displayed. Perhaps you may want to display something different
    depending on which browser you detect, or display images based on a certain date.
    Things like that.


    ======================


    Just for the fun of it, make a duplicate copy of your "contact.htm" page and change
    the extension to .php

    This would go at the very top of each .php page (example: contact.php)

    <?php
    $pg = str_replace('/', '', $_SERVER['PHP_SELF']);
    ?>


    This is an example of how the PHP scripting would be done ... see the contact.php portion.
    Note, don't use quotes within the echo statements, use single quotes for tag properties ...

    <div id="menubar">
    <a href="aboutwaresdesign.htm" accesskey="2" class="aboutbutton" title="Find out more about Wares Ltd and their product designs and developments"></a>
    <span class="buttonspacer"></span>
    <a href="waresservices.htm" accesskey="3" class="servicesbutton" title="Here is a complete list of services offered by Wares"></a>
    <span class="buttonspacer"></span>
    <a href="waresportfolio.htm" accesskey="4" class="portfoliobutton" title="Wares Design portfolio"></a>
    <span class="buttonspacer"></span>
    <?php
    if($pg === "contact.php"){
    echo"<div class='contactpage' accesskey='5' title='Contact Wares Design'></div>";
    }
    else{
    echo"<a href='contact.php' accesskey='5' class='contactbutton' title='Contact Wares Design'></a>";
    }
    ?>

    <span class="buttonspacer"></span>

    <a href="news.htm" accesskey="6" class="newsbutton" title="All the latest news from Wares"></a>
    <span class="buttonspacer2"></span>



    This is where you would add a class for each button, to display the button in black, but it's not a link.
    see the contact button portion:

    a.aboutbutton:link, a.aboutbutton:visited {display: block; background-image:url(images/aboutwares.gif); float:left;height: 15px !important;height: 15px;width: 73px;text-decoration: none; background-repeat:no-repeat}
    a.aboutbutton:hover, a.aboutbutton:active { background-image:url(images/aboutwareson.gif); text-decoration: none; float:left; background-repeat:no-repeat}

    a.servicesbutton:link, a.servicesbutton:visited {display: block; background-image:url(images/services.gif); float:left;height: 15px !important;height: 15px;width: 54px;text-decoration: none; background-repeat:no-repeat}
    a.servicesbutton:hover, a.servicesbutton:active { background-image:url(images/serviceson.gif); text-decoration: none; float:left; background-repeat:no-repeat}

    a.portfoliobutton:link, a.portfoliobutton:visited {display: block; background-image:url(images/portfolio.gif); float:left;height: 15px !important;height: 15px;width: 53px;text-decoration: none; background-repeat:no-repeat}
    a.portfoliobutton:hover, a.portfoliobutton:active { background-image:url(images/portfolioon.gif); text-decoration: none; float:left; background-repeat:no-repeat}

    a.contactbutton:link, a.contactbutton:visited {display: block; background-image:url(images/contact.gif); float:left;height: 15px !important;height: 15px;width: 63px;text-decoration: none; background-repeat:no-repeat}
    a.contactbutton:hover, a.contactbutton:active { background-image:url(images/contacton.gif); text-decoration: none; float:left; background-repeat:no-repeat}
    .contactpage { background-image:url(images/contacton.gif); text-decoration: none; float:left; background-repeat:no-repeat;}


    a.newsbutton:link, a.newsbutton:visited {display: block; background-image:url(images/news.gif); float:left;height: 15px !important;height: 15px;width: 32px;text-decoration: none; background-repeat:no-repeat}
    a.newsbutton:hover, a.newsbutton:active { background-image:url(images/newson.gif); text-decoration: none; float:left; background-repeat:no-repeat;}



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com