HTMLHelp Forums > Image doesn't show until mouseover

Full Version: Image doesn't show until mouseover - it's not supposed to do that

HTMLHelp Forums > Web Authoring > General Web Design

beck.thomson

Aug 6 2009, 01:31 PM

I've been working on a site redesign for a friend and implemented a mouseover effect for the navigation bar.

Basically, the links are an image surrounded by an anchor tag, and when you hover over it, another image appears behind it as a css background image. (Both are pngs, in case that matters.)

For some reason, on each page, there's one initial image that won't show until you run your mouse over it, activating the other image. When you mouse off, the initial graphic shows.

Can anyone shed any light on this? I have no idea what's going on.

The site: http://174.120.63.221/~geez34xy/testing/index.php

The navigation HTML code:

CODE

<div id="nav">
 <a href="index.php">Welcome to Calico Spanish!<img src="utilities/nav-welcome.png" border="0" alt="Welcome to Calico Spanish!" /></a>
 <a href="whats-included.php">What's Included in the Spanish Curriculum?<img src="utilities/nav-included.png" border="0" alt="What's Included in the Spanish Curriculum?" /></a>
 <a href="testimonials.php">Testimonials for Calico Spanish<img src="utilities/nav-testimonials.png" border="0" alt="Testimonials for Calico Spanish" /></a>
 <a href="order.php">Order Spanish Lanuage Curriculum<img src="utilities/nav-order.png" border="0" alt="Order Spanish Lanuage Curriculum" /></a>
 <a href="faq.php">Calico Spanish FAQs<img src="utilities/nav-faq.png" border="0" alt="Calico Spanish FAQs" /></a>
 <a href="samples.php">Spanish Lanuage Samples<img src="utilities/nav-samples.png" border="0" alt="Spanish Lanuage Samples" /></a>
 <a href="more.php">Tell Me More About Learning Spanish<img src="utilities/nav-more.png" border="0" alt="Tell Me More About Learning Spanish" /></a>
 </div>

The corresponding CSS code:

CODE

    .nav {
        height: 158px;
        border-right: 1px #ea7a7d solid;
        display: block;
        float: left;
        padding: 0 10px 10px;;
        }
    .hide {
        display: none;
        }
    #nav1:hover {
        background-image: url(../../utilities/nav-welcome-on.png); }
    #nav2:hover {
        background-image: url(../../utilities/nav-included-on.png); }
    #nav3:hover {
        background-image: url(../../utilities/nav-testimonials-on.png); }
    #nav4:hover {
        background-image: url(../../utilities/nav-order-on.png); }
    #nav5:hover {
        background-image: url(../../utilities/nav-faq-on.png); }
    #nav6:hover {
        background-image: url(../../utilities/nav-samples-on.png); }
    #nav7:hover {
        background-image: url(../../utilities/nav-more-on.png); }

pandy

Aug 6 2009, 01:56 PM

The initial images are just the text, right? In that case I see all of them. Maybe you view a cached page.

beck.thomson

Aug 6 2009, 04:15 PM

Yeah, the image is just text. I thought it might just be a cache too, but it happens even when I reload the page repeatedly. Other changes that I've made to the page show, which tells me that it's no long a cache, but still the same problem.

Try clicking on the "what's included" page. Do the images show correctly for you there?

Thanks so much for your help... I'm totally baffled by this!

pandy

Aug 6 2009, 05:17 PM

Yup. I checked with 3 browsers. Are you aware that IE6 doesn't handle alpha transparency? Maybe goes for 7 too, don't remember. Also, the rollovers don't work in IE6.

I like the graphics. Did you create them?

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.