# Hover Captions Problem

**URL:** <https://forum.kirupa.com/t/hover-captions-problem/198256>\
**Category:** flash\
**Created:** [August 23, 2006, 3:22pm UTC](https://forum.kirupa.com/t/hover-captions-problem/198256 "2006-08-23T15:22:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![aswilkins](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@aswilkins](https://forum.kirupa.com/u/aswilkins)\
**Post date:** [August 23, 2006, 3:22pm UTC](https://forum.kirupa.com/t/hover-captions-problem/198256/1 "2006-08-23T15:22:07Z")

</div>

Hi!

I’ve just created some hover captions after following the tutorial on this site ([http://www.kirupa.com/developer/mx2004/hover\_captions.htm](http://www.kirupa.com/developer/mx2004/hover_captions.htm)). It works really well.

At the moment all of my buttons have the instance names suggested (b1, b2, b3,…). I now want to create a second set of buttons with instance names of c1, c2, c3,… . They will also need hover captions but the captions for these buttons needs to appear on the **left** of the cursor as otherwise the captions will be obscured. I want the captions for the first set of buttons to remain on the right. I looked through the code Kirupa provided, and presume there needs to be an addition to the if statement to set the x and y offset. Something like ‘if button is called c2 the caption should be on the left, else put it on the right’ sort of thing. I include the if statement below:

```auto

if ((bName._width+bName._x+cap._width)>Stage.width) {
xo = -2-cap._width;
yo = -17;
} else {
xo = 2;
yo = -17;
}

```

And the complete code:

```auto

b1.onRollOver = function() {
captionFN(true, "Homepage ", this);
this.onRollOut = function() {
captionFN(false);
};
};
b2.onRollOver = function() {
captionFN(true, "About Me", this);
this.onRollOut = function() {
captionFN(false);
};
};
b3.onRollOver = function() {
captionFN(true, "My Work", this);
this.onRollOut = function() {
captionFN(false);
};
};
b4.onRollOver = function() {
captionFN(true, "Flash Games", this);
this.onRollOut = function() {
captionFN(false);
};
};
b5.onRollOver = function() {
captionFN(true, "Quizzes", this);
this.onRollOut = function() {
captionFN(false);
};
};
b6.onRollOver = function() {
captionFN(true, "Contact Information", this);
this.onRollOut = function() {
captionFN(false);
};
};
captionFN = function (showCaption, captionText, bName) {
if (showCaption) {
_root.createEmptyMovieClip("hoverCaption", this.getNextHighestDepth());
cap.desc.text = captionText;
cap._width = 7*cap.desc.text.length;
cap._alpha = 75;
//
if ((bName._width+bName._x+cap._width)>Stage.width) {
xo = -2-cap._width;
yo = -17;
} else {
xo = 2;
yo = -17;
}
hoverCaption.onEnterFrame = function() {
cap._x = _root._xmouse+xo;
cap._y = _root._ymouse+yo;
cap._visible = true;
};
} else {
delete hoverCaption.onEnterFrame;
cap._visible = false;
}
};

```

Thanks in advance! 🙂