图像出现在另一张图像的上方/上方?
我正在为我的班级建立一个Food Cart网站。我希望那里有一个盘子的图像,然后一旦点击它,就会有一个不同的食物图像出现在它的顶部。我想知道什么样的JavaScript或其他/如果语句可以用来实现这一点。如果这个问题是模糊的让我知道。图像出现在另一张图像的上方/上方?
我会使用像plate.gif,sandwhich.gif等
感谢您的任何反馈的一些例子。我会好起来的,而不是单击或鼠标按下的事件。
因为这看起来像一个班级的任务,我会试着给你一个如何实现这一点,而不真正给你答案代码的想法。
首先你要使用的图像......除了要成为最底层图像的印版以外,其他所有食物图像都应该是带有透明背景的PNG图像。这可以使用photoshop或任何像样的照片编辑软件来实现。
下实现的各种食品上盘的外观,从任何在线教程像W3schools等的点击效果,可在CSS position属性和z-index属性和显示属性读取现在
在平板图像上使用javascript onclick播放第一个食物图像,并在食物图像上再次使用onclick强加第二个食物图像等等。
希望这可以帮助您或指出您在正确的方向。我可以给你代码,但这对你班上的其他学生来说并不好玩或不公平。祝你好运
我已经这样做使用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;
}
像这样的代码可以用来打开和关闭图像,并且可以在大多数浏览器中使用,与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>
我认为你的答案比我的更好,因为你有一个切换选项,但你可以提供一个小提琴,因为我试过的那个似乎没有工作 – Akshay 2014-10-22 06:10:33
在这里你去。出于某种原因,它似乎没有认识到JS列中的showfood功能,仅在HTML列中。 http://jsfiddle.net/7m31nyem/ – tomysshadow 2014-10-22 06:31:06
是的,这更好 – Akshay 2014-10-22 06:58:05
请给出你的一些编码工作。 – Ricky 2014-10-22 04:21:14