how to do this in actinic?

[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?

[taliesyn]

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

[rmladden]

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.

[NormanRouxel]

OK you got me going.

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

[NormanRouxel]

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

[jxm28788]

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...?

[NormanRouxel]

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

[millsey]

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

[NormanRouxel]

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

Norman

[millsey]

Sorry norman

www.demosite.co.uk

just the basic site1

added your suggestion to basic

[NormanRouxel]

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

[NormanRouxel]

Just look in those templates for

<A HREF="NETQUOTEVAR:SECTIONLINK">

And change it to

<A onMouseOver="return showover('CUSTOMVAR:OVERCAPTION','CUSTOMVAR:OVERTEXT')" onMouseOut="return nd();" HREF="NETQUOTEVAR:SECTIONLINK">

Norman

[millsey]

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

[millsey]

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

[NormanRouxel]

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:-

onMouseOver="return showover('CUSTOMVAR:OVERPRODUCTCAPTION','CUSTOMVAR:OVERPRODUCTTEXT')" onMouseOut="return nd();"

on a new line immediately after

<IMG SRC="NETQUOTEVAR:IMAGEFILE"


Norman