Question

에서 사용자의 선택에 따라 스크립트에서 다른 이미지 사용 마우스 커서 다음에 애니메이션을 보여주는 스크립트를 사용하고 있습니다. 이 코드를 실행하여 초기화 :

<SCRIPT LANGUAGE="JavaScript"> 
function JSFX_StartEffects() 
{ 
JSFX.MakeMouseSquidie (15,"<img src='JSFX/ant_head.gif'>" ,"<img src='JSFX/ant_tail.gif'>" 
); 
} 
</SCRIPT> 

이 온로드 실행 많은 기능 중 하나입니다, 그래서 jQuery의 DOM 준비 처리기를 사용하고 있습니다 : 이것은 잘 작동

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ JSFX_StartEffects() }); 
</SCRIPT> 

,하지만 난 ' 사용자가 애니메이션을위한 다른 이미지 쌍을 선택하는 옵션을 추가하고 싶습니다. 나는 옵션의 네 가지 쌍을 가지고, 그래서 난 내 문서에 <select> 추가 : 지금 애니메이션을 초기화 할 때 사용자의 선택을 적용하는 방법을 알아 내려고 노력하고있어

<div> 
<div class="bebete"> 
<div>Choisis ta Bebete ! :))))</div> 
<br> 
<div> 
<select id="select1"> 
<option selected>alien_ant</option> 
<option>alien_arachnid</option> 
<option>cute_worm</option> 
<option>alien_caterpillar</option> 
</select> 
</div> 
<div> 
<br><br>  
<img id="preview1" alt="image" src="http://tip-top-torrents.net/JSFX/alien_ant.jpg" 
width="180" h eight="180"> 
<h3 id="random1"></h3> 
</div> 
<br> 
</div> 
<script type="text/javascript"> 
var images = []; 
var select1 = window.document.getElementById("select1"); 
var preview1 = window.document.getElementById("preview1"); 
var random1 = window.document.getElementById("random1"); 
var selectLength = select1.length; 
images[0] = "http://tip-top-torrents.net/JSFX/alien_ant.jpg"; 
images[1] = "http://tip-top-torrents.net/JSFX/alien_arachnid.jpg"; 
images[2] = "http://tip-top-torrents.net/JSFX/cute_worm.jpg"; 
images[3] = "http://tip-top-torrents.net/JSFX/alien_caterpillar.jpg"; 

function edit_image1() { 
var index = select1.selectedIndex; 
if (index !== 0) { 
preview1.src = images[index]; 
random1.style.visibility = "hidden"; 
} else {   
preview1.src = images[Math.floor(Math.random() * selectLength)]; 
random1.style.visibility = "visible"; 
} 
return true; 
} 
select1.onchange = edit_image1; 
</script> 

</div> 

.

<SCRIPT LANGUAGE="JavaScript"> 
function JSFX_StartEffects() 
{ 

var Img.src = document.getElementById('preview1.src'); 

여기 조건을 사용해야합니다. 사용자가 alien_ant을 선택한 경우, 다음은 이미지의 쌍으로 초기화해야합니다

JSFX.MakeMouseSquidie (15,"<img src='JSFX/ant_head.gif'>" ,"<img src='JSFX/ant_tail.gif'>"); 

그렇지 않으면, 나는 다른 옵션으로 사용자의 선택을 비교하고 적절한 이미지 쌍을 적용해야합니다.

JSFX.MakeMouseSquidie (15,"<img src='JSFX/worm_head.gif'>" ,"<img src='JSFX/worm_tail.gif'>"); 
JSFX.MakeMouseSquidie (15,"<img src='JSFX/spider_head.gif'>" ,"<img src='JSFX/spider_tail.gif'>"); 
JSFX.MakeMouseSquidie (15,"<img src='JSFX/alien_head.gif'>" ,"<img src='JSFX/alien_tail.gif'>"); 

} 
</SCRIPT> 

이 작업을 수행하는 가장 좋은 방법은 무엇입니까 ?

"MouseSquidie"에서 this page 끝 부분 근처에서 사용하고있는 원본 스크립트를 찾을 수 있습니다.

Answer 1

모든 이미지가 체계적으로 명명하는 경우이 뭔가를 할 수 있습니다 :

설정 파일 이름의 변수 부분에 대한 옵션의 가치 :

다음

<option value="ant" selected="selected">Ant</option> 
<option value="arachnid">Arachnid</option> 
<option value="worm">Worm</option> 
<option value="caterpillar">Caterpillar</option> 

모든 JS 교체 거기에있어 다음과 같은 select 요소의 값을 가진 후행 마우스 함수를 호출하십시오.

$(function() { 
    $("#select1").change(function() { 
     JSFX.MakeMouseSquidie (15,"<img src='JSFX/" + $(this).val() + "_head.gif'>" ,"<img src='JSFX/" + $(this).val() + "_tail.gif'>"); 
    }); 
});