[자바스크립트] 초간단 링크 클릭시 이미지 보여주기.

진짜 간단한 건데 너무 꾸미다 보니 답변이 늦었다.. 쩝..

 

질문)

 

안녕하세요

<table>

<tr>

 <td><a href="">강아지</a></td>

 <td><a href="">곰</a></td>

 <td><a href="">토끼</a></td>

</tr>

<tr>

 <td colsapn=3><img src="images/dog.jpg"></td>

</tr>

</table>

제가 구현하고 싶은건

첫번째 줄에서 강아지를 누르면 두번째 줄에서  <img src="images/dog.jpg"> 가 뜨고

곰을 누르면 <img src="images/bear.jpg"> 가 뜨고

토끼를 누르면 <img src="images/rabbit.jpg"> 가 뜨게 하고 싶습니다

그러니까 클릭 할때마다 해당이미지가 계속 바뀌는 거죠

간단하게 구현할려면 어떻게 할수 있을까요?

도와주십시요

 

 

먼저등록된 답변) 진짜 초간단..

 

<table>
<tr>
 <td><a href="#" onclick="document.getElementById('aImg').src='images/dog.jpg'">강아지</a></td>
 <td><a href="#" onclick="document.getElementById('aImg').src='images/bear.jpg'">곰</a></td>
 <td><a href="#" onclick="document.getElementById('aImg').src='images/rabbit.jpg'">토끼</a></td>
</tr>
<tr>
 <td colsapn=3><img id="aImg" src="images/dog.jpg"></td>
</tr>
</table>

 

 

내 답변)

 

1. HTML

 

<table border='1' width='200' height='220'>
<tr height='30'>
  <th><a href="javascript:imgView('1');" >강아지</a></th>
  <th><a href="javascript:imgView('2');" >곰</a></th>
  <th><a href="javascript:imgView('3');" >토끼</a></th>
</tr>
<tr>
  <th colspan='3'>
    <div id='animal'>

      <img src='https://t1.daumcdn.net/cfile/tistory/1150DA4E4FBC35E01F' width='100%'/><!-- 기본 이미지 -->
    </div>
  </th>
</tr>
</table>

 

2. SCRIPT

 

function imgView(a){
 var isrc;

 

 if(a == 1){
  isrc = "dog";
 }else if(a == 2){
  isrc = "bear";
 }else if(a == 3){
  isrc = "rabbit";
 }else{
  alert("다시선택하세요.");
 }
 
 alert(isrc);
 document.getElementById('animal').innerHTML = "<img src='images/" + isrc + ".jpg' width='100%'/>";

}

 

3. RUN

 

        

 

 

https://jsfiddle.net/d45f3res/3/