<html>
<head>
<title>Real Estate</title>
<style>
h2, div#price {color: yellow; background-color: blue; width: 330px; padding: 10px;}
div#price {font-size: 24px;}
div#salestext {width: 340px; padding: 5px; border: 1px solid black}
</style>
<script>
window.onload = init;
var houseIndex = 0;
var house = new Object();
function homes(name, price, details, imgsrc){
this.name = name;
this.price = price;
this.details = details;
this.imgsrc = imgsrc;
}
function init(){
house[0] = new homes("Colonial House", "240,199.00", "4 Bedrooms, 2 Baths, Heated Garage", "colonial.jpg");
house[1] = new homes("Contemporary House", "199,199.00", "For immediate sale, Jacuzzi and Hot Tub", "contemporary.jpg");
house[2] = new homes("Cottage on a Lake", "49,500.00", "Rustic, Wood Stove, No Water, No Heat", "cottage.jpg");
house[3] = new homes("Ranch", "149,999.00", "With large barn and a stable of horses. Big tractor too.", "ranch.jpg");
house[4] = new homes("Townhouse", "499,499.00", "Property in center of town. Near bus route!", "townhouse.jpg");
document.getElementById("price").innerHTML = "Priced at $" + house[houseIndex].price;
document.getElementById("housepic").src = "images/" + house[houseIndex].imgsrc;
document.getElementById("salestext").innerHTML = house[houseIndex].name + " " + house[houseIndex].details;
}
function next(){
if(houseIndex == 4){
houseIndex = 0;
}else{
houseIndex++;
}
updateData();
}
function previous(){
if(houseIndex == 0){
houseIndex = 4;
}else{
houseIndex--;
}
updateData();
}
function updateData(){
document.getElementById("price").innerHTML = "Priced at $" + house[houseIndex].price;
document.getElementById("housepic").src = "images/" + house[houseIndex].imgsrc;
document.getElementById("salestext").innerHTML = house[houseIndex].name + " " + house[houseIndex].details;
}
function popup(){
popupWindow = window.open("", "noNameNeeded", "width=245; height=460");
popupWindow.document.open();
var htmlCode = "<html><head><title>House Listings</title>";
htmlCode += "<style>h2 {width: 360px; color: yellow; background-color: blue; padding: 10px;}</style>";
htmlCode += "</head><body><h2><center>Real Estate Listings</center></h2><center><table width='350px' border='1px solid black'>";
for(var x = 0; x < 5; x++){
htmlCode += "<tr>"
htmlCode += "<td width='50px'><img src='images/" + house[x].imgsrc + "' width='50px' height='50px'/></td>"
htmlCode += "<td width='225px'>" + house[x].name + " " + house[x].details + "</td>"
htmlCode += "<td width='75x'>$" + house[x].price + "</td>"
htmlCode += "</tr>"
}
htmlCode += "</table></center><a href='javascript: self.close();'>Close Me</a></body></html>"
popupWindow.document.write(htmlCode);
popupWindow.document.close();
}
</script>
</head>
<body>
<h1>COMP 10065 JavaScript Lab 3: Real Estate Images</h1>
<h2>Real Estate Properties</h2>
<div id="price"></div>
<img id="housepic" onClick="popup();" src="" />
<table width="350px">
<tr>
<td><img onMouseOver="this.src='images/previous_red.gif'" onClick="previous();"
onMouseOut="this.src='images/previous_blue.gif'" src="images/previous_blue.gif" /></td>
<td align="right"><img onMouseOver="this.src='images/next_red.gif'" onClick="next();"
onMouseOut="this.src='/documents/images/next_blue.gif'" src="/documents/images/next_blue.gif" /></td>
</tr>
</table>
<div id="salestext"></div>
</body>
</html>
&#13;
我不太清楚为什么我的JavaScript没有加载任何图片。我将我的图像src
保存到每个房屋的房屋阵列中。 onmouse
图片也是如此。我的所有图片都在文件/图片/(图片名称)中,所有的名字都是正确的,没有拼写错误,有什么建议吗?