#1
  1. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Earth
    Posts
    4
    Rep Power
    0

    CSS onMouseover using both image and text


    hello,

    I did search the forum for this but it may be unique, I am using css onmouseover effect to change the background image of my menu from one image to the other to ceate the lighted effect. I am also using text display over these images. The text also "lights-up" with the hover effect. the problem i have though is I would like the text part to "light-up" with the image when the cursor is over the image.... not like it is now with the image lighting up before the text.

    see http://www.extremerollerboard.com/newerb/ for details.

    I realize I could just use an image entirly, but since my menu is generated by php, this is not an option.

    Edit I did find one source for getByID, but i cannot seem to make it work.... help is appreciated.

    Thanks in advance,
    Last edited by atlas2785; February 2nd, 2004 at 03:35 PM.
  2. #2
  3. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338
    you should change the style of the text, along with the background image. you should also preload your images.
  4. #3
  5. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Earth
    Posts
    4
    Rep Power
    0
    exaclty what he said, but i need it to work in this php code
    Code:
    function theme_draw_menu_item( $text, $link )
    {
            return "<tr class=\"none\" height=\"24\"><td align=\"center\" valign=\"middle\" background=\"images/menuout.gif\" onmouseover=\"this.background='images/menuin.gif';style.cursor='hand';\"  onMouseOut=\"this.background='images/menuout.gif'\" onClick=\"location.href='$link'\"><a id=\"menutext\" class=\"menutext\" href=\"$link\">$text</a></td></tr>\n";
    
    }
    Last edited by atlas2785; February 2nd, 2004 at 11:08 PM.
  6. #4
  7. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338
    You could generate the javascript with PHP as well... instead of trying to stuff it all into the onmouseover, do it as a dynamically generated function.
  8. #5
  9. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Earth
    Posts
    4
    Rep Power
    0
    I'm having trouble understanding. Do you think you can post an example.

    Thanks
  10. #6
  11. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Earth
    Posts
    4
    Rep Power
    0
    Ok, I've started trying to pre-load images and do the swapping image thing, but I just cannot seem to make it work this way now. I need a little bit of help with it please. Also I would like for the text to change its color too when the cursor is over the image. Not sure how to do this either. Below is the javascript code I am using.

    <SCRIPT LANGUAGE="JavaScript">
    <!-- hide from none JavaScript Browsers

    Image1 = new Image(140,24)
    Image1.src = "images/menuin.gif"

    Image2 = new Image(140,24)
    Image2.src = "images/menuout.gif"

    function SwapOut() {
    document.imageflip.src = Image2.src; return true;
    }

    function SwapBack() {
    document.imageflip.src = Image1.src; return true;
    }

    // End -->
    </SCRIPT>

    And here is a sample of the table that I'm trying to affect.

    <?php
    }

    function theme_draw_menu_item( $text, $link )
    {
    return "<tr name=\"imageflip\" class=\"none\" height=\"24\"><td align=\"center\" valign=\"middle\" background=\"images/menuout.gif\" onmouseover=\"SwapOut()\" onMouseOut=\"SwapBack()\" onClick=\"location.href='$link'\"><a id=\"menutext\" class=\"menutext\" href=\"$link\">$text</a></td></tr>\n";
    }
    ?>

    I am using PHP code to dynamically create a menu, so it is important that the text links "over" the buttons remain text.

IMN logo majestic logo threadwatch logo seochat tools logo