Is there a way to immediately load an image after another image so that the first image changes to the second after the image has already changed once? Or is there a better way to aproach the different links by making them separate images that load afterwards?
To get a better idea of what I need go to
http://rmv17.topcities.com/.
Thanks in advance!
Here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Adobe GoLive 6</title>
<script language="Javascript" type="text/javascript">
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
imgRed = new Image();
img1.src = "home.gif";
img2.src = "resource.gif";
img3.src = "search.gif";
imgRed.src = "../images/pagesturnbook.gif";
}
else {
img1 = "";
img2 = "";
img3 = "";
imgRed = "";
document.roll = "";
}
var rolled = false; // Flag
function rollImage()
{
if (!rolled)
{
var img = document.getElementById("roll");
img.src = imgRed.src;
img.setAttribute("usemap","#roll_map");
rolled = true;
}
}
</script>
<LINK REL="SHORTCUT ICON" HREF="../images/favicon.ico">
</head>
<body bgcolor="#e0e0e0">
<map name="roll_map" id="roll_map">
<area shape="rect" href="index.html" COORDS="39,53,183,74" alt="Business and Finance" />
<area shape="rect" href="search.html" COORDS="52,99,171,121" alt="About the authors" />
<area shape="rect" href="business.html" COORDS="71,148,152,169" alt="Buy a copy" />
<area shape="rect" href="business.html" COORDS="257,51,335,71" alt="Buy a copy" />
<area shape="rect" href="business.html" COORDS="238,99,353,118" alt="Buy a copy" />
<area shape="rect" href="business.html" COORDS="227,147,365,167" alt="Buy a copy" />
</map>
<a onmousedown="rollImage();"><img src="../images/busframe.gif" id="roll" border="0" name="roll" alt="Business"/></a>
</body>
</html>
Before you post, read our: 
