Learn how to create a mouseover / rollover effect for images in JavaScript.
Tutorial Details:
Code Beach - Mouseover / Rollover Effect in JavaScript
First see a ROLLOVER demo0
This is what you often see on various web sites - when you hover your cursor over an image, it metamorphoses into some other image. For instance, a simple two-dimensional button changing into three-dimensional with shadow underneath. We generally have such buttons in a navigation bar, and we have learnt how to use a common navigation bar using the Server Side Inculdes .
What we want to do here is, change the look of the image when we take the cursor on that image. Before we proceed, using your favorite image editor, prepare two images of identical dimensions - we are going to use them here. You already know that you can insert an image in a web page by using:
And with a link,
We want your_image.gif to change into something else when we take the cursor to the link mylink.html .
As mentioned above, make two images of same dimensions, and name them as image_in.gif and image_out.gif . Here, image_out.gif should be the normal link, without the cursor on it, and image_in.gif should be the image you want to display when the cursor is hovering over the link, that is, when the cursor takes the shape of a hand with a pointing finger.
Having images made, let us see how the JavaScript looks:
and the HTML code that uses this JavaScript to render the rollover effect:
The tags onMouseOver and onMouseOut invoke the function rollover() , where "n" is the index number of the image you want changed.
Read
Tutorial at: Click here to view the tutorial
Rate Tutorial: Javascript Links and Buttons Mouseover / Rollover Effect in JavaScript Tutorial
View Tutorial: Javascript Links and Buttons Mouseover / Rollover Effect in JavaScript Tutorial
Related
Tutorials:
 Commercial applications with Java
Commercial applications with Java
|
Build
servlet-based enterprise Web applications - JavaWorld - December
1998
Build
servlet-based enterprise Web applications - JavaWorld - December
1998
|
Tip 80: Resize
applets within browser frames - JavaWorld
Tip 80: Resize
applets within browser frames - JavaWorld
|
Apple announces Java 2 plans at MacWorld
Apple announces Java 2 plans at MacWorld
|
JDK 1.2 breaks the Java sound barrier -
JavaWorld August 2000
JDK 1.2 breaks the Java sound barrier -
JavaWorld August 2000
|
Clean up your wire protocol with SOAP, Part 3 - JavaWorld June
2001
Clean up your wire protocol with SOAP, Part 3 - JavaWorld June
2001
|
Pushlets: Send
events from servlets to DHTML client browsers
Pushlets: Send
events from servlets to DHTML client browsers
|
Customize
SwingWorker to improve Swing GUIs
Customize
SwingWorker to improve Swing GUIs
|
libbraille
Libbraille is a computer shared library which makes it possible to easily develop for Braille displays. It provides a simple API to write text on the terminal, directly draw dots, or get the value of keys pressed on the Braille display.
|
JDBC scripting, Part 2
JDBC scripting, Part 2
Programming and Java scripting in JudoScript
Summary
JudoScript is a rich functional scripting language, and an easy and powerful general programming and Java scripting language.
JudoScript's power comes from its synergy of
|
Getting Groovy with XML
XML sucks. Oh, wait, XML rocks. Well, it actually does a lot of both. It rocks because of all of the editors, validators, and tools written for it. XML has all but replaced any notion of a new custom text-based data language. But it also sucks because it\
|
Understanding the Interplay Between Utility Classes and Static Initialization
Java is an OO language, which means much of the functionality of a Java application is encapsulated into cohesive classes that can be instantiated and acted upon.
|
A well-behaved Jetspeed portlet
This article presents a working example of how to construct a Jetspeed portlet that runs efficiently, adheres to the Model 2 architecture, and, by not interfering with additional portlets, plays well with others. In addition, I demonstrate some simple way
|
Here is the jzChat V1.0 servlet (free).
This servlet performs a 100% HTML/JavaScript chatroom. Guest users just have to enter a nickname for chatting. They can choose chat's look&feel. Root user chooses chatroom's name and subject.
|
J2J - Java to JavaScript integration.
It is a development tool lets you to integrate Java classes and JavaScript within your HTML pages. The main idea behind this product is how to call methods of Java classes right from JavaScript functions.
|
ColdCafe ver 1.2
ColdCafe is a macro-processor servlet. This servlet parses html pages and replaces some predefined elements with their values. It is not a new language like JSP, it is just a set of html-preprocessing that keep your hands free for using any web-authoring
|
Welcome to Java Developers paradise!
Welcome to Java Developers paradise!
T his site contains many quality Java, JSP, RMI, MySQL downloads, tutorials, source codes and links to other java resources. We have large number of links to the tutorials on java which will help you learn java
|
Client Side Address Validation in Struts
Client Side Address Validation in Struts
Client Side Address Validation in Struts
In this lesson we will create JSP page for entering the address and use the functionality provided by Validator Framework to validate the user data on the browser.
|
Struts Validator Framework Tutorial with Example
Struts Validator Framework Tutorial with Example
Struts HTML Tags
Struts Validator Framework
This lesson introduces you the Struts Validator Framework. In this lesson you will learn how to use Struts Validator Framework to validate the user
|
JavaServer Faces in Action, Chapter 8
Shows how to build a static Login page with JavaServer Faces and JSP technology by importing the proper tag libraries, and adding HtmlGraphicImage and HtmlOutputText components.
|
|
|
|
