Announcement

Collapse
No announcement yet.

Rollover Image!?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Rollover Image!?

    Hi, we've just implemented the 'add to cart' function and product price on our SPP layout and it looks great, but I want to make the customers aware that there is still more information about the product, i.e. if the image/description is clicked, but i have decided to add a button underneath called 'more info'. I have made our add to cart a rollover image, but can the 'more info' button be adjusted to have the same type of rollover effect?

    Any help much appricated. FrAz
    Cheers FrAz

    #2
    Convert the link to just a text link and then style that link using a background image for the button look you want. You will need to know CSS quite well, if not then perhaps you will need to delve into the rollover method on the add to cart button and try copy that. I'm sure Google will have lots of rollover tutorials too, it's just a standard image link you are dealing with, nothing special.

    Comment


      #3
      Hi, i took the add to cart rollover code and had a play around with it, ic an get it to display the more info image and rollover but can't get it to reference the link

      HTML Code:
      href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"
      It's just thinks it's another 'add to cart button. Am i missing some code?.

      test site as followed : www dot classixshop dot com /acatalog/test/acatalog

      Cheers
      Cheers FrAz

      Comment


        #4
        Start with the complete code from the layout for the more info part, you have no concerns on whether you have it all then. Get a basic link working, then look to add your rollover effect to that.

        Comment


          #5
          Sorry Lee,

          our full section layout is as followed:

          HTML Code:
          <!-- SectionLine HTML begin -->
          <!-- Insert HTML for the beginning of a section title -->
          
          <DIV ALIGN="CENTER">
          <TABLE BORDER="0" CELLSPACING="0" width="170" CELLPADDING="10" valign="TOP">
           <TR>
            <TD ALIGN="center" VALIGN="TOP">
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
          <form method="post" action="<actinic:variable name="OnlineScriptURL" value="Shopping Cart Script URL" />">
          <input type="hidden" name="SID" value="<Actinic:Variable Name="SectionID"/>" />
          <input type="hidden" name="PAGE" value="PRODUCT" />
          <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
          <Actinic:SECTION BLOB='<Actinic:Variable Name="SectionCatFile"/>'/>
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
          <!-- Hidden field when in trial mode -->
          <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
          </actinic:block>
          </actinic:block>
          
          <actinic:block type="ProductList" >
          <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductType%22%20%2f%3e%20%21%3d%202" >
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
          <div><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><img alt="<actinic:variable name="SectionName" encoding="strip"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" class="moiicon"/></a></div>
          <a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><actinic:variable name='SectionName'/></a>
          <div>
          <actinic:variable name="AttributeList" />
          <actinic:variable name="ComponentList" />
          <actinic:variable name="AddToCartButton" />
          </div>
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e" >
                <br />
                <span class="actrequired"><actinic:variable name="QuantityPrompt" /></span>
                &nbsp;
                <input type="text" name="Q_<actinic:variable name="ProductID" />" size="4" value="<actinic:variable name="DefaultQuantity" />" />
          </actinic:block>
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e" >
          	<input type="hidden" name="Q_<actinic:variable name="ProductID" />"  value="<actinic:variable name="DefaultQuantity" />" />
          </actinic:block>
          </actinic:block>
          </actinic:block>
          <input type="image"
             href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"
             vspace="5"
             src="moreinfo.gif"
             alt="Add to Cart"
             onMouseOver="src='moreinfo_r.gif' "
             onMouseOut="src='moreinfo.gif' "
             />   
          <actinic:block type="PriceList" >
          
          </actinic:block>
          <actinic:block php="true" >
          </actinic:block>
          </actinic:block>
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
          </form>
          </actinic:block>  
             
            </TD>
           </TR>
          </TABLE>
          </DIV>
          
          <!-- Insert HTML for the end of a section title -->
          <!-- SectionLine HTML end -->
          Cheers FrAz

          Comment


            #6
            I wasn't after your code, just trying to give you a methodical way of approaching it, which to be honest given what you have just put in front of me, you really need to do. That really is quite wrong what you have done.

            Get the layout back to basics, get the more info link working as a basic link, then try to add your changes, You are going down the completely wrong route with the above, the more info button has no need to be an input tag, it doesn't interact with the form. It is just a plain old <a> tag being styled.

            Comment


              #7
              As i said, i'd taken the layout code from the add to cart and i was unaware of what the input did, but i've gone back to basics and done it step by step and gotit working now, so that's for the simple, but effective advice. Cheers Lee
              Cheers FrAz

              Comment

              Working...
              X