마우스로 이미지 첨부하기

작은 MCE를 편집기로 사용하고 있습니다. 이미지 위에 마우스를 올리면 "작은", "중간", "큰"옵션이있는 이미지 아래에 div가 표시됩니다. 모든 조언/샘플은 어떻게 할 수 있습니까? JQuery로할까요?마우스로 이미지 첨부하기

enter image description here

출처

2011-04-01 Pit Digger

당신은 링크 나 콘텐츠와 사업부를 준비하고 '없음'에 자사의 디스플레이 CSS 속성을 설정할 수 있습니다. 그런 다음 jQuery로이를 제어합니다. 주제 here (의 jQuery API)에

var yourDiv = $("#ThatDiv"); 
$("#YourImage").hover( 
    function() {yourDiv.css('display','block');}, 
    function() {yourDiv.css('display','none');} 
});

더. 호버 아웃 기능을 조정해야 할 수도 있습니다.

당신은 propably 다음과 같을 수 HTML 코드를 상상할 수있다. (시간 제한을 추가하는 등이 외부로 마우스를 이동 한 후 즉시 사라지지 않도록) :

<img src="#" alt="" id="YourImage"/> 
<div id="ThatDiv" style="display:none"> 
    <a href="">...ETC... 
</div>

을 그리고 당신은 대신 외부 스타일 시트에 CSS 클래스를 사용합니다 인라인 스타일. 그러나 이것은 단지 간단한 예일뿐입니다.

출처

2011-04-01 16:08:55 Damb

이미지가 여러 개인 경우 어떻게됩니까? 그 위치에 대해 말한 것을 보지 못해이 이미지가 정확히 이미지 아래에 표시됩니까? –

이미지의 위치를 jQuery로 가져와야하고 절대 위치를 해당 div로 다시 설정해야합니다 (다시 jQuery로). 또한 이미지 대신 id 대신 클래스를 사용하십시오. – Damb

시나리오에 많이 달려 있습니다 ....하지만 이미지의 크기가 동적 인 경우에는 상대 위치가있는 래퍼 div로 시작해야합니다. 이미지와 div를 넣으십시오. 그런 다음 각 이미지에서 이미지의 크기를 계산하고 해당 div의 위치를 지정하기 위해 좌표를 사용해야합니다. 이미지 높이 등의 값에 최상위 위치를 추가하는 것과 같은 것입니다. – Damb

마우스로 이미지 첨부하기

답변

관련 문제