X-Cart forums

[mmoskva]

I need some help with this image rollover. Once, I rollover the image, for some reason the rollover image is not displaying at all? So the main image displays but the rollover will not show up.

In my .tpl file I have the following:

{config_load file="$skin_config"}
{if $is_nomail ne 'Y'}
{literal}
<STYLE type="text/css">
.nav a:hover {visibility:visible;
}
.nav a:hover {visibility:visible;
}
</STYLE>
{/literal}
{/if}


<div class="nav">
<a href="#">
<img src="{$ImagesDir}/custom/img.gif" border="0" width="77" height="32">
</a>
</div>



AND



In my css file I have the following:

.nav {
height: 32px;
width: 77px;
margin:0;
padding:0;
background-image:url("images/custom/imgover.gif") no-repeat 0 0;
}

.nav a, div.nav a:link, div.nav a:visited {
display:block;
}

.nav img {
width:100%;
height:100%;
border:0;
}

.nav a:hover img {
visibility:hidden;
}

Appreciate the help!

[KurtVeloc]

Based on your code, without seeing the site it looks like you have the css calling the hover image to the background of your nav buttons and not replacing the displayed image.

Here is what I do for my nav bar:

<A    onmouseover="window.status='Customer Service'; document.customer.src='images/topbanner/t2/customer_off.jpg'; return true; "                   onmouseout="window.status=''; document.customer.src='images/topbanner/t2/customer_ovr.jpg'; return true;"                   href="http://www.velocityartanddesign.com/help.php"><IMG                   id=customer height=19 src="images/topbanner/t2/customer_ovr.jpg"                   width=141 border=0 name=customer></A>