WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Onmouseover header background image change (11 posts)

  1. Jo0Lz
    Member
    Posted 8 years ago #

    Hello. I've been using wordpress for quite a while now, and it's great. I'm using the connections theme, but I've altered the images and colors.
    I made 2 header images, top.jpg and top1.jpg. They are both exactly the same size, the only difference is a picture and outlines. How do I do this? There are a lot of tutorials regarding tables, but the background image is defined in the stylesheet.
    I'm totally lost here, and I can use some help.
    Anyone know a way of doing this?

  2. Ajay
    Member
    Posted 8 years ago #

    In connections, the header is defined by the id #header

    You will need to create two class say .header_ori and .header_mouse and in that set two different background images.

    Then use the onmouseover attribute to change the class.

  3. Jo0Lz
    Member
    Posted 8 years ago #

    Ok. I've been trying to do this, maybe I'm overlooking something...
    Where do I put the script that defines the mouseover attribute? In the header file?

  4. Jo0Lz
    Member
    Posted 8 years ago #

    Or do I put it in the #header section @ the stylesheet?

  5. Jo0Lz
    Member
    Posted 8 years ago #

    Thank you Ajay for your awnser. I understand it better now.
    It works beautiful in FF (FireFox) but IE doesn't do it that nicely. Can you tell me why? My site is here.

    Thanks in advance.

  6. Jo0Lz
    Member
    Posted 8 years ago #

    Whatever I try, this works fine in FF, but sucks in IE.
    Internet Explorer is Gay :D

  7. Ajay
    Member
    Posted 8 years ago #

    Sorry for not having replied earlier.

    Seems you got it working great. I guess you are talking of the initial flicker in IE? Am kinda clueless of it as well.

    What you can try to do, especially since these are big images is create a class called .invisible as:

    .invisibles
    {
    display:none;
    }

    Next, in your footer.php add

    <div class="invisibles">
    <img src="top2.jpg" />
    </div>

    Customize the src and attributes of the image as needed.

    This will load your images while the page is loading itself, saving delay later.

  8. Jo0Lz
    Member
    Posted 8 years ago #

    Ajay you rock!
    I tried adding the class, and putting the code in the footer.php. It works great now, even in Internet Explorer.
    I guess Internet Explorer doesn't cache images like FireFox does. Ah well, this workaround seems to clear it right up.
    Btw, I can just as easily put the code in the header.php file right? That is always loaded as well, and let's the code stay in one place.

    I thank you very very, very much.

  9. Ajay
    Member
    Posted 8 years ago #

    I don't know about header.php because you will need to ensure that the images are loaded when your main page is loaded. You can ofcourse give it a shot.

    The div tag about loads the image into your page, but it doesn't display it as display is set to none.

    Glad to know that I was of help to you :)

  10. Jo0Lz
    Member
    Posted 8 years ago #

    Yeah it did work. Even with the code in the header.php file, wich now contains almost everything that has to do with the header and top navigation.

    Thank you again for helping me out!

  11. Ajay
    Member
    Posted 8 years ago #

    No probs, your welcome

Topic Closed

This topic has been closed to new replies.

About this Topic