Question

翻转适用于图像本身，从一个图像更改为另一个图像然后再返回，但问题是图像在翻转时图像的每一侧都会发生变化，并且存在空白区域。

我知道在CSS中可以做得更好，但这是一项学校作业，必须使用javascript。下面是HTML中的代码，然后是CSS中的代码

HTML

<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";

function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}

function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>

<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>

CSS

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

如果有人可以指出我的错误或者有更好的方法（必须是javascript），我当然会感激它！

Answer 1

正如我在评论中提到的，块级元素将覆盖整行，因此从锚标记中删除类center，如果要在中间对齐项目，则更改html的结构下方。

<div class="center">
     <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
        <img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
     </a>
</div>

DEMO

javascript图像翻转不仅在图像上，而且在空白的一面

1 个答案: