MouseOver Help

by Jason K. Pontrello

Here's some help for a single image mouseover.
Copy this code directly and change the parts that are colored.
Red and purple code show corresponding sections.
Remember that both peaks and atoms need to be correlated.

<html>
<head>
<title>H NMR spectral correlation</title>
</head>
<body bgcolor="#ffffff">

<script language="JavaScript">

bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
ver = "other";
if ((bName == "Netscape" && !(bVer < 3))
|| (bName == "Microsoft Internet Explorer" && !(bVer < 4))) ver = "good";

if (ver == "good") {

hAoff = new Image();
hAoff.src = "spec.GIF";
hAon = new Image();
hAon.src = "specA.GIF";

hBoff = new Image();
hBoff.src = "spec.GIF";
hBon = new Image();
hBon.src = "specB.GIF";

}

Here, "spec.GIF" represents the black and white standard image of the molecule and spectra. "specA.GIF" represents the same image with one group of hydrogens AND corresponding peak identified. Then "specB.GIF" represents the same image with the second group of hydrogens and corresponding peak identified. The terms "hA " and "hB" are used to define the two groups.

function rollon(imgName) {
if (ver == "good") {
document["hydrogens"].src = eval(imgName + "on.src");
}
}

function rolloff(imgName) {
if (ver == "good") {
document["hydrogens"].src = eval(imgName + "off.src");
}
}

</script>

<body>

The previous code is written with the help of WebMap. This program is located in the chemh215 filespace in the folder AminTools. This program allows you to open your black and white version of the image (in my case, "spec.GIF") and to identify coordinates. Choose the rectangle selection tool and "box out" the region around your first peak where you want the mouseover to work. Then define that region as the correspoding image (in my case, "specA.GIF") in the window on the right side of the screen that is currently displaying "undefined". Now, "box out" the hydrogens (or carbons) that correspond to that same peak. Define the hydrogens (or carbons) as the same image ("specA.GIF). When you have done this for all of your hydrogens (or carbons), then choose "Export as text" and save the file. Now you can open the text file and select, copy, and paste the coordinates for everything into the above code. Make sense?

Once you understand how to put this together, you can imagine a lot of variations that you can do. You don't have to have the same image representing the peak and corresponding atoms. Since the mouseover is changing the standard black and white image to an image that you have altered, you can imagine various ways to "alter" the image. You are certainly able to include text if you want. Also, notice the links that are in the code. DO NOT REMOVE the links; otherwise the code will not work as written. But, you can use them to your advantage as far as how to present the expansions of spectra that you have been given. So, BE CREATIVE!!!