Link text rollover effect
You may want to make link text in your application change style or hilite when the user rolls over the text. This lesson will show you how.
The mouseMove message
Our example depends on the "link" text style, which creates grouped text. A piece of text with its textStyle set to "link" is treated as a single block by certain LiveCode functions. This makes the grouped text handy to use for hypertext or "clickable text" features.
Creating the stack
In this example we need a new stack with a field on it. Then we need some text to work with.
Setting the text style
There are 2 ways to set the textStyle of some text to "link". The first is to hilite the text and then choose Link from the Text Menu, or you can set the textStyle of a chunk of text from the message box.
set the textStyle of word 11 of field "text" to "link"
Note: LiveCode automatically underlines grouped text and changes its color. You can remove these appearance changed in the stack's Property Inspector by turning off "Underline links" and setting the Link Colors in the Colors pane.
Hiliting the links on roll-over
We will hilite the links in our field by using a mouseMove handler to check whether the text the mouse pointer is over is a "link". If it is we hilite the text.
The first thing the mouseMove handler does is to check to see whether there is already some hilited text that needs to be unhilited. Then it goes on to hilite the grouped text the mouse is over (if any), it does this by setting the backgroundColor property of that text group to yellow.
The mouseChunk function
The mouseChunk function returns a chunk expression describing the position within the field of the text the mouse is over eg
char 14 to 24 of field 1
Text which has been grouped together using the "link" text style is returned as a single chunk, so whatever part of the link text the mouse is over it will return the same chunk expression.
The mouseMove handler
Our mouseMove handler will use the mouseChunk function and the textStyle of the mouseChunk to detect whether the mouse pointer is over a link, if it is then the section of text is hilited by setting its backgroundColor property.
The chunk of hilited text is then stored in a variable so it can be checked later to see if there is currently hilited text that needs to be unhilited.
Add this code to the card script.
local storedHilitedChunk, overChunk on mouseMove put the mouseChunk into overChunk ## first unhighlight the "old" phrase if necessary: if storedHilitedChunk is not empty and storedHilitedChunk is not overChunk then set the backgroundColor of storedHilitedChunk to empty put empty into storedHilitedChunk end if ## highlight if the text under the mouse is linked: if overChunk is not empty then if the textStyle of overChunk is "link" then set the backgroundColor of overChunk to "yellow" ## saved for later unhighlighting put overChunk into storedHilitedChunk end if end if pass mouseMove end mouseMove
The mouseLeave handler
The mouseLeave message is sent to an object when the mouse pointer moves outside it's boundaries. In this case we will use a mouseLeave handler to do some cleaning up and ensure all the text in the field is unhilited.
Add this code to the card script.
on mouseLeave ## unhighlight any currently highlighted text: if storedHilitedChunk is not empty then set the backgroundColor of storedHilitedChunk to empty put empty into storedHilitedChunk end if pass mouseLeave end mouseLeave