| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
How to display a border on the rollover for thumbnails | |||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
How to display a border on the rollover for thumbnails
When a customer mouseOver(s) a product thumbnail, how do I get a BORDER to display on only the thumbnail image?
ps. I tried adding (ie. class=⌠borderit■ to the product_thumbnail.tpl code but on the store the border rollover is not displaying. ##### In my skin1/product_thumbnail.tpl I have the below code: {if $config.Appearance.show_thumbnails eq "Y"}<IMG id="{$id}" src="{if $tmbn_url}{$tmbn_url}{else}{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/{if $extra}extra_{/if}image.php?productid={$productid}{if $file_upload_data.file_path}&tmp=y{/if}{/if}"{if $image_x ne 0} width="{$image_x}"{/if}{if $image_y ne 0} height="{$image_y}"{/if} alt="{$product|escape}" class=⌠borderit■>{/if} In my skin1.css I have the below css: .borderit img{ border: 1px solid #FFFFFF; } .borderit:hover img{ border: 1px solid #DD0D75; } .borderit:hover{ color: DD0D75; /* irrelevant definition to overcome IE bug */ } #####
__________________
x-cart 4.0.16v linux server |
|||||||
#2
|
|||||||||
|
|||||||||
Re: How to display a border on the rollover for thumbnails
I've only just taken a quick look over your post, so I apologise in advance if this is wrong, but perhaps your CSS for borderit should refer to <img />, rather than a class that 'encloses' the <img />, like so:
img.borderit { border: 1px solid #FFFFFF; } img.borderit:hover { border: 1px solid #DD0D75; } img.borderit:hover{ color: DD0D75; /* irrelevant definition to overcome IE bug */ }
__________________
John ElegantXMods.com QuickOrder AJAX-based search and ordering system now available giving you complete control over how customers browse and search for your products. Click here for details. PriceSlider - easily filter categories by price range - only $9.99 - details here X-Cart 4.1, X-Cart 4.2 on Windows/IIS and Linux/Apache. |
|||||||||
#3
|
|||||||||
|
|||||||||
Re: How to display a border on the rollover for thumbnails
i use this
class=⌠borderit■ onmouseover="this.className=''borderitover'" onmouseout="this.className='borderit'" css .borderit { border: 1px solid #FFFFFF; } .borderitover{ border: 1px solid #DD0D75; }
__________________
xcart 5.1.2 |
|||||||||
|
|||
X-Cart forums © 2001-2020
|