Easy PHP/Javascript rollover images for osCommerce links

February 14, 2008Leave a reply

The javascript portion:

<?php
function JavaCatTab($num) {
    echo ‘tab’ . $num . ‘up       = new Image();’;
    echo ‘tab’ . $num . ‘up.src   = "images/design/tab_’ . $num . ‘.gif" ;’;
    echo ‘tab’ . $num . ‘down     = new Image() ;’;
    echo ‘tab’ . $num . ‘down.src = "images/design/tab_’ . $num . ‘down.gif" ;’;
}
?>
<script language="JavaScript" type="text/javascript">
<!–
if (document.images) {
<?php
    JavaCatTab(’01′);
    JavaCatTab(’02′);
    JavaCatTab(’03′);
    JavaCatTab(’04′);
    JavaCatTab(’05′);
    JavaCatTab(’06′);
    JavaCatTab(’07′);
?>
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// –>
</script>

The links portion (place below the first part somewhere):

<?php
function catTab($num, $link) {
    echo ‘<a onmouseover=buttondown("tab’ . $num . ‘") onmouseout=buttonup("tab’ . $num . ‘") href="’ . tep_href_link(FILENAME_DEFAULT, $link) . ‘">’;
    echo ‘<img src="images/design/tab_’ . $num . ‘.gif" name="tab’ . $num . ‘" border="0" />’;
    echo ‘</a>’;
}

catTab(’01′,‘cPath=48′);
catTab(’02′,‘cPath=62′);
catTab(’03′,‘cPath=56′);
catTab(’04′,‘cPath=59′);
catTab(’05′,‘cPath=55′);
catTab(’06′,‘cPath=63′);
catTab(’07′,‘cPath=57′);
?>

Leave a Reply