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

回答

相关问题