X-Cart forums - Help swap image ( image rollover)

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Help swap image ( image rollover) (https://forum.x-cart.com/showthread.php?t=51136)

Help swap image ( image rollover)

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.

Quote:

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!

Re: Help swap image ( image rollover)

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:

Code:

<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>