자바 스크립트를 처음 사용하며 이미지 갤러리 페이지를 만들도록 지정되었습니다. 내 회사의 기술 제한으로 인해 필자는 JavaScript (jQuery가 없음 - 접근성 문제를 야기 함)로만 작성하고 솔루션은 IE8과 호환되어야합니다 (알고 있습니다!). 한 div에 작은 양의 텍스트가있는 일련의 축소판 이미지가 있으며 다른 div에 많은 양의 텍스트가있는 큰 이미지를 표시하려면 미리보기 이미지를 클릭해야합니다. 두 번째 미리보기 이미지를 선택하면 이전의 큰 이미지와 텍스트를 대체 (예 : 이전 이미지와 텍스트를 모두 닫음)하고 큰 이미지와 관련 텍스트를 표시해야합니다.자바 스크립트 만 사용하여 하나의 div에서 썸네일을 선택하고 다른 div에서 텍스트가있는 다른 div에서 열고 싶습니다.
몇 가지 해결책을 시도했지만 문제는 다음 중 하나 일 수 있습니다. - 서로 바꾸기 위해 이미지를 가져 오지만 텍스트는 표시하지 않습니다 (즉 첫 번째 텍스트는 계속 표시됨)? 또는 - 올바른 이미지와 텍스트를 표시 할 수 있지만 서로 바꾸기보다는 겹쳐 보입니다. (이것은 show/hide 스크립트 사용).
IMG를 대체 스크립트는 매우 간단하지만, 난 그냥 이미지 대신 사업부를 데리러에 적응하는 방법을 알고하지 않습니다
이<script type="text/javascript">
function showLarge(srcLarge)
{
document.getElementById("large").src = srcLarge;
}
</script>
<img src="/path/to/thumb1.jpg" onclick="showLarge('/path/to/large1.jpg')"/>
<img src="/path/to/thumb2.jpg" onclick="showLarge('/path/to/large2.jpg')"/>
<img src="/path/to/thumb3.jpg" onclick="showLarge('/path/to/large3.jpg')"/>
<img id="large" src="/path/to/large1.jpg"/>
표시/숨기기 스크립트는 다음과 같습니다
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
...이 내용은 div가 표시되고 두 번째 축소판이 선택되었을 때 적용하고 싶습니다. 두 번째 축소판이 바로 아래에 나타나는 대신 첫 번째 축소판이 첫 번째 축소판으로 바뀝니다.
내가 말했듯이, 나는 이것에 아주 새롭다, 나는 이것이 도움이되기를 바란다. 많은 감사.
코드를 추가하면 디버깅 할 수 있습니다. – Andy
코드 ... 코드가 필요합니다! – Jacques
jQuery로 접근성 문제가 발생합니까? 일반 자바 스크립트보다 더 많이? 나는 ...이 주장의 근원은 무엇입니까? –