首页在页面上显示图片，图片名称为“redflower.png”,在img目录下；要求图片长为300px，宽也为300px；当图片不能显示时，提示“无图片显示”，当鼠标放在图片上方时，显示“花开了！”

在页面上显示图片，图片名称为“redflower.png”,在img目录下；要求图片长为300px，宽也为300px；当图片不能显示时，提示“无图片显示”，当鼠标放在图片上方时，显示“花开了！”

时间: 2024-09-30 10:15:42 浏览: 25

在HTML中，你可以通过`<img>`标签来加载图片，并结合CSS样式以及JavaScript来满足你的需求。下面是一个示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> img { width: 300px; height: 300px; object-fit: cover; /* 保持宽高比缩放 */ border: 1px solid #ccc; cursor: pointer; /* 鼠标悬停效果 */ display: none; /* 初始隐藏 */ } img.loaded { display: block; /* 图片显示时移除display:none */ } .alt-text { font-size: 14px; color: gray; visibility: hidden; /* 初始隐藏替代文本 */ } </style> </head> <body> <div id="image-container"> <img src="img/redflower.png" alt="无图片显示" class="alt-text" onerror="this.src='img/default-image.png'; this.alt='无图片显示'; this.classList.add('loaded');"> <span class="hidden-message">花开了！</span> </div> <script> // 当图片加载完成时添加loaded类并显示文字 document.getElementById('image-container').addEventListener('load', function (event) { event.target.previousSibling.textContent = '花开了！'; event.target.classList.add('loaded'); }); </script> </body> </html> ``` 在这个例子中，`src="img/redflower.png"`指向图片文件，`width`和`height`设置了固定尺寸。`onerror`属性处理图片加载失败的情况，将默认图片显示出来。当鼠标悬浮在图片上时，因为设置了`cursor: pointer`，所以会显示提示文字。注意这里假设存在一个名为`default-image.png`的默认图片，如果实际项目中没有此图，你需要替换这个路径。另外，`.hidden-message`类用于隐藏文本，只有在图片无法显示时才显示。

阅读全文