CodeBetter.Com
CodeBetter.Com
RSS 2.0 via Feedburner
           Do you Twitter? Follow us @CodeBetter

Darrell Norton's Blog [MVP]

Fill in description here...

Image Rollovers in ASP.NET

Just found a link on how to do image rollovers in ASP.NET. I remember back in the heady days of '98 when everyone was doing image rollovers, either hand-coding the JavaScript or using Macromedia's product (which at the time produced horrible JavaScript!). The good old days of HomeSite.



Comments

shebert said:

Nice find, Darrell. I'm bookmarking this to check out the source code.
# April 27, 2005 10:48 AM

Pete Nelson said:

Works well, but this method does more of an on-the-fly image load. With large images or a slower connection, the rolled-over image may take a while to load.

Ideally, you'd do something like the following. I'm doing this from memory and my Javascript skills aren't what they used to be, so bear with me as this is just the general idea. :)

Somewhere in your page, you would define an array of images:

var mouseOver = new Array("Home_Over.gif", "Search_Over.gif");
var mouseOut = new Array("Home_Out.gif", "Search_Out.gif");


Then in your image tags...

<img src="Home_Out.gif" onMouseOver="this.src=mouseOver[0]" onMouseOut="this.src=mouseOut[0]">
<img src="Search_Out.gif" onMouseOver="this.src=mouseOver[1]" onMouseOut="this.src=mouseOut[1]">


Using the method above, the browser will load the over/out images in the background and should give better performance when you perform a rollover. With some tweaks to his code, it would be pretty easy to generate the necessary Javascript (Page.RegisterScriptBlock) for this to work within the context of the UserControl.
# April 27, 2005 11:12 AM

Pete Nelson said:

Whooops, should be more like this (which is what I get trying to do it from memory).

var homeOver = new Image();
homeOver.src = "Home_Over.gif";

var homeOut = new Image();
homeOut.src = "Home_Out.gif";

var searchOver = new Image();
searchOver.src = "Search_Over.gif";

var searchOut = new Image();
searchOut.src = "Search_Out.gif";

var overImg = new Array(homeOver, searchOver);
var outImg = new Array(homeOut, searchOut);



<img src="Home_Out.gif" onMouseOver="this.src = overImg[0].src" onMouseOut="this.src = outImg[0].src">
# April 27, 2005 11:34 AM

Jason Row said:

I remember those days as well Darrell. And I saw that Nick Bradbury was causually wondering what will happen to Homesite now that Adobe and Macromedia are planning to merge.
http://nick.typepad.com/blog/2005/04/adobe_acquires_.html
# April 27, 2005 12:26 PM

Dave said:

Dude, I loved HomeSite. I used it for quite awhile for ASP development back in the day.
# April 27, 2005 8:52 PM

darrell said:

Yeah HomeSite was the bomb. I don't know what the Adobe-Macromedia merger will do. Does Adobe have a product that is a serious text editor like HomeSite?
# April 28, 2005 12:27 PM

DotNetKicks.com said:

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# April 11, 2008 1:30 PM
Check out Devlicio.us!