Jump to content

Change "Add to Basket" button to image


Guest oldboy

Recommended Posts

Guest oldboy

Im surprised that one one have asked this before.

At least i cant find any info via search on how to replace the "Add to Basket" and "Buy" buttons to gif images.

Link to comment
Share on other sites

Well this is not difficult, just no time to answer in detail. In general, there are two ways to go about this. One is to use a background image for the button in css stylesheet, see the "go" button for search field at this site:

http://www.powerkeyspub.com/

That image is a background image for submit button. Another way is to use an image with link anchor tag <a href=""> in the template where button is produced, example in viewProd.tpl for the add to basket button. See the add to basket buttons on homepage on this site (this site is under development and unfinished):

http://justwhat-iwant.co.uk/

Those buttons are coded as direct image into the template with links <a href="">

All this is simple css and html, for more information on coding with html and css I suggest the Visual Quickstart Guides by Peachtree Press, there is an html/css book by Elizabeth Castro in the series. Also, check out the css tutorials at w3cschools.org

Link to comment
Share on other sites

  • 2 weeks later...
Guest lordbarron

hey mark, i've coded mine straight into my .tpl

im trying to use a roll over image coded in dreamweaver it looks like this:

   <a href="java script:submitDoc('prod{PRODUCT_ID}');" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('/store/skins/default_2/styleImages/buttons/add_down.jpg',1)"><img src="/store/skins/default_2/styleImages/buttons/add_up.jpg" alt="add to basket" name="add" border="0" id="add" /></a>

damn thing won't roll over.. any ideas on that one?

your priceless help as ever is truely appreciated.

Link to comment
Share on other sites

  • 11 months later...
Guest rickyrauch

hey mark, i've coded mine straight into my .tpl

im trying to use a roll over image coded in dreamweaver it looks like this:

<form action="index.php" method="post" name="prod{VAL_PRODUCT_ID}" id="buttoms_3">

<input type="hidden" name="add" value="{VAL_PRODUCT_ID}" />

<input type="hidden" name="quan" value="1" /><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" target="_self" id="more_buttom">More</a> <a href="java script:submitDoc('prod{VAL_PRODUCT_ID}');" target="_self" id="buy_buttom">Buy</a> </form>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...