Question

我正在为我的班级建立一个Food Cart网站。我希望有一个盘子的图像，然后一旦点击它有一个不同的食物图像出现在它上面。我想知道可以使用什么样的javascript或else / if语句来实现这一点。如果这个问题含糊不清，请告诉我。

我会使用一些例子，如plate.gif，sandwhich.gif等。

感谢您的任何反馈。我可以使用悬停效果，而不是点击或鼠标按下事件。

Answer 1

我已经使用css做了一个简单的方法，当你点击盘子时会出现图像，如果需要http://jsfiddle.net/suwz0zhg/1/

，你可以将其更改为悬停

<img class="b" src="http://media.npr.org/assets/img/2013/01/10/plate_wide-4764eb8d34c625adfb8c18014a6f43eb300bf079.jpg?s=6" />
<img class="a" src="https://bridor.com/wp-content/uploads/product-images/60HABN-11.png" />

CSS

 img{
position:absolute;
width:300px;
height:250px;
}

.a{
margin-top:50px;
margin-left:80px;
width:150px;
height:150px;
z-index:-10;
transition:0s 10s;

}

.b:active ~ .a{
z-index:5;
transition:0s;
}

Answer 2

这样的代码可以用来打开和关闭图像，并且可以在大多数浏览器中使用，这与CSS3不同。只需点击盘子。（我借用了我之前的那些人的照片）

<html>
<head>
<title>Your Special Food Cart</title>
<style type="text/css">
.preview {
position:relative;
}
.preview .plate {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:-1;
}
.preview .food {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
visibility:hidden;
z-index:1;
}
</style>
</head>
<body>
<script LANGUAGE="Javascript">
var shownfoodarray = new Array();
function showfood(nom) {
if (!shownfoodarray[nom]) {
shownfoodarray[nom] = 1;
} else {
if (shownfoodarray[nom] == 1) {
shownfoodarray[nom] = 0;
} else {
shownfoodarray[nom] = 1;
}
}
switch (shownfoodarray[nom]) {
case 0:
document.getElementsByClassName("food")[nom].style.visibility = "hidden";
break;
case 1:
document.getElementsByClassName("food")[nom].style.visibility = "visible";
break;
default:
document.getElementsByClassName("food")[nom].style.visibility = "hidden";
}
}
</script>
<div class="preview">
<a href="javascript:showfood(0);">
<div class="plate"><img src="http://media.npr.org/assets/img/2013/01/10/plate_wide-4764eb8d34c625adfb8c18014a6f43eb300bf079.jpg" width="200" height="200" alt="plate" border="0" /></div>
<div class="food"><img src="https://bridor.com/wp-content/uploads/product-images/60HABN-11.png" width="200" height="200" alt="food" border="0" /></div>
</a>
</div>
</body>
</html>

Answer 3

因为这看起来像是一个课程的作业，所以我会试着告诉你如何实现这个目标，而不是实际给你答案代码。

首先要使用的图像...除了最底层的图像之外，每个其他食物图像都应该是具有透明背景的png型图像。这可以使用photoshop或任何体面的照片编辑软件来实现。

接下来要实现平板上各种食物的外观，请阅读CSS位置属性和z-index属性以及来自W3schools等任何在线教程的显示属性。

现在对于点击效果，放置平板图像并使用javascript打开平板图像顶部的第一个食物图像并再次使用食物图像上的onclick超级强加第二个食物图像，依此类推。

希望这有助于或指向正确的方向。我可以给你代码，但这对你班上的其他学生来说不会有趣或公平。祝你好运

图像出现在另一个图像的上方/上方？

3 个答案: