MyBB Community Forums

http://ncisclan.com/

I'm trying to have the house change pictures when you hover over it.

http://ncisclan.com/images/breadcrumb/home.png


to

http://ncisclan.com/images/breadcrumb/home_hover.png


How can I do this?

The easiest method would be to show the image via CSS using something like this:

HTML:

<span class="house"></span>

CSS:

.house {
    background: url('path-to-image/home.png') top left no-repeat;
    display: inline-block;
    height: 23px;
    width: 19px;
}

.house:hover {
    background: url('path-to-image/home_hover.png') top left no-repeat;
}

I changed the CSS, but where is the HTML? O.o...

nav template:

<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Home"><span class="house"><img src="{$mybb->settings['bburl']}/images/breadcrumb/home.png" alt=Home" /></span></a></li>
{$nav}{$activebit}</ul>

These are the 3 templates that use the nav bar breadcrumb style.

Change the nav template to this and it should work:

<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Home" class="house"></a></li>
{$nav}{$activebit}</ul>

Don't I need to add a Image Code too? because now it's just blank.. there is no house.

Did you change the "path-to-image" text in the css?

---

Ah, I see the issue. You already have a background image applied to all links. Modify the HTMl to this:

<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Home"><span class="house"></span></a></li>
{$nav}{$activebit}</ul> 

Works great now, and is it possible to change images if I just move my mouse over that area, not just when I put my mouse on the house.

Thanks!

What do you mean over the area?

(2012-04-04, 02:54 PM)euantor Wrote: [ -> ]What do you mean over the area?

If you mouse over that area and not on top of the house, it's clickable so it takes you to home, but the house doesn't change, I want it if you mouse over even on the boundaries of the house but in the tab home it'll change to the blue house.

I'm not sure that's possible seeing as you have a background image applied to all links already.