javascript src图片无法加载

时间:2015-12-06 17:03:39

标签: javascript jquery



<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;
&#13;
&#13;

我不太清楚为什么我的JavaScript没有加载任何图片。我将我的图像src保存到每个房屋的房屋阵列中。 onmouse图片也是如此。我的所有图片都在文件/图片/(图片名称)中,所有的名字都是正确的,没有拼写错误,有什么建议吗?

0 个答案:

没有答案