Support » Fixing WordPress » Onmouseover header background image change

  • Resolved Jo0Lz


    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?

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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.

    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?

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

    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.

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

    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:


    Next, in your footer.php add

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

    Customize the src and attributes of the image as needed.

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

    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.

    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 🙂

    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!

    No probs, your welcome

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Onmouseover header background image change’ is closed to new replies.