Treehouse: Grow your CSS skills. Land your dream job.

Image Rollover and IE7

  • # June 22, 2012 at 8:13 pm

    I have spend most of my day trying to do cross browsing this website:

    The problem I can not figure out is that the middle menu beside the large image comes undone in IE7, it is an image rollover. Can any one throw me a bone? I can’t find why this thing does not want to play with me.

    Any help will be appreciated.


    # June 22, 2012 at 8:55 pm

    Working fine in my IE7, really….

    # June 24, 2012 at 11:23 am

    Senff, I know what you mean, some browsers show the Nav broken, I mean the one that has colors. My wife’s pc shows it broken, but not this one. Weird,

    # June 24, 2012 at 2:49 pm

    What do you mean “some browsers” then? “IE7 on some computers”, or different versions of different browsers? Is it just your wife’s PC?

    # June 24, 2012 at 2:52 pm

    I heard from others that have IE7 that this is an issue, yes.

    # June 24, 2012 at 2:59 pm

    Well, I don’t really know those others so it’s hard for me to figure out what the issue could be…

    # June 24, 2012 at 5:59 pm

    The css way was not working, so I did it via jquery, ha ha.

    jQuery(function($) {

    // Preload all rollovers
    $("#roller img").each(function() {
    // Set the original src
    rollsrc = $(this).attr("src");
    rollON = rollsrc.replace(/.jpg$/ig,"_over.jpg");
    $("").attr("src", rollON);

    // Navigation rollovers
    $("#roller a").mouseover(function(){
    imgsrc = $(this).children("img").attr("src");
    matches = imgsrc.match(/_over/);

    // don't do the rollover if state is already ON
    if (!matches) {
    imgsrcON = imgsrc.replace(/.jpg$/ig,"_over.jpg"); // strip off extension
    $(this).children("img").attr("src", imgsrcON);

    $("#roller a").mouseout(function(){
    $(this).children("img").attr("src", imgsrc);




Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.