CODEWITHSUNDEEP
javascriptcsswordpressmouseovergraphical-logo
Yoshiko Grover
Yoshiko Grover

Reputation: 1

Change logo on mouseover in wordpress

OK, so what i want to do is to get my logo changed on mouseover. If the default logo is default.PNG i want to change it to new.PNG when you hover over it with the mouse!

I am looking for the best solution,that is compatible with IE as well.I have tried a lot to get this working with :hover in CSS,but couldn't make it,so please assist.

This is how my header.php file looks like:

<!--Logo-->
        <div class="grid_3_no_margin"> 
            <a href="<?php echo site_url() ?>">
                <?php if(!empty($al_options['al_logo'])):?>
                    <img src="<?php echo $al_options['al_logo']?>" alt="<?php echo $al_options['al_logotext']?>" id="logo-image" class="logo" />
                <?php else:?>
                    <?php echo isset($al_options['al_logotext']) ? $al_options['al_logotext'] : 'Balance' ?>
                <?php endif?>
            </a>
        </div>
        <!--End Logo-->

And this is what i am getting when i analyze the actual logo element using a plugin for firefox:

<div class="grid_3_no_margin"> 
    <a href="http://myurl.com">
      <img src="http://myurl.com/icons/logo.PNG" alt="Logo" id="logo-image" class="logo">
    </a>
</div>

Thanks!

Upvotes: 0

Views: 3565

Answers (1)

Augustin Riedinger
Augustin Riedinger

Reputation: 22160

You need to use javascript if you want to change the img or the img source.

You can achieve the same result in css by using background-image property :

.img-div {
    background-image: url('logo.png');
    height : <logo-height>
    width : <logo-width>
}

.img-div:hover {
    background-image: url('logo2.png');
}

instead of <img />, set <div class="img-div"></div>

but you'll probably have to set a height and width to the div, supposing you already know them (to replace in and respectively.

  • This is cross-browser, no problem about that.

  • This is lighter than doing it in JS, and you don't have loading issues since the logo2.png will be loaded anyway when the CSS is parsed.

Upvotes: 1

Related Questions