# Rollover text

**URL:** <https://forum.kirupa.com/t/rollover-text/23423>\
**Category:** flash\
**Created:** [June 17, 2003, 8:18pm UTC](https://forum.kirupa.com/t/rollover-text/23423 "2003-06-17T20:18:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tekoer](https://avatars.discourse-cdn.com/v4/letter/t/ecccb3/32.png) [@tekoer](https://forum.kirupa.com/u/tekoer)\
**Post date:** [June 17, 2003, 8:18pm UTC](https://forum.kirupa.com/t/rollover-text/23423/1 "2003-06-17T20:18:26Z")

</div>

Hey everyone. I need some help. I want to load dynamic text and then make a rollover link on it like on the gif.  
So when you put your mouse over it it will be highlighted with a box. Is it possible to make it easy without adjusting everything manually?  
If not please explain what would be the easiest way.  
Thx

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 17, 2003, 8:39pm UTC](https://forum.kirupa.com/t/rollover-text/23423/2 "2003-06-17T20:39:56Z")

</div>

Doing something like that would require some kind of CSS, but unfortunately you can’t apply CSS to dynamic text in flash.

What I would do is create the black box, convert it to a movieclip symbol. Next apply this action to that script so that it will remain invisible.[AS]on ClipEvent(load){  
this.\_visible = false;  
}[/AS]

Next apply the rollOver script to that movieclip symbol as well:[AS]on (rollOver){  
this.\_visible = true;  
}  
on (rollOut){  
this.\_visible = false;  
}[/AS]

So every time you roll over that invisible black box, it will appear. Just place it over the dynamic text and you’re done.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 17, 2003, 9:57pm UTC](https://forum.kirupa.com/t/rollover-text/23423/3 "2003-06-17T21:57:51Z")

</div>

Or you could put your your textfield inside a movie clip symbol and use this…

[AS]TextField.prototype.rollChange = function(txtColor, bgColor) {  
this.textChange = new TextFormat();  
this.textChange.color = txtColor;  
this.background = true;  
this.backgroundColor = bgColor;  
this.setTextFormat(this.textChange);  
};  
myMovieClip.onRollOver = function() {  
this.myTextBox.rollChange(0xFFFFFF, 0x000000);  
};  
myMovieClip.onRollOut = function() {  
this.myTextBox.rollChange(0x000000, 0xFFFFFF);  
};[/AS]

Where myMovieClip is the movie clip symbol that contains the textField and myTextBox is the text fields instance name.

These actions go on a frame that is on the same timeline as the movie clip symbol.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 18, 2003, 9:15am UTC](https://forum.kirupa.com/t/rollover-text/23423/4 "2003-06-18T09:15:20Z")

</div>

thx guys!  
the first one is simple and smart 😉  
the other one is a bit tricky since i am a noob on  
actionscript. could you explain a bit more or maybe  
post a simple .fla ?  
thx!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 18, 2003, 7:44pm UTC](https://forum.kirupa.com/t/rollover-text/23423/5 "2003-06-18T19:44:28Z")

</div>

Ok, lemme comment my code then…

[AS]  
//prototype function to change the color of the text and background color of the textfield  
//txtColor is the parameter of the text color  
//bgColor is the parameter of the background color  
TextField.prototype.rollChange = function(txtColor, bgColor) {  
//create new TextFormat to change font color  
this.textChange = new TextFormat();  
//set textBox font color to the txtColor parameter of the function  
this.textChange.color = txtColor;  
//set the textBox background value to true (so it has one)  
this.background = true;  
//set the background color to be the value of the bgColor parameter of the function  
this.backgroundColor = bgColor;  
//set the TextFormat to this textBox to the font color can be changed  
this.setTextFormat(this.textChange);  
};  
//when your movie clip is rolled over  
myMovieClip.onRollOver = function() {  
//target the textbox and call the function  
//0xFFFFFF = white, 0x000000 = black (hex color values required)  
this.myTextBox.rollChange(0xFFFFFF, 0x000000);  
};  
//when you roll off of your moviec lip  
myMovieClip.onRollOut = function() {  
//target the textbox and call the function again  
//this time change the font color to black and the background color to white  
this.myTextBox.rollChange(0x000000, 0xFFFFFF);  
};[/AS]

Prototype are object oriented functions, in this case the object is TextField (TextField.prototype…)

You can read more on them here…

[http://www.kirupa.com/developer/actionscript/tricks/prototypes.asp](http://www.kirupa.com/developer/actionscript/tricks/prototypes.asp)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 18, 2003, 7:53pm UTC](https://forum.kirupa.com/t/rollover-text/23423/6 "2003-06-18T19:53:01Z")

</div>

Heres an example file…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:34pm UTC](https://forum.kirupa.com/t/rollover-text/23423/7 "2003-06-19T15:34:01Z")

</div>

thanx dude!  
very kind of you to help out.  
cheers

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:56pm UTC](https://forum.kirupa.com/t/rollover-text/23423/8 "2003-06-19T15:56:42Z")

</div>

No problem 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 4:44pm UTC](https://forum.kirupa.com/t/rollover-text/23423/9 "2003-06-19T16:44:55Z")

</div>

Here is a slightly “optimized” version…  
[AS]textChange = new TextFormat();  
TextField.prototype.rollChange = function(txtColor, bgColor) {  
textChange.color = txtColor;  
this.backgroundColor = bgColor;  
this.setTextFormat(textChange);  
};  
myMovieClip1.myTextBox.background = true;  
myMovieClip1.myTextBox.text = “This is item 1, rollOver me”;  
myMovieClip2.myTextBox.background = true;  
myMovieClip2.myTextBox.text = “This is item 2, check the new colors”;  
myMovieClip1.onRollOver = function() {  
this.myTextBox.rollChange(0xFFFFFF, 0x000000);  
};  
myMovieClip1.onRollOut = function() {  
this.myTextBox.rollChange(0x000000, 0xFFFFFF);  
};  
myMovieClip2.onRollOver = function() {  
this.myTextBox.rollChange(0xFF0000, 0xE6E6E6);  
};  
myMovieClip2.onRollOut = function() {  
this.myTextBox.rollChange(0x000000, 0xFFFFFF);  
};[/AS]

I defined the new TextFormat and set the backgrounds of the textboxes to true outside of the function. Since this really only had to be done once there wasn’t much reason to keep doing it over and over.

It works either way though 😛