Library code snippets
Creating Rollover effects
This is probably the most common use of Javascript. There are countless ways to get this working, but I present one that I use frequently. This script like many of my other ones rely on numbered image files. Make images with names such as org0.jpg, org1.jpg and org2.jpg. These would be initially displayed. Get 3 more files named new1.jpg, new2.jpg and 3.jpg which would be the files displayed when the mouse is over the original images.
<SCRIPT LANGUAGE = "JavaScript">
<!--
function new_img(no){
document.images[no].src="new"+no+".jpg";
}
function org_img(no){
document.images[no].src="org"+no+".jpg";
}
-->
</SCRIPT>
<BODY>
<IMG SRC="org0.jpg" onMouseOver="new_img(0)" onMouseOut="org_img(0)">
<IMG SRC="org1.jpg" onMouseOver="new_img(1)" onMouseOut="org_img(1)">
<IMG SRC="org2.jpg" onMouseOver="new_img(2)" onMouseOut="org_img(2)">
</BODY>
Alternatively in case you want to change an image when clicked on it use the
following script
<SCRIPT LANGUAGE = "JavaScript">
<!--
function change_img(index){
document.images[index].src = "N.jpg";
}
-->
</SCRIPT>
<BODY>
<A HREF="JavaScript: change_img(0)"><IMG SRC="I.jpg"></A>
</BODY>
Related articles
Related discussion
-
An old chestnut: Scrolling DIVs. Can I use onmouseover/onmouseout?
by Skunk (1 replies)
-
code highlighting using jquery
by pjm (1 replies)
-
Problem when using TemplateField and ImageButton
by mhuff84 (14 replies)
-
dropdownlist for country,state and city
by jack_tom (2 replies)
-
popup window in vb.net... how it's work?..
by yf2009 (6 replies)
Related podcasts
-
jQuery in ASP.NET
In this episode Chris Brandsma, Rick Strahl, Dave Ward, Bertrand Le Roy, Scott Koon, and Steven Harman discuss Microsoft's jQuery in ASP.NET announcement.This episode of the Alt.NET Podcast is brought to you by LLBLGen Pro, the most mature O/R mapper and code generator out there.Are you loo...
Events coming up
-
Oct
28
Web Standards Group (Sydney)
North Sydney, Australia
TBA
This thread is for discussions of Creating Rollover effects.