Javascript翻轉

我相當新的JavaScript，我試圖使它當你mouseover一個鏈接，頁面右側的圖像改變，然後改變回mouseout。Javascript翻轉

這裏是我的JavaScript：

function SwapOut(titleid){ 
if (titleid == video) 
    document.getElementById("titleimg").src="images/videotitle.png" 
else if (titleid == gamedesign) 
    document.getElementById("titleimg").src="images/gametitle.png"  
else if (titleid == webdesign) 
    document.getElementById("titleimg").src="images/webtitle.png"  
return true; 
} 

function SwapBack('titleid'){ 
if (titleid == home) 
    document.getElementById("titleimg").src="images/hometitle.png" 
else if (titleid == gamedesign) 
    document.getElementById("titleimg").src="images/gametitle.png" 
else if (titleid == video) 
    document.getElementById("titleimg").src="images/videotitle.png" 
else if (titleid == webdesign) 
    document.getElementById("titleimg").src="images/webtitle.png" 
return true; 
}

而我的HTML：

<a id="eileenSmall1" href="video.html" onmouseover="SwapOut('video')" onmouseout="SwapBack('home')"></a> 

<div id="title"> 
    <img src="images/hometitle.png" name="titleimg"/> 
</div>

我通常會接近這個用CSS但有得到它的工作，因爲我改變的屬性問題不同的元素。任何幫助，將不勝感激！

來源

2012-11-12 clancimus

1）你試圖引用一個帶有id「titleimg」的元素，但是你還沒有給出元素id。

2）你if條件不與它比較它與它認爲是一個可變的字符串比較titleid。例如它應該是'video'不video。

3）在你的第二個函數中，你的參數應該是一個變量而不是字符串。例如它應該是SwapBack(titleid)而不是SwapBack('titleid')。

你應該試試這個...

JAVASCRIPT：

function SwapOut(titleid){ 
if (titleid == 'video') 
    document.getElementById("titleimg").src="images/videotitle.png" 
else if (titleid == 'gamedesign') 
    document.getElementById("titleimg").src="images/gametitle.png"  
else if (titleid == 'webdesign') 
    document.getElementById("titleimg").src="images/webtitle.png"  
return true; 
} 

function SwapBack(titleid){ 
if (titleid == 'home') 
    document.getElementById("titleimg").src="images/hometitle.png" 
else if (titleid == 'gamedesign') 
    document.getElementById("titleimg").src="images/gametitle.png" 
else if (titleid == 'video') 
    document.getElementById("titleimg").src="images/videotitle.png" 
else if (titleid == 'webdesign') 
    document.getElementById("titleimg").src="images/webtitle.png" 
return true; 
}

HTML：

<a id="eileenSmall1" href="video.html" onmouseover="SwapOut('video')" onmouseout="SwapBack('home')"></a> 

<div id="title"> 
    <img src="images/hometitle.png" name="titleimg" id="titleimg" /> 
</div>

來源

2012-11-12 19:40:04 George

現在的鼠標懸停工作，謝謝！但是，鼠標仍然不起作用，圖像不會返回到原始圖像。 – clancimus

沒關係，我的文件命名錯誤。現在一切都很好。謝謝！ – clancimus

高興地幫助我的朋友 – George

如果引用titleimg通過ID，但還沒有分配它的一個ID，只是一個名字

<img src="images/hometitle.png" name="titleimg" id="titleimg"/>

也，你傳遞給你的函數的參數是一個字符串變量。你的函數看起來應該

function SwapOut(titleid){ 
if (titleid == 'video') 
    document.getElementById("titleimg").src="images/videotitle.png" 
else if (titleid == 'gamedesign') 
    document.getElementById("titleimg").src="images/gametitle.png"  
else if (titleid == 'webdesign') 
    document.getElementById("titleimg").src="images/webtitle.png"  
return true; 
} 

function SwapBack(titleid){ 
if (titleid == 'home') 
    document.getElementById("titleimg").src="images/hometitle.png" 
else if (titleid == 'gamedesign') 
    document.getElementById("titleimg").src="images/gametitle.png" 
else if (titleid == 'video') 
    document.getElementById("titleimg").src="images/videotitle.png" 
else if (titleid == 'webdesign') 
    document.getElementById("titleimg").src="images/webtitle.png" 
return true; 
}

關注引號，你比較字符串，例如

titleid ==「家」 VS titleid ==家

也失去報價函數SwapBack（'titleid'）

來源

2012-11-12 19:32:10 Mike

甚至給它一個ID後，仍不能正常工作 – clancimus

編輯，你的報價是在一些地方 – Mike

@Mike所有失蹤不要編輯的答案的問題只是後一個答案.. – George

對於初學者來說，if (titleid == video)是無效的 - 你想引用視頻作爲一個不存在的變量。它應該是if (titleid == 'video')來表示它是一串文本。

其次，如果邏輯在那裏，你不需要。你在做什麼onmouseover="SwapOut('video')"你可以把它傳遞給圖像。

例如，

function swapOut(img) 
{ 
    document.getElementById('titleimg').src = img; 
}

HTML

<a id="eileenSmall1" href="video.html" onmouseover="SwapOut('images/videotitle.png')"></a>

Swapback不需要任何條件邏輯（假設你總是希望將圖像切換回的家）。

來源

2012-11-12 19:47:08 Snuffleupagus

回答

相關問題