Tool Tips on Focus

tmichael9734
Community Member Posts: 144 ♪ Opening Act ♪
Comments
-
Hi,
Lectora has MouseEnter and MouseExit triggers but does not support focus and blur triggers. However, you can write a page level action that will set focus and blur events of the HTML elements and map them to the MouseEnter and MouseExit actions that you already have. With this, when you tab to the button, focus event will fire and then it will call the MouseEnter action function that you already setup.
Have a look at the sample title and try it out. Especially look at the page action (OnShowRunJS) which does the mapping of focus events to MouseEnter action functions. This approach only works after publishing or when you do Preview in browser. It does not work in Run Mode.
Also, note that button40, button63, etc. in the page action refer to the HTML names of buttons. You can get those by selecting the button, going to Properties tab and hover or click on the small expand arrow in the lower-right corner of the first group of controls.
Hope this fits your needs.
Robert.
-
-
I copied this out of Robert's file:
triv$('button',button40.div).get(0).onfocus = button40onOver;
triv$('button',button40.div).get(0).onblur = button40onOut;
triv$('button',button63.div).get(0).onfocus = button63onOver;
triv$('button',button63.div).get(0).onblur = button63onOut;
triv$('button',button143.div).get(0).onfocus = button143onOver;
triv$('button',button143.div).get(0).onblur = button143onOut; -
Thanks for replying Carl. I didn't see the response until now.
I can't attach awt file so I'll just copy the contexts of FocusAction.awt here:<?xml version="1.0" encoding="UTF-8"?>
<lectoratitle lectorafileversion="18.2" lectoraproductversion="18.2.3" lectoraproductname="Lectora Inspire" lectoraproductcode="LD">
<titledata titletype="standard">
<currentid>1970</currentid>
<currtheme></currtheme>
<language>en</language>
<ribbonpasteoption>0</ribbonpasteoption>
<logpixelsx>96</logpixelsx>
<logpixelsy>96</logpixelsy>
</titledata>
<resourcedata />
<variabledata>
<variable id="1071" referenceobjectid="1068">
<name>Entry_0001</name>
<initialvalue></initialvalue>
<lastupdated>0</lastupdated>
<reserved_variable />
<automatic_variable />
<form_variable />
</variable>
</variabledata>
<objectdefaults />
<objectdata>
<title id="1" center="center" respdesign="true">
<name>FocusAction</name>
<lastupdated>1590079193</lastupdated>
<respprops>
<phoneportrait>
<title pubthisview="true" />
</phoneportrait>
<tabletlandscape>
<title pubthisview="true" />
</tabletlandscape>
<phonelandscape>
<title pubthisview="true" />
</phonelandscape>
<tabletportrait>
<title pubthisview="true" />
</tabletportrait>
</respprops>
<bgcolor>FFFFFF</bgcolor>
<textcolor>000000</textcolor>
<linkcolor>0000FF</linkcolor>
<width>1009</width>
<height>662</height>
<font>
<height>12</height>
<facename>Arial</facename>
</font>
<page id="2" parent="1">
<name>Page 1</name>
<lastupdated>1590079315</lastupdated>
<transitionin>
<transtype>-1</transtype>
<delay>0</delay>
<speed>10</speed>
<effect>0</effect>
</transitionin>
<action id="1146" parent="2" on="show">
<name>OnShowRunJS</name>
<lastupdated>1590079701</lastupdated>
<actionitem actiontaken="runjavascript">
<targetstring>triv$('button',button40.div).get(0).onfocus = button40onOver; triv$('button',button40.div).get(0).onblur = button40onOut; triv$('button',button63.div).get(0).onfocus = button63onOver; triv$('button',button63.div).get(0).onblur = button63onOut; triv$('button',button143.div).get(0).onfocus = button143onOver; triv$('button',button143.div).get(0).onblur = button143onOut;</targetstring>
<browserWnd />
</actionitem>
</action>
<text id="186" parent="2" ontop="false" fixed="false" proportional="false" defaulttext="none">
<name>Text Block</name>
<lastupdated>1590079836</lastupdated>
<possize>
<point>
<x>426</x>
<y>161</y>
</point>
<size>
<cx>200</cx>
<cy>80</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<bordereffect>
<borderweight>1</borderweight>
<linestyle>0</linestyle>
<bordercolor>999999</bordercolor>
<outline>0</outline>
</bordereffect>
<html>span.text186Font1 { font-size:16px; font-family:"Arial", sans-serif; color:#010101;} <p style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;" > <span class="text186Font1" style="background-color:transparent" > &nbsp;</span ></p > </html>
<rtf>{\rtf1\ansi\deflang1033\ftnbj\uc1\deff1 {\fonttbl{\f0 \froman \fcharset0 Times New Roman;}{\f1 \fswiss Arial;}} {\colortbl\red0\green0\blue0 ;\red255\green255\blue255 ;\red0\green0\blue0 ;} {\stylesheet{\f1\fs24\cf0\cb1\ulc0 Normal;}{\cs1\cf0\cb1\ulc0 Default Paragraph Font;}} {\*\revtbl{Unknown;}} \paperw12240\paperh15840\margl1800\margr1800\margt1440\margb1440\headery720\footery720\deftab360\formshade\aendnotes\aftnnrlc\pgbrdrhead\pgbrdrfoot \sectd\pgwsxn12240\pghsxn15840\marglsxn1800\margrsxn1800\margtsxn1440\margbsxn1440\headery720\footery720\sbkpage\pgncont\pgndec \plain\plain\f1\fs24\ql\par} </rtf>
<raw></raw>
<numoflines>1</numoflines>
<numpubbullets>0</numpubbullets>
<textpublishlang>Inherit</textpublishlang>
<marginsize>0</marginsize>
</text>
<textbutton id="40" parent="2" ontop="true" fixed="false" proportional="false" initdisabled="false">
<name>Button</name>
<lastupdated>1590079302</lastupdated>
<possize>
<point>
<x>160</x>
<y>182</y>
</point>
<size>
<cx>120</cx>
<cy>40</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<autosize>0</autosize>
<type>20100</type>
<linestyle>0</linestyle>
<strokewidth>1</strokewidth>
<strokecolor>0963B1</strokecolor>
<text>Button One</text>
<textcolor>FFFFFF</textcolor>
<fontsize>-16</fontsize>
<fontheight>12</fontheight>
<fontstyle>0</fontstyle>
<textalignment>1</textalignment>
<fontfamily>Lucida Sans Unicode</fontfamily>
<handledata>
<controlpoint value="50" />
</handledata>
<shapefillinfo fillstyle="2" gradientangle="270" bevelheight="0" color="085394">
<gradientstop color="0064BB" value="0.000000" />
<gradientstop color="007CE9" value="0.500000" />
<gradientstop color="1994FE" value="1.000000" />
</shapefillinfo>
<action id="45" parent="40" on="mouseenter">
<name>OnMEnterChange</name>
<lastupdated>1590079273</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<targetstring>Button One</targetstring>
<browserWnd />
</actionitem>
</action>
<action id="1564" parent="40" on="mouseexit">
<name>OnMExitChange</name>
<lastupdated>1590079302</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<browserWnd />
</actionitem>
</action>
<type>20100</type>
</textbutton>
<entryfield id="1068" parent="2" ontop="false" fixed="false" proportional="false" formvar="1071">
<name>Entry_1</name>
<lastupdated>1590079759</lastupdated>
<possize>
<point>
<x>162</x>
<y>482</y>
</point>
<size>
<cx>150</cx>
<cy>24</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<numchars>40</numchars>
<default></default>
<bgcolor>FFFFFF</bgcolor>
</entryfield>
<textbutton id="63" parent="2" ontop="true" fixed="false" proportional="false" initdisabled="false">
<name>Button 2</name>
<lastupdated>1590079755</lastupdated>
<possize>
<point>
<x>160</x>
<y>282</y>
</point>
<size>
<cx>120</cx>
<cy>40</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<autosize>0</autosize>
<type>20100</type>
<linestyle>0</linestyle>
<strokewidth>1</strokewidth>
<strokecolor>0963B1</strokecolor>
<text>Button Two</text>
<textcolor>FFFFFF</textcolor>
<fontsize>-16</fontsize>
<fontheight>12</fontheight>
<fontstyle>0</fontstyle>
<textalignment>1</textalignment>
<fontfamily>Lucida Sans Unicode</fontfamily>
<handledata>
<controlpoint value="50" />
</handledata>
<shapefillinfo fillstyle="2" gradientangle="270" bevelheight="0" color="085394">
<gradientstop color="0064BB" value="0.000000" />
<gradientstop color="007CE9" value="0.500000" />
<gradientstop color="1994FE" value="1.000000" />
</shapefillinfo>
<action id="1586" parent="63" on="mouseenter">
<name>OnMEnterChange</name>
<lastupdated>1590079329</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<targetstring>Button Two</targetstring>
<browserWnd />
</actionitem>
</action>
<action id="1585" parent="63" on="mouseexit">
<name>OnMExitChange</name>
<lastupdated>1590079308</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<browserWnd />
</actionitem>
</action>
<type>20100</type>
</textbutton>
<textbutton id="143" parent="2" ontop="true" fixed="false" proportional="false" initdisabled="false">
<name>Button 3</name>
<lastupdated>1590079752</lastupdated>
<possize>
<point>
<x>160</x>
<y>382</y>
</point>
<size>
<cx>120</cx>
<cy>40</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<autosize>0</autosize>
<type>20100</type>
<linestyle>0</linestyle>
<strokewidth>1</strokewidth>
<strokecolor>0963B1</strokecolor>
<text>Button Three</text>
<textcolor>FFFFFF</textcolor>
<fontsize>-16</fontsize>
<fontheight>12</fontheight>
<fontstyle>0</fontstyle>
<textalignment>1</textalignment>
<fontfamily>Lucida Sans Unicode</fontfamily>
<handledata>
<controlpoint value="50" />
</handledata>
<shapefillinfo fillstyle="2" gradientangle="270" bevelheight="0" color="085394">
<gradientstop color="0064BB" value="0.000000" />
<gradientstop color="007CE9" value="0.500000" />
<gradientstop color="1994FE" value="1.000000" />
</shapefillinfo>
<action id="1618" parent="143" on="mouseenter">
<name>OnMEnterChange</name>
<lastupdated>1590079337</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<targetstring>Button Three</targetstring>
<browserWnd />
</actionitem>
</action>
<action id="1617" parent="143" on="mouseexit">
<name>OnMExitChange</name>
<lastupdated>1590079309</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<browserWnd />
</actionitem>
</action>
<type>20100</type>
</textbutton>
</page>
</title>
</objectdata>
</lectoratitle> -
Yessss! It works... Thanks a million Robert and Carl...
The 508 team requested the tips for all tabbed buttons in the header (home, menu, etc.), so I put the OnShow action in the title level, and it worked great on every page.
Many thanks again. Please take care and stay safe,
Therese -
Categories
- 35.8K All Categories
- 108 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 5 The Training Arcade®
- 5 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products