Javascript Rollovers

Я довольно новичок в 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, но у меня были проблемы с его работой, так как я изменял свойства другого элемента. Любая помощь будет оценена!

Источник

3 ответа

Решение

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>
Источник

Для начинающих, 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 не нуждается ни в какой условной логике (при условии, что вы всегда хотите переключить изображение обратно на дом).

Источник

Вы ссылаетесь на titleimg по идентификатору, но не присвоили ему идентификатор, просто имя

 <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')

Источник
Другие вопросы по тегам