Graphic >>> Change Image.

Ajax Editor

Free Scripts

Submit Script

Link to Us

JavaScript Editor

JavaScript tutorial
HTML tutorial
CSS tutorial
JavaScript references
HTML references
CSS references

PR Predictor

Script Categories

Background

Buttons

Calculators

Calendars

Cookies

Date & Time

Equivalents

Forms

Games

Graphic

Links & Tooltips

Messages

Menus & Navigation

Mouse & Cursor

Page Details

Pass Protect

Scrolls

Text Effects

User Details

Miscellaneous

↑
Graphic >>>

It's always neat to dynamically change an image when the user touches it. For this example, There is one image and when you put your cursor on it, it changes to another. If you use this script, be sure to use images of the same size!

Step 1: Add the below code to the <body> section of your page:

Select All


		<script 
		language="javascript"
		type="text/javascript">

		/* Visit http://www.yaldex.com/ 
		for full source code

		and get more free JavaScript, CSS and DHTML scripts! */

		<!-- Begin

		// Preload Images

		image1 
		=
		new
		Image();

		image1.src
		=
		"toad.jpg";

		image2 
		=
		new
		Image();

		image2.src
		=
		"lizard.jpg";

		

		function 
		movepic(img_name,img_src)
		{

		document[img_name].src=img_src;

		}

		// End -->

		</script>

		<center>

		<!-- Be sure to give each image a 
		name! (<img name="button">)

		Include that name in the onmouseover/onmouseout tags! -->

		<A
		HREF="http://myplace.50g.com"
		

		onMouseOut="movepic('button','toad.jpg')"

		onMouseOver="movepic('button','lizard.jpg')">

		<IMG
		NAME="button"
		SRC="toad.jpg"
		ALT="Image"
		width="333"
		height="190"></A>

		</center>

Step 2: The script uses two images as part of its interface. You can create your own, or use the two below (resized for easier download):

(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).

→ NCEdCloud - My.NcedCloud.org IAM Service - NCEDCloud Login

©