2 divs를 제어하는 마우스 오버 이미지를 프로그래밍하는 방법이 있습니까? [더 큰 이미지 및 텍스트 설명
-
18-09-2019 - |
문제
디자인은 다른 문자에 대한 썸네일이있는 이미지 갤러리를 요구하고 썸네일을 롤오버 할 때 더 큰 버전의 이미지가 나타나고 각 문자에 대한 헤더 및 설명이있는 왼쪽의 Div에 나타납니다.
1) 롤오버 컨트롤을 두 DIV를 모두 갖추는 방법이 있습니까? (확대 된 이미지 및 설명)
그리고
2) 이것을 CMS와 동기화하려면 어떻게해야합니까?
읽어 주셔서 감사합니다 :)
해결책
시작하려면 이것을 시도해보십시오. 어떤 CMS를 사용하고 있는지 확실하지 않으므로 NFI 해당 부분에 대답하는 방법 :
HTML :
<a class="info" href="" onclick="return false;">
<img src="thumb.jpg"/>
<span><img src="large.jpg" /><br />
description goes here</span>
</a>
CSS :
a.info {z-index:24; position:relative; color:#999; font-size:11px; text-transform:none; font-weight:normal; text-decoration:none; border:1px solid #999; padding-left:3px; padding-right:3px; margin:5px;}
a.info:hover {z-index:25; text-decoration:none; color:#333; border-color:#333;}
a.info span {display:none; position:absolute; top:15px; left:15px; width:240px; color:#000; font-size:12px; background-color:#fff; padding:2px; border:1px solid #333;}
a.info:hover span {display:block;}
다른 팁
예, 트리거 요소의 ID 태그에 문자에 대한 정보를 저장하십시오. 미키 마우스라고 말하는 것처럼, id = "미키"아마도 프로토 타입을 사용하고있을 것입니다 ...
$$('.trigger').each(function (el) {el.observe('mouseover',showInfo.bind(el);});
그런 다음 함수 showinfo는 더 큰 이미지와 정보를 가진 div를 보여줍니다.
function showInfo(ev) {
// this refers to the element that has the mouse over, which has the descriptive id
var infoContainerId = this.id+"_info";
var imageContainerId = this.id+"_image";
$(infoContainerId).show(); // showing the div id="mickey_info"
$(imageContainerId).show(); // showing the div id="mickey_image"
}
글쎄 .. 그냥 예를 들어 ...
jQuery를 사용하면 이것은 테스트되지 않았지만 다음과 같은 것입니다.
$('#myImageThumbnail').mouseenter(function(){
//Set the description text
$('#descriptionDiv').html('Insert character description here');
//Enlarge the image
$('#myImageThumbnail').attr('height','300');
$('#myImageThumbnail').attr('width','200');
});
$('#myImageThumbnail').mouseleave(function(){
//Remove the description text
$('#descriptionDiv').html('');
//Return image/thumbnail to original size
$('#myImageThumbnail').attr('height','150');
$('#myImageThumbnail').attr('width','100');
});
설명을 위해 데이터베이스에서 동적 정보를 가져와야하는 경우 jQuery $ .ajax 함수를보고 설명 html을 반환 된 값으로 설정하십시오.
제휴하지 않습니다 StackOverflow