Applying mouseover and mouseout to Act_SectionLineImage,html [Archive]

View Full Version : Applying mouseover and mouseout to Act_SectionLineImage,html

simonwar

12-Oct-2005, 09:50 AM

Act_SectionLIneImage.html original template reads :

<TD ALIGN="center" VALIGN="TOP">
<A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A>
</TD>
and this gives me the following HTML in the final page...
<TD ALIGN="center" VALIGN="TOP"><A HREF="MyPage.html">
<IMG SRC="../images/MyImage.gif" ALT="MyPage"
BORDER=0 HEIGHT=118 WIDTH=85
ALIGN="ABSMIDDLE"></A></TD>
However, what I actually want the final code to read is;

<TD ALIGN="center" VALIGN="TOP"><A HREF="MyPage.html">
<IMG SRC="../images/MyImage.gif" ALT="MyPage"
BORDER=0 HEIGHT=118 WIDTH=85 ALIGN="ABSMIDDLE"
onMouseOver="showtrail('../images/MyImage.gif','Mypage','Mypage description.','','','1',203);"
onMouseOut="hidetrail();"></A></TD>
Can i modify NETQUOTEVAR:SECTIONIMAGE and add the onmouseover and onmouseout comands ? Is this possible?

Simon.

Bruce

14-Oct-2005, 10:22 AM

Hi,

You can add the commands to the template and save it to reflect the changes you require. Please make sure you make a backup of the template before proceeding with making changes.

Kind regards,

missy

14-Oct-2005, 10:41 AM

If you apply the changes to the template though, are you not going to have to hard code every mouse over image everytime? As Actinic will not know what to use as mouseover image. I'm not sure how otfen you change your sections, but if you are like me, thats its going to be a real pain to maintain. Also, if you are hard coding this into the template, arn't you going to run into problems if you want to use the same template for any other sections? Won't you have to use a new template for each section? Sorry to butt in, and if I am mising the point, but it just seemed strange to me, and if it works differently I would like to understand it.

Cheers
Amy

Bruce

14-Oct-2005, 11:22 AM

Hi Amy,

You got me there, I should have been a bit more specific, you will also have to create a couple of CUSTOMVAR's in Advanced | Custom Properties and in the properties tab of the section declare the CUSTOMVAR , in the value field provide the image that you wish to use. In the code you will need to refrence the CUTOMVAR:XXXX (whatever you name it) for the onMouseOver function. This will negate the need to constantly change the coding in the template or use different templates for each section.

Kind regards,

simonwar

14-Oct-2005, 12:45 PM

Hi both,

Just so that you don't think I'm ignoring you i am going to try the following, where CUSTOMVAR:HOVERIMAGE, is the new image, and all other variables are already in place.

<TD ALIGN="center" VALIGN="TOP">
<A HREF="NETQUOTEVAR:SECTIONLINK" onMouseOver="showtrail('CUSTOMVAR:HOVERIMAGE','NETQUOTEVAR:SECTIONNAME','NETQUOTEVAR:SECTIONTEXT','','','1',203;" onMouseOut="hidetrail();">NETQUOTEVAR:SECTIONIMAGE</A></TD>

Will get back to you in a bit when I've tried it.

Cheers, Simon.

simonwar

14-Oct-2005, 01:22 PM

The template i had to modify was Act_SectionNavImage.html.

This now looks like;

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP
ALIGN="ABSMIDDLE" title="" onMouseOver="showtrail('CUSTOMVAR:HOVERIMAGE','NETQUOTEVAR:SECTIONNAME','NETQUOTEVAR:SECTIONTEXT','','','1',203;" onMouseOut="hidetrail();">


This gives me:

<IMG SRC="../images/hazard/electrical/H010121.gif"
ALT="H010121"
BORDER=0
HEIGHT=111
WIDTH=80

ALIGN="ABSMIDDLE" title="" onMouseOver="showtrail('','NETQUOTEVAR:SECTIONNAME','NETQUOTEVAR:SECTIONTEXT','','','1',203);" onMouseOut="hidetrail();">


but as you can see, the CUSTOMVAR AND NQV's inside the parenthesis do not flush through to become relevant file details.

What I get is what you see in the jpg attachment.

Also, I see another potential problem!

I could not actually duplicate and modify Act_SectionNavImage.html as this is called inside Act_SectionLineImage.html, unless i need a Developer Licence ????

So I copied Act_SectionNavImage.html to Act_SectionNavImage_Original.html and modified the Act_SectionNavImage.html as above.

BUT NOW IT HAPPENS ON ALL MY SECTIONS !

What am I doing wrong ?

Regards, Simon.

Bruce

17-Oct-2005, 11:45 AM

Hi Simon,

Can you tell me if you have 'Use as CUSTOMVAR' selected on the properties grid?

Kind regards,

simonwar

17-Oct-2005, 02:52 PM

Yes, 'Use as CUSTOMVAR' is ticked.

I have attached a screen shot of the Properties Tab.

Simon.

Bruce

18-Oct-2005, 03:57 PM

Hi,

I really dont know why the CUSTOMVAR value is not being filled in. The NETQUOTEVAR's being used will not display on Act_SectionNavImage.html. The variables will only display on the Act_SectionLine.html template. Take a look at the Advanced Users Guide NETQUOTEVAR Dictionary or in the Help Files in Actinic, see Help | 'List of all Templates in Actinic' as only certain NETQUOTEVAR's are suppoted in templates. I have put this to development to have a look at to see how else you could display the mouseover image for the section using a CUSTOMVAR. Will post back as soon as I hear from them.

Kind regards,

simonwar

18-Oct-2005, 05:24 PM

Thanks for your help on this one. Consider this though;

Look at response #6 of this thread.

The HTML is based on an existing Actinic template and I just added the onmouseover and onmouseout commands to existing lines.

If the NQV's work at the start of this HTML, which they do, then the reason they don't work at the later end is to do with something else, is it not ?

Its that something else i am not sure of ?

Simon.
P.S. Where do I find the Advanced Users Guide ?

simonwar

18-Oct-2005, 05:48 PM

I said:
Look at response #6 of this thread.

The HTML is based on an existing Actinic template and I just added the onmouseover and onmouseout commands to existing lines.

If the NQV's work at the start of this HTML, which they do, then the reason they don't work at the later end is to do with something else, is it not ?

Its that something else i am not sure of ? Ignore me, I'm talking out of my ass.

Simon.

jont

18-Oct-2005, 05:55 PM

Where do I find the Advanced Users Guide ?

http://www.actinic.co.uk/support/downloads.htm

Bruce

22-Oct-2005, 06:58 AM

Hi Simon,

There is a possible solution but it can only work if the HTML is compacted ( Design | Options | Miscellaneous | Generation Options | Compact HTML/CGI )

Edit Act_SectionNavImage.html so it looks like...

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP
ALIGN="ABSMIDDLE" title=""

Note everything after title="" has been removed including the '>'.

Edit ActSectionLineBoxes.html Insert the following after NETQUOTEVAR:SECTIONIMAGE

onMouseOver="showtrail('CUSTOMVAR:HOVERIMAGE','NETQUOTEVAR:SECTIONNAME','N
ETQUOTEVAR:SECTIONTEXT','','','1',203;" onMouseOut="hidetrail();">

The IMG tag is now split between 2 templates so this may cause a problem if any other templates try to include Act_SectionNavImage.html. Let me know if this helps.

Kind regards,

simonwar

22-Oct-2005, 07:35 AM

Hi Bruce,

Thanks for getting back to me.

Modified both so mine look like;


<IMG SRC="NETQUOTEVAR:IMAGEFILE"
ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP
ALIGN="ABSMIDDLE" title=""

and




<DIV ALIGN="LEFT">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="thinred2">
<tr>
<td height="20" class="boxheader">  <span class="actsmallheading"><strong><a href="NETQUOTEVAR:SECTIONLINK" class="boxlink">NETQUOTEVAR:SECTIONNAME</a></strong></span></td>
</tr>
<tr>
<td><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD VALIGN="top"> <A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE onMouseOver="showtrail('CUSTOMVAR:HOVERIMAGE','NETQUOTEVAR:SECTIONNAME','N
ETQUOTEVAR:SECTIONTEXT','','','1',203;" onMouseOut="hidetrail();"></A>
</TD>
<TD VALIGN="top">NETQUOTEVAR:SECTIONTEXT </TD>
</TR>
</TABLE></td>
</tr>
</table>

</DIV>
NETQUOTEVAR:NEXT



When I preview this I get :

<A HREF="M010101.html"><Actinic:TEMPLATE type="begin" filename="C:\Program Files\Actinic v7\Sites\Site1\Act_SectionNavImage.html"/>

<IMG SRC="../images/mandatory/eyeprotect/M010101.gif"
ALT="M010101"
BORDER=0
HEIGHT=118
WIDTH=85

ALIGN="ABSMIDDLE" title=""
<Actinic:TEMPLATE type="end" filename="C:\Program Files\Actinic v7\Sites\Site1\Act_SectionNavImage.html"/></A>

As if ActSectionLineBoxes.html has no input on the generation of the code ?

IMPORTANT : Before we go any further

I mentioned previously that the effect was happening on all Section entries at all section and subsection levels, and that unlike most templates in Actinic, i could not COPY and SAVE AS a new file and call that new file for Sections that i wanted the effect on.

As I do not want this effect at all levels we need to establish if i can apply the effect when i want to, else I would rather manually manage the effect later.

What I was thinking was to enter the code in  onto Act_SectionLineImage.html, and manually modify the appropriate content later.

So my Act_SectionLineImage.html would read


<IMG SRC="NETQUOTEVAR:IMAGEFILE"
ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP
ALIGN="ABSMIDDLE" title="">


What do you think ?

Obviously with approximately 300 items to update, its a bit of a chore, but i can balance that decison with its true worth.

Any panacea's welcomed, else we could quit while we are ahead'ish.

Over to you, Simon.

Bruce

26-Oct-2005, 05:25 AM

Hi,

With this work around you will not be able to define seperate section line templates for the varoious sections, so if you want the effct to be only one certain sections, it would be better for you to manage the effect manually.

Kind regards,

bangers

26-Oct-2005, 09:07 AM

Why not just create a CUSTOMVAR for the text you use as a prefix. Good pratcie when using rollover effects is to create 2 states of the image. I tend to use a suffix of 2 but if you were to use this idea you would have to use a prefix.

Example: exampleimage.jpg & 2_exampleimage.jpg.

Using this method would save loads of time as you wouldn't have to add the rollover image for every product under the properties tab. Instead you could simply set the CUSTOMVAR once under design>site defaults. Providing your rollover images are always the same format and the same name (wthout the prefix).

If your CUSTOMVAR was CUSTOMVAR:ROLLOVERPREFIX The html code would look something like this:

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP
ALIGN="ABSMIDDLE" title="" onmouseover="this.src='CUSTOMVAR:ROLLOVERPREFIXNETQUOTEVAR:IMAGEFILE'"
onmouseout="this.src='NETQUOTEVAR:IMAGEFILE'">


Under design>site defaults just set up CUSTOMVAR:PREFIX and set the value to "2_" if that is the prefix you want to use.

That should work,
regards
Bangers

simonwar

25-Jun-2006, 09:28 AM

Bangers,

Apologies for not picking up on your reply until now, but I have been ploughing through the guts of my site, however ....

I haven't tried it yet but your solution seems much better than what I was intending to attempt.

It looks easier and should overcome the problem I had with rollover images showing on ALL section levels, when I modified the Act_SectionImage template.

Q. We were having problems with CUSTOMVAR's and NQV's flushing into code in this template, (see replies further up this thread). We couldn't resolve why, have you had this problem ?

Will spend an hour or three on this later.

Appreciated, Simon.