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

The mouseMove message is sent to the object the mouse pointer is over whenever the user moves the mouse. When the mouseMove messages is sent to an object it triggers the mouseMove handler.

Grouped Text

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

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

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

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

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

7 Comments

John Russell

You need to help a beginner like me by giving advice on where this info gets entered. I'd guess the card script using 'on openCard', but please give feedback. Thanks.

Hanson Schmidt-Cornelius

Hi John,

well, it really depends on where you would like the messages to be handled.

You could handle them on the card, but if you wanted the scope of the actions to be specific to one the text field, then you could also place the code in the script of the text field. This would allow you to have different text fields with different behaviours in your application. Then again you may want the behaviour to apply to a number of text fields, but not all, in which case you could create a group and place the code in the group that includes all text fields that should share the behaviour.

The following lesson provides more information on the message path and should give you an idea of what is possible: http://lessons.runrev.com/s/lessons/m/4071/l/11787

Kind Regards,

Hanson

iqbal

Hi I lost the link of Flower project called Jackie's garden. could you please give me the link again. it is like this. My friend Jackie loves ..... I prefer the azaleas.

Hanson Schmidt-Cornelius

Hi Iqbal,

it would be great if you could tell us who gave you the link, but without that I am only guessing here. The closest I could find is the following link:

http://jacque.on-rev.com/codebits/flowerscgi.irev

I hope that is what you are looking for.

Kind Regards,

Hanson

iqbal

thanks for the link Hanson.

Lars

Please help. I get the following error message: "field "text": execution error at line n/a (Chunk: error in object expression) near "storedHilitedChunk", char 1" when I try to execute the "Link Text Rollover Effect" example. I am new to LiveCode, so it might be something obvious that I have missed.

Hanson Schmidt-Cornelius

Hi Lars,

the problem you describe indicates that you may have a syntactical error in the code you are trying to run.
If you are still having problems, then please leave a comment with the line of code that is causing the problem and I can get back to you.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment