Logo         Community
  Trog
Services
The Company
Community
Columns
Your Account
Contact Us
 
 
Rough Guide To The DOM (part 2)
Use the new DOM for image swaps, table generation, frame navigation and form validation

| Making The Swap() |

The first item on the agenda today is an illustration of how you can use the DOM to accomplish one of the most popular dHTML applications - the image swap. Take a gander at the following HTML document:


<html>
<head>
</head>

<body>

<a href="http://www.melonfire.com/" onMouseOver="javascript:imageSwap();"
onMouseOut="javascript:imageSwap();"><img id="logo" src="logo_n.gif"
width=50 height=50 border=0></a>

</body>
</html>


Now, I've set this up so that "mouseover" and "mouseout" events on the image are handled by the JavaScript function imageSwap(). This function is responsible for swapping the image each time an event occurs - so let's take a look at it.


<script language="JavaScript">
var normal = "logo_n.gif";
var hover = "logo_h.gif";

function imageSwap()
{
var imageObj = document.getElementById("logo");
var imageSrc = imageObj.getAttribute("src");

if (imageSrc == normal)
{
imageObj.setAttribute("src", hover);
}
else
{
imageObj.setAttribute("src", normal);
}
}
</script>


If you remember what I taught you last time, none of this should come as a surprise. I've first defined the "normal" and "hover" state images, and then created a function called imageSwap(), which is called whenever the mouse moves over and out of the image.

The imageSwap() function obtains a reference to the image via its ID, and then obtains the current value of the image's "src" attribute. It then checks the value against the values of the "normal" and "hover" variables, and changes the image source appropriately.


How to do Everything with PHP & MySQL
How to do Everything with PHP & MySQL, the best-selling book by Melonfire, explains how to take full advantage of PHP's built-in support for MySQL and link the results of database queries to Web pages. You'll get full details on PHP programming and MySQL database development, and then you'll learn to use these two cutting-edge technologies together. Easy-to-follow sample applications include a PHP online shopping cart, a MySQL order tracking system, and a PHP/MySQL news publishing system.

Read more, or grab your copy now!


previous page more like this  print this article  next page
 
Search...
 
In trog...
Logging With PHP
Building A Quick-And-Dirty PHP/MySQL Publishing System
Output Buffering With PHP
Date/Time Processing With PHP
Creating Web Calendars With The PEAR Calendar Class
more...
 
In the hitg report...
Crime Scenes
Animal Attraction
Lord Of The Strings
more...
 
In boombox...
Patience - George Michael
Think Tank - Blur
My Private Nation - Train
more...
 
In colophon...
Hostage - Robert Crais
The Dead Heart - Douglas Kennedy
Right As Rain - George Pelecanos
more...
 
In cut!...
American Chai
The Core
Possession
more...
 
Find out how you can use this article on your own Web site!


Copyright © 1998-2018 Melonfire. All rights reserved
Terms and Conditions | Feedback