이미지를 onMouseOver로 표시합니다. 이미지가 li 태그 외부에 있습니다.

Question

이전에이 작업을 수행했지만 이번에는 이미지를 li 태그 외부로 이동해야 위치 지정이 가능해졌습니다. 이것은 내 html 코드가 어떻게 보이는지 보여 주며, 각각의 '실습 (practicum)'에서 호버에 표시 할 'voorbeeld'를 갖고 싶습니다.

<ul> 
    <li><a id="menuKop" href="">Practicum 1</a></li> 
    <li><a id="menuKop" href="">Practicum 2</a></li> 
    <li><a id="menuKop" href="">Practicum 3</a></li> 
    <li><a id="menuKop" href="">Practicum 4</a></li> 
    <li><a id="menuKop" href="">Practicum 5</a></li> 
</ul> 

....rest of code.... 

<img id="voorbeeld1" src="Voorbeeld1.jpg" alt="voorbeeld1" /> 

저는 자바 스크립트에서 그렇게하고 싶었지만 실제로 어떻게해야할지 모릅니다. 누구든지 이것이 설명되는 사이트에 대한 링크가 있습니까? 이 프로젝트를 끝내면 너무 많은 질문을하게 될 것이라고 생각합니다. 아니면 내가 무엇을 찾고 있어야하는지에 대한 힌트 일 수도 있습니다.

지금까지 'onmouseover'기능을 실험 해 보았지만 작동시키지 못했습니다. 모든 팁/힌트? 미리 감사드립니다!

Answer 1

어때?

<ul id="Preview"> 
    <li><a id="menuKop1" data-image="pic1" href="">Practicum 1</a></li> 
    <li><a id="menuKop2" data-image="pic2" href="">Practicum 2</a></li> 
</ul> 

<img id="pic1" class="hide" src="http://i.imgur.com/vZzIm2t.jpg" alt="voorbeeld1" /> 
<img id="pic2" class="hide" src="http://i.imgur.com/yQdM1dk.jpg" alt="voorbeeld1" /> 

jQuery를 :

$(".hide").hide(); 
$('#Preview a').hover(function() { 
    var img = '#'+$(this).data('image'); 
    $(img).show(); 
}, function() { 
    var img = '#'+$(this).data('image'); 
    $(img).hide(); 
}); 

jsfiddle

은 당신이 원하는 것을 달성하기 위해인가요?