#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Phoenix AZ
    Posts
    53
    Rep Power
    11

    jscript css class swap buggy ?


    Hi -
    I have the following classes defined in a a linked stylesheet...

    .side{background-image: url(images/wds_side_panel.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    padding-left:65px;
    padding-top: 20px;
    padding-right:24px;
    padding-bottom:29px;
    }

    .side_over{background-image: url(images/wds_side_panel_over.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    padding-left:65px;
    padding-top: 20px;
    padding-right:24px;
    padding-bottom:29px;
    }

    and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly:

    <td class="side"
    onMouseDown="window.location='news.html';"
    onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';"
    onMouseOut="document.body.style.cursor='default'; this.className='side';" >
    <a href="news.html">News</a></td>


    The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear..

    Is this the best way to achieve what I want here ?
    Might I need to preload the image in the 2nd class?

    an example page of the above is:
    http://www.rc23.com/wds_beta/aboutwds.html

    Any help would be greatly appreciated.

    Thank you all .

    Mike.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Phoenix AZ
    Posts
    53
    Rep Power
    11

    preloading imgs seems to have sorted it..


    It seems to be a little smoother now with the addition of this preloading script into my linked .js file..

    //preloader for quick display
    var x = new Image();
    x.src = 'images/wds_side_panel_over.jpg';

    var y = new Image();
    y.src = 'images/svc_side_panel_over.jpg';

    var z = new Image();
    z.src = 'images/case_side_panel_over.jpg';

    I will await conf from the client that this has nailed it.
    If anyone can confirm that its all working smoothly for them at

    http://www.rc23.com/wds_beta/aboutwds.html

    and what browser you're using, that would be splendid, thank you.

    Mike.

IMN logo majestic logo threadwatch logo seochat tools logo