圖像出現在另一張圖像的上方/上方？

我正在爲我的班級建立一個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

圖像出現在另一張圖像的上方/上方？

回答

相關問題