Question

我对JavaScript很新，我正在努力使其成为当您mouseover链接时，页面右侧的图像发生变化，然后更改回mouseout。

这是我的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来解决这个问题，但由于我正在更改其他元素的属性，因此遇到了问题。任何帮助将不胜感激！

Answer 1

您是通过ID引用titleimg但未为其分配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 =='home'vs titleid == home

也会丢失函数SwapBack（'titleid'）

中的引号

Answer 2

1）您尝试引用具有id“titleimg”的元素，但您还没有给元素id。

2）你的if条件不会将titleid与它认为是变量的字符串进行比较。例如，它应该是'video'而不是{{1} }}

3）在你的第二个函数中，你的参数应该是一个变量而不是一个字符串。例如，它应该是video而不是SwapBack(titleid)。

你应该试试这个......

JAVASCRIPT：

SwapBack('titleid')

HTML：

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;
}

Answer 3

首先，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不需要任何条件逻辑（假设您总是想将图像切换回家）。

Javascript翻转

3 个答案: