# Change Picture on Link Hover

**URL:** <https://forum.kirupa.com/t/change-picture-on-link-hover/64410>\
**Category:** flash\
**Created:** [September 15, 2004, 11:44pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410 "2004-09-15T23:44:50Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![shady\_figure](https://avatars.discourse-cdn.com/v4/letter/s/a9a28c/32.png) [@shady\_figure](https://forum.kirupa.com/u/shady_figure)\
**Post date:** [September 15, 2004, 11:44pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/1 "2004-09-15T23:44:50Z")

</div>

I am currently working on a navigation system for my school’s sports page and depending on the link that you rollover, it shows a certain picture. For example, if you had your mouse over the football link, a picture of a football player would fade in and then when you took the mouse off the link, it would fade out. I want it to be like this for every sport… can someone please show me an example of how you would do something like this?

Any help is greatly appreciated, and thanks in advance to anyone who can help me with my 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:** [September 16, 2004, 3:55am UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/2 "2004-09-16T03:55:25Z")

</div>

> [@shady\_figure](#):
>
> I am currently working on a navigation system for my school’s sports page and depending on the link that you rollover, it shows a certain picture. For example, if you had your mouse over the football link, a picture of a football player would fade in and then when you took the mouse off the link, it would fade out. I want it to be like this for every sport… can someone please show me an example of how you would do something like this?
> 
> Any help is greatly appreciated, and thanks in advance to anyone who can help me with my problem.

I have attached something that might help you out here… Hope it works out for you…

---

<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:** [September 16, 2004, 6:24pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/3 "2004-09-16T18:24:44Z")

</div>

Thanks alot, i’ll check it out and i’ll tell you how it goes.

---

<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:** [September 16, 2004, 6:38pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/4 "2004-09-16T18:38:38Z")

</div>

Thats almost exactly what i want, but instead of text showing up, is there any way you could make a picture show up?

---

<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:** [September 16, 2004, 6:40pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/5 "2004-09-16T18:40:10Z")

</div>

Thats almost exactly what i want, but instead of text showing up, is there any way you could make a picture show up? And depending upon what link you hover over, can you make it show different pictures.

Thanks alot.

---

<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:** [September 16, 2004, 8:38pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/6 "2004-09-16T20:38:38Z")

</div>

Yeh sure… I just used text becuase it’s easier on the file size :hugegrin: you could have whatever you wanted to come in there on mouseOver, and even mouseOut… You could have text, graphics, external swf files, etc… In order to have specific links call upon specific tellTarget actions you just create how ever many buttons you need for your nav and then you apply the needed images accordingly… If you have a group of images/link titles in mind zip it up and attach it here if you can host it remotley, or just attach them if the size is small enough…

I will try and provide an example for you to go by in executing your intended task…

I attached a simple example of what I think you want… Should give you enough info on how to do this… If not, just let me know…

---

<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:** [September 16, 2004, 9:24pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/7 "2004-09-16T21:24:10Z")

</div>

alright, that helped a lot more, and here is the layout of what i’m doing so feel free to take a look at it. Also i was wondering…instead of using a button to do it, is there a way you could use regular text to do it?

also, do you have AIM or MSN so we can talk more about this?

---

<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:** [September 16, 2004, 9:38pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/8 "2004-09-16T21:38:10Z")

</div>

not sure what you mean by using text oppose to buttons… but yeh, hit me on AIM ‘JVynil’ minus the ‘’ I should be on around 7:30… well, I am on now, but I will be busy with my kid till around that time… just holla then if that’s cool…

I did this again with three objects (links) which trigger three individual tellTarget actions…

---

<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:** [September 16, 2004, 10:34pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/9 "2004-09-16T22:34:12Z")

</div>

Hi Jvynil, what is the AS to make the image stay in place when clicked on. And when you click on another button that button image appears removing the last image one.

---

<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:** [September 17, 2004, 1:40am UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/10 "2004-09-17T01:40:32Z")

</div>

> [@Gupps](#):
>
> Hi Jvynil, what is the AS to make the image stay in place when clicked on. And when you click on another button that button image appears removing the last image one.

well, using the tellTarget method you would just need to specify a stop(); action on the keyframe in which the selected image was at full opacity. it will automatically change when you select another link if you follow the same AS guidelines for each other image…

at least that is what I would do for something simple like this… I am gonna load another .fla for shady, so check that out if you want…

---

<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:** [September 17, 2004, 2:04am UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/11 "2004-09-17T02:04:20Z")

</div>

Hey shady… here is your link:

[http://www.nstinctdesigns.com/sportsnav\_v1.zip](http://www.nstinctdesigns.com/sportsnav_v1.zip)

Gupps,

I do not think that he wants them to stop here, but that is a good question… I would have to write up some ActionScript to do that… I have no doubt that it can easily be done… If I get to that I will def. let you know what I come up with…

---

<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:** [September 17, 2004, 5:24am UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/12 "2004-09-17T05:24:17Z")

</div>

This is very helpful. Seems like I may be able to apply this to what I’m trying to do [here](http://www.kirupaforum.com/forums/showthread.php?t=70071). I know I need to write some different AS since I only have one button and I want it to basically play the “out” portion before it plays the new “in” portion. If you could help me, I’d really appreciate it.

---

<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:** [September 17, 2004, 2:30pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/13 "2004-09-17T14:30:29Z")

</div>

thanks Jvynil, I would mvery much appreciate it

---

<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:** [September 17, 2004, 9:26pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/14 "2004-09-17T21:26:44Z")

</div>

Thanks alot man, I’m gonna work on it and i’ll hit you up on aim if I need anymore help or to show you what ive done to it.

---

<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:** [September 23, 2004, 4:27pm UTC](https://forum.kirupa.com/t/change-picture-on-link-hover/64410/15 "2004-09-23T16:27:03Z")

</div>

hi jvynil,  
any luck on getting the image to stay in place when clicked on
