[HTML] title을 이용하여 마우스 올리면 번역하기

HTML 코드 

<table border="1">
	    <tr>
	        <th>이름</th>
	        <th>나이</th>
	        <th>직업</th>
	    </tr>
	    <tr>
	        <td>kim</td>
	        <td>20</td>
	        <td id="job1" onmouseover="showTranslation('job1')"  title="">student</td>
	    </tr>
	    <tr>
	        <td>lee</td>
	        <td>25</td>
	        <td id="job2" onmouseover="showTranslation('job2')"  title="">programmer</td>
	    </tr>
	    <tr>
	        <td>choi</td>
	        <td>30</td>
	        <td id="job3" onmouseover="showTranslation('job3')"  title="">doctor</td>
	    </tr>
	</table>

title=" 내용 " 을 설정해주면 마우스를 올렸을 때, 해당 내용이 나타난다. 

 

SCRIPT

<script>
    var jobTranslations = {
        "student": "학생",
        "doctor": "의사",
        "programmer": "프로그래머"
    };

    function showTranslation(jobId) {
        var jobCell = document.getElementById(jobId);
        var jobText = jobCell.textContent.trim();
        var translation = jobTranslations[jobText];
        if (translation) {
            jobCell.title = translation; // title 속성에 번역 정보 설정
        }
    }

</script>