Menu
Seem to be having difficulty making images reduce in opacity to have a “fading” effect with the following coding:
I know all I need to do is modify the “mouseover” options to add “opacity” but can’t seem to figure it out. Have it down in theory, failing miserably with execution.
The site is in two parts, using the <—include–> system. The first group of code is for the actual .js file while the other group of coding is for the actual webpage itself.
.js coding:
<!–
if (document.images) {
img1on = new Image();
img1on.src = “images/rollovers/Heritage2.gif”;
img2on = new Image();
img2on.src = “images/rollovers/Northfield2.gif”;
img3on = new Image();
img3on.src = “images/rollovers/Ridgeway2.gif”;
img4on = new Image();
img4on.src = “images/rollovers/Estates2.gif”;
img5on = new Image();
img5on.src = “images/rollovers/GlenRoyal2.gif”;
img1off = new Image();
img1off.src = “images/rollovers/Heritage1.gif”;
img2off = new Image();
img2off.src = “images/rollovers/Northfield1.gif”;
img3off = new Image();
img3off.src = “images/rollovers/Ridgeway1.gif”;
img4off = new Image();
img4off.src = “images/rollovers/Estates1.gif”;
img5off = new Image();
img5off.src = “images/rollovers/GlenRoyal1.gif”;
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + “on.src”);
document.aptName.src = ‘images/rollovers/’ + imgName + ‘.gif’;
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + “off.src”);
document.aptName.src = ‘images/rollovers/blank.gif’;
}
}
// –>
.asp coding
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html><head>
<!– Begin Nested Table for Property Navbar –><title>properties</title>
</head>
<body>
<table id=”Table2″ bgcolor=”#ffffff” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”950″>
<tbody>
<tr>
<td class=”maintext” align=”left” width=”950″><font color=”black”> Select
a property to view specific information<br><br><br></font><img src=”images/spacer.gif” height=”1″ width=”120″></td>
</tr>
<tr>
<td align=”center” width=”875″> <a href=”heritage.asp” onmouseover=”imgOn(‘img1’)” onmouseout=”imgOff(‘img1’)”> <img style=”border: 0px solid ; width: 175px; height: 175px;” alt=”” src=”images/rollovers/Heritage1.gif” name=”img1″></a>
<a href=”northfield.asp” onmouseover=”imgOn(‘img2’)” onmouseout=”imgOff(‘img2’)”>
<img style=”border: 0px solid ; width: 175px; height: 175px;” alt=”” src=”images/rollovers/Northfield1.gif” name=”img2″></a>
<a href=”ridgeway.asp” onmouseover=”imgOn(‘img3’)” onmouseout=”imgOff(‘img3’)”><img style=”border: 0px solid ; width: 175px; height: 175px;” alt=”” src=”images/rollovers/Ridgeway1.gif” name=”img3″></a>
<a href=”estates.asp” onmouseover=”imgOn(‘img4’)” onmouseout=”imgOff(‘img4’)”>
<img style=”border: 0px solid ; width: 175px; height: 175px;” alt=”” src=”images/rollovers/Estates1.gif” name=”img4″></a>
<a href=”
</td>
</tr>
</tbody>
</table>
<br><br>
<!– End Nested Table for Property Navbar –>
</body></html>