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

我正在为我的班级建立一个Food Cart网站。我希望那里有一个盘子的图像，然后一旦点击它，就会有一个不同的食物图像出现在它的顶部。我想知道什么样的JavaScript或其他/如果语句可以用来实现这一点。如果这个问题是模糊的让我知道。图像出现在另一张图像的上方/上方？

我会使用像plate.gif，sandwhich.gif等

感谢您的任何反馈的一些例子。我会好起来的，而不是单击或鼠标按下的事件。

来源

2014-10-22 newstudent

请给出你的一些编码工作。 – Ricky 2014-10-22 04:21:14

因为这看起来像一个班级的任务，我会试着给你一个如何实现这一点，而不真正给你答案代码的想法。

首先你要使用的图像......除了要成为最底层图像的印版以外，其他所有食物图像都应该是带有透明背景的PNG图像。这可以使用photoshop或任何像样的照片编辑软件来实现。

下实现的各种食品上盘的外观，从任何在线教程像W3schools等的点击效果，可在CSS position属性和z-index属性和显示属性读取现在

在平板图像上使用javascript onclick播放第一个食物图像，并在食物图像上再次使用onclick强加第二个食物图像等等。

希望这可以帮助您或指出您在正确的方向。我可以给你代码，但这对你班上的其他学生来说并不好玩或不公平。祝你好运

来源

2014-10-22 04:44:38 Sai

我已经这样做使用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; 
}

来源

2014-10-22 05:27:57 Akshay

像这样的代码可以用来打开和关闭图像，并且可以在大多数浏览器中使用，与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>

来源

2014-10-22 05:55:53 tomysshadow

我认为你的答案比我的更好，因为你有一个切换选项，但你可以提供一个小提琴，因为我试过的那个似乎没有工作 – 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

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

回答

相关问题