# Rollovers with external images

**URL:** https://forum.kirupa.com/t/rollovers-with-external-images/261648
**Category:** Uncategorized
**Created:** [May 29, 2008, 2:30pm UTC](https://forum.kirupa.com/t/rollovers-with-external-images/261648 "2008-05-29T14:30:15Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![sabresfan](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@sabresfan](https://forum.kirupa.com/u/sabresfan)
#### Post date: [May 29, 2008, 2:30pm UTC](https://forum.kirupa.com/t/rollovers-with-external-images/261648/1 "2008-05-29T14:30:15Z")

</div>

im trying to make a flash rollover that dynamically inserts a jpg. here’s what i’ve got so far: [http://www.ronniesalvato.com/help](http://www.ronniesalvato.com/help)

right now i’d just like to fix what i’ve been able to accomplish thus far. i created a fading rollover that in flash that uses an external image.

the main problem is that there is no image when it first loads until i actually rollover with my mouse. after that it appears to function as i would like it to.

ideally it would be nice to be able to use the same .swf in my html multiple times and only have to change the html. i think the javascript so.addvariable command in conjuction with some actionscript can achieve this but i’m not sure how to do it.

here’s the code i used, which is probably all wrong. and i think theres gotta be an easier way to create a simple rollover like the one i have without using 2 before and after .jpgs:

* * *

import fl.transitions._;  
import fl.transitions.easing._;

var images:Array = [“before.jpg”, “after.jpg”]

// image 1  
var image1:Loader = new Loader();  
image1.load(new URLRequest(images[0]));  
addChild(image1);

// image 2  
var image2:Loader = new Loader();  
image2.load(new URLRequest(images[1]));  
image2.alpha = 0;  
addChild(image2);

stage.addEventListener(MouseEvent.MOUSE\_OVER, mouseOverHandler);  
stage.addEventListener(MouseEvent.MOUSE\_OUT, mouseOutHandler);

function mouseOverHandler(e:MouseEvent):void  
{  
image1.alpha = 0;  
image2.alpha = 1.0;  
}

function mouseOutHandler(e:MouseEvent):void  
{  
image2.alpha = 0;  
image1.alpha = 1.0;   
var myTween:Tween = new Tween(image2, “alpha”, Strong.easeIn, 1, 0, 5, false);  
var imageRequest:URLRequest = new URLRequest(“bird.jpg”);

var imageLoader:Loader = new Loader();

imageLoader.load(imageRequest);

## addChild(imageLoader); imageLoader.x = 10; imageLoader.y = 10; imageLoader.addEventListener(MouseEvent.CLICK, doSomething); function doSomething(Event:MouseEvent):void { var \_link:URLRequest = new URLRequest(“[http://www.ronniesalvato.com](http://www.ronniesalvato.com)”); navigateToURL(\_link); } }

thanks to anyone who can steer me in the right direction.