Announcement

Collapse
No announcement yet.

how to do this in actinic?

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

    how to do this in actinic?

    check out this page on my competitors site -

    "http://www.feelingok.co.uk/prodchoice.asp?subcat=Bakery&cat=Lo+Carb+Foods"

    now wave the cursor over any of the product pictures in the middle.

    How cool is that! Can this be done easily in actinic?
    John

    #2
    Re: how to do this in actinic?

    Originally posted by jxm28788
    check out this page on my competitors site -

    "http://www.feelingok.co.uk/prodchoice.asp?subcat=Bakery&cat=Lo+Carb+Foods"

    now wave the cursor over any of the product pictures in the middle.

    How cool is that! Can this be done easily in actinic?
    They're using a Javascript function to pop the windows up. Very nice indeed.

    ......patiently waits for Norman to drop in

    Comment


      #3
      They use a free open source product you can get at http://www.bosrup.com/web/overlib/

      It would not be too hard to integrate.
      Bob Ladden

      Comment


        #4
        OK you got me going.

        Code:
        Using overLIB to display tooltips on Section images.
        
        SETUP
        
        Get overLib from http://www.bosrup.com/web/overlib/
        
        Copy overlib.js to Site1
        
        In Act_Primary.html (just after the <BODY...> tag put
        
        <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
        <script language="JavaScript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
        <script language=JavaScript>
        function showover(ctext,btext){
        <!--
         if ( ctext + btext ) return overlib(btext,CAPTION,ctext);
         return true;
         }
        // -->
        </script>
        
        
        
        Create 2 Customvars (Advanced / Custom Properties) called OVERCAPTION and OVERTEXT
        
        
        Change Act_SectionLine.html to the following
        
        
        <!-- SectionLine HTML begin -->
        <!-- Insert HTML for the beginning of a section title -->
        
        <DIV ALIGN="LEFT">
        
        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
        
        	<TR>
        
        		<TD ALIGN="LEFT" VALIGN="TOP">
        			<A onMouseOver="return showover('CUSTOMVAR:OVERCAPTION','CUSTOMVAR:OVERTEXT')" 
                                   onMouseOut="return nd();" HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A>
        		</TD>
        
        		<TD ALIGN="LEFT" VALIGN="MIDDLE">
        			<A HREF="NETQUOTEVAR:SECTIONLINK"><B>NETQUOTEVAR:SECTIONNAME</B></A>
        			<br><span class="actxsmall">NETQUOTEVAR:SECTIONTEXT</span>
        		</TD>
        
        	</TR>
        
        </TABLE>
        
        </DIV>
        NETQUOTEVAR:NEXT
        <!-- Insert HTML for the end of a section title -->
        <!-- SectionLine HTML end -->
        
        
        
        That's setup done
        
        
        USAGE
        
        In each Section / Advanced / Properties, select Customvar OVERCAPTION and enter your Caption text there.  
        If using business uncheck Searchable and check Use as Customvar.
        
        Do the same for OVERTEXT entering the body text. 
        If using business uncheck Searchable and check Use as Customvar.
        
        
        That's that.

        Note that overLIB does lots of other things too. These are just the basics. For example you could put the section text into the popup. To change the look and feel of the popups amend the line (in Act_Primary.html)

        if ( ctext + btext ) return overlib(btext,CAPTION,ctext);

        e.g.

        if ( ctext + btext ) return overlib(btext,CAPTION,ctext,STICKY);


        Norman
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          I forgot a few notes.

          Don't use the single quote character in these two Customvars unless you precede them with a \ character. I.e. O'Toole will fail but O\'Toole is OK.

          You can have HTML in these descriptions. I.e. Our <font color=red>Clearance Sale</font> is now on.

          There's a limit (set by Actinic - probably 256 characters) for this popup text.

          You could overcome this by swapping the CUSTOMVAR:OVERTEXT and NETQUOTEVAR:SECTIONTEXT in Act_SectionLine.html. This would let you use the section description as the popup text. And the custom text as the usual description. Remember to preface single quotes in the Section Description with \ if you do this.

          Alternatively make a new Customvar OVERTEXT2, put additional text in there and amend the line in Act_SectionLine.html

          <A onMouseOver="return showover('CUSTOMVAR:OVERCAPTION','CUSTOMVAR:OVERTEXT')"

          to be

          <A onMouseOver="return showover('CUSTOMVAR:OVERCAPTION','CUSTOMVAR:OVERTEXT' + 'CUSTOMVAR:OVERTEXT2' )"


          Norman
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #6
            Now I've come to use this on my new site I noticed that at 43k it is by far the largest single item on my home page (bigger than the next 4 biggest items - and this is a graphics intensive page!).

            As I'm trying to optimise this page for speed, does anyone know how/if this can be cut down a bit?

            Note that overLIB does lots of other things too. These are just the basics.
            Like, can I get rid of the lots of other things...?
            John

            Comment


              #7
              There may be some information on the overLIB site mentioned above. I see there's an overlib_mini.js that is 10K smaller.

              Also remember that JavaScript is really just plain text after all and will lend itself to the LZW compression that every modem does. So it may not actually be 33K that comes down the line - probably a lot less.

              Norman
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Tried But Failing

                Hi,

                I have tried as above but dont seen to be getting anywere...

                i have done as you have said, copy overlib.js to site1

                pasted the first section of text stright under <body....>

                replaced the second section of text.

                i have added the two custom properties with text vars

                under section / Advanced / properties, i have added the two new vars with searchable off and var on as this is developer 7

                i have added text to the boxes title and content... uploaded and refreshed..

                but do not get anything come up when placing the mouse over the product.

                Q: is there anything else to be done to the product or the section?

                Thnaks

                Paul
                Paul
                Director

                www.babyechos.co.uk
                www.simplifiednetworking.co.uk
                www.raddery.co.uk

                Developer 6 & 7

                Comment


                  #9
                  As always, post a URL so we can see what's happening.

                  Norman
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    Sorry norman

                    www.demosite.co.uk

                    just the basic site1

                    added your suggestion to basic
                    Paul
                    Director

                    www.babyechos.co.uk
                    www.simplifiednetworking.co.uk
                    www.raddery.co.uk

                    Developer 6 & 7

                    Comment


                      #11
                      In the readme there is a new Act_SectionLine.html. I don't see these modifications or your site so you may be using different templates for these sections links.

                      Look in Design / Layouts / Section Link Templates and make sure (via the Edit button) that the changes are in the templates you are actually using.

                      Norman
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment


                        #12
                        Just look in those templates for

                        <A HREF="NETQUOTEVAR:SECTIONLINK">

                        And change it to

                        Code:
                        <A onMouseOver="return showover('CUSTOMVAR:OVERCAPTION','CUSTOMVAR:OVERTEXT')" onMouseOut="return nd();" HREF="NETQUOTEVAR:SECTIONLINK">
                        Norman
                        Norman - www.drillpine.biz
                        Edinburgh, U K / Bitez, Turkey

                        Comment


                          #13
                          Sorry No Luck

                          Hi Norman,

                          Yes done that, was differant, but made the change, without success. do i need to do a complete refresh?, or is there anything else?

                          Thanks
                          Paul
                          Director

                          www.babyechos.co.uk
                          www.simplifiednetworking.co.uk
                          www.raddery.co.uk

                          Developer 6 & 7

                          Comment


                            #14
                            Ahhh

                            Hi Norman,

                            Thnaks full upload seens to have sorted it. just one more question, can you do this for each product? and how?

                            Thanks
                            Paul
                            Director

                            www.babyechos.co.uk
                            www.simplifiednetworking.co.uk
                            www.raddery.co.uk

                            Developer 6 & 7

                            Comment


                              #15
                              Regarding your question re getting a similar thing onto products.

                              Try creating two new custom properties OVERPRODUCTCAPTION and OVERPRODUCTTEXT, which you will use for Product level mouseover info. Then edit Act_ProductImage.html and add:-

                              Code:
                              onMouseOver="return showover('CUSTOMVAR:OVERPRODUCTCAPTION','CUSTOMVAR:OVERPRODUCTTEXT')" onMouseOut="return nd();"
                              on a new line immediately after

                              <IMG SRC="NETQUOTEVAR:IMAGEFILE"


                              Norman
                              Norman - www.drillpine.biz
                              Edinburgh, U K / Bitez, Turkey

                              Comment

                              Working...
                              X