交叉衰落圖像的javascript

我有一個圖像：交叉衰落圖像的javascript

Clown%20Fish

的onmouseover我必須顯示另一圖像：

image.jpeg

即在圖像：

energy.jpeg

（示出了具有webkit-transition：不透明度1s易入出特性）

我得到了第一個代碼的形式在這裏：http://css3.bradshawenterprises.com/cfimg/#comments

劑量沒有工作...

這是現場演示：http://liveweave.com/6EgbYH

這裏是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#cfnormal { 
    position:relative; 
    height:281px; 
    width:450px; 
    margin:0 auto; 
} 

#cf { 
    position:relative; 
    height:10px; 
    width:450px; 
    margin:0 auto; 
} 


#cf img { 
    position:absolute; 
    left:0; 
    width:450px; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 


</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 

<script> 
function change(x) 
{ 
var element = document.getElementById('imgtop'); 
element.style.opacity = "0"; 
} 
</script> 
</head> 

<body> 

<div id="cf"> 
    <img id="imgbott" class="bottom" src="./image.jpeg" /> 
    <img id="imgtop" class="top" src="./energy.jpeg" /> 
</div> 

<div id="cfnormal"> 
    <img onmouseover="change(this)" src="./Clown%20Fish.jpg" /> 
</div> 

</body> 
</html>

來源

2013-05-12 T-student

你能更清楚些嗎，我無法看到你遇到的問題是什麼？就像在，發生了什麼，應該發生什麼或預期會發生什麼，以及爲什麼你覺得它不應該是這樣。 – 2013-05-12 22:09:06

你可能會展示一個[現場演示]（http://jsfiddle.net/），所以我們可以看到發生了什麼，你能清楚地解釋這個問題嗎？ – 2013-05-12 22:11:26

那麼問題是什麼？ – 2013-05-12 22:13:41

我不得不當第三張圖片在鼠標懸停時觸發事件時，會顯示另一張圖片，此圖片顯示的是另一張圖片

這裏是正確的代碼：

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 

    #cfnormal { 
    position:relative; 
    height:281px; 
    width:450px; 
    margin:0 auto; 
    } 

    #cfnormal img { 
    position:relative; 
    height:281px; 
    width:450px; 
    margin:0 auto; 
    } 

    #cf { 
    position:relative; 
    height:10px; 
    width:450px; 
    margin:0 auto; 
    } 


    #cf img { 
    position:absolute; 
    left:0; 
    width:450px; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    } 


    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
    </script> 

    <script> 
    function change(x) 
    { 
var element = document.getElementById('imgtop'); 
element.style.opacity = "0"; 
    } 
    function normalImg(x) 
    { 
var element = document.getElementById('imgtop'); 
element.style.opacity = "1"; 
    } 
    </script> 
    </head> 

    <body> 

    <div id="cf"> 
    <img id="imgbott" class="bottom" src="http://youngsskatingcenter.com/nss-   folder/pictures/Many_colors.gif" /> 
    <img id="imgtop" class="top"  src="http://freepages.genealogy.rootsweb.ancestry.com/~genphotos2/jwline.jpg" /> 
    </div> 

    <div id="cfnormal"> 
    <img onmouseover="change(this)" onmouseout="normalImg(this)"  src="http://www.vmapas.com/maps/2748-2/Immagine_Satellitare_Mondo_Occidentale.jpg" /> 
    </div> 

    </body> 
    </html>

來源

2013-05-12 22:37:32

http://liveweave.com/6mlPO9 – 2013-05-12 22:41:24

我必須展示一個圖像，當第三個圖像在mouseover上觸發事件時，？ – 2013-05-12 22:42:17

交叉衰落圖像的javascript

回答

相關問題