묻고답하기
페이드효과 이미지에 링크걸기...
2003.06.28 18:57
여러가지 이미지를 페이드 효과하는 스크립트인데요...
이걸 이미지마다 링크를 걸수 없을가요?
아시는 분 답변 부탁드릴게요...
http://neogene.new21.org/_etc/overlap.html <-예제보기
<body> 와 </body>사이에 아래 스크립트를 추가하세요.
(오류 모두 수정되었습니다)
<script language = "JavaScript">
<!--
// 이미지의 위치
var imgPosX = 10;
var imgPosY = 10;
// 시간 간격 (멈춰있는 초)
var pause = 3;
// 오버랩 빠르기 (클수록 빠름 - 100을 나누어 떨어질 수 있는 수가 좋음)
var multi = 4;
// 이미지 주소 (imgName1과 imgName2를 교대로 하고, 배열 첨자는 두번씩 씀)
var imgName1 = new Array();
var imgName2 = new Array();
imgName1[0] = "images/intro1.jpg";
imgName2[0] = "images/intro2.jpg";
imgName1[1] = "images/intro3.jpg";
imgName2[1] = "images/intro4.jpg";
imgName1[2] = "images/intro5.jpg";
imgName2[2] = "images/intro6.jpg";
imgName1[3] = "images/intro7.jpg";
imgName2[3] = "images/intro8.jpg"; // 홀수 개일 경우 마지막 그림을 빈 그림으로 해서 짝수개로 맞춰주세요.
var imgPreload1 = new Array();
for (i = 0; i < imgName1.length; i++) {
imgPreload1[i] = new Image();
imgPreload1[i].src = imgName1[i];
}
var imgPreload2 = new Array();
for (i = 0; i < imgName2.length; i++) {
imgPreload2[i] = new Image();
imgPreload2[i].src = imgName2[i];
}
var imgIndex1 = 0;
var imgIndex2 = imgName2.length - 1;
var step = 0;
var maxStep = 100 / multi;
function overlapStart()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
var timer = setTimeout("overlapStart()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function overlap1to2()
{
if (step-- >= 0) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap1to2()", 0);
}
else {
clearTimeout(timer);
changeImage1();
var timer = setTimeout("overlap2to1()", pause);
}
}
function overlap2to1()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap2to1()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function changeImage1()
{
imgIndex1++;
if (imgIndex1 >= imgName1.length) {
imgIndex1 = 0;
}
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
}
function changeImage2()
{
imgIndex2++;
if (imgIndex2 >= imgName2.length) {
imgIndex2 = 0;
}
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
}
function overlapImage()
{
pause = pause * 1000;
overlap1.style.posLeft = overlap2.style.posLeft = imgPosX;
overlap1.style.posTop = overlap2.style.posTop = imgPosY;
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
overlapStart();
}
document.write('<div id="overlap1" style="position:absolute; filter:alpha(opacity=0);"></div>');
document.write('<div id="overlap2" style="position:absolute; filter:alpha(opacity=0);"></div>');
window.onload = overlapImage;
-->
</script>
이걸 이미지마다 링크를 걸수 없을가요?
아시는 분 답변 부탁드릴게요...
http://neogene.new21.org/_etc/overlap.html <-예제보기
<body> 와 </body>사이에 아래 스크립트를 추가하세요.
(오류 모두 수정되었습니다)
<script language = "JavaScript">
<!--
// 이미지의 위치
var imgPosX = 10;
var imgPosY = 10;
// 시간 간격 (멈춰있는 초)
var pause = 3;
// 오버랩 빠르기 (클수록 빠름 - 100을 나누어 떨어질 수 있는 수가 좋음)
var multi = 4;
// 이미지 주소 (imgName1과 imgName2를 교대로 하고, 배열 첨자는 두번씩 씀)
var imgName1 = new Array();
var imgName2 = new Array();
imgName1[0] = "images/intro1.jpg";
imgName2[0] = "images/intro2.jpg";
imgName1[1] = "images/intro3.jpg";
imgName2[1] = "images/intro4.jpg";
imgName1[2] = "images/intro5.jpg";
imgName2[2] = "images/intro6.jpg";
imgName1[3] = "images/intro7.jpg";
imgName2[3] = "images/intro8.jpg"; // 홀수 개일 경우 마지막 그림을 빈 그림으로 해서 짝수개로 맞춰주세요.
var imgPreload1 = new Array();
for (i = 0; i < imgName1.length; i++) {
imgPreload1[i] = new Image();
imgPreload1[i].src = imgName1[i];
}
var imgPreload2 = new Array();
for (i = 0; i < imgName2.length; i++) {
imgPreload2[i] = new Image();
imgPreload2[i].src = imgName2[i];
}
var imgIndex1 = 0;
var imgIndex2 = imgName2.length - 1;
var step = 0;
var maxStep = 100 / multi;
function overlapStart()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
var timer = setTimeout("overlapStart()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function overlap1to2()
{
if (step-- >= 0) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap1to2()", 0);
}
else {
clearTimeout(timer);
changeImage1();
var timer = setTimeout("overlap2to1()", pause);
}
}
function overlap2to1()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap2to1()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function changeImage1()
{
imgIndex1++;
if (imgIndex1 >= imgName1.length) {
imgIndex1 = 0;
}
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
}
function changeImage2()
{
imgIndex2++;
if (imgIndex2 >= imgName2.length) {
imgIndex2 = 0;
}
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
}
function overlapImage()
{
pause = pause * 1000;
overlap1.style.posLeft = overlap2.style.posLeft = imgPosX;
overlap1.style.posTop = overlap2.style.posTop = imgPosY;
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
overlapStart();
}
document.write('<div id="overlap1" style="position:absolute; filter:alpha(opacity=0);"></div>');
document.write('<div id="overlap2" style="position:absolute; filter:alpha(opacity=0);"></div>');
window.onload = overlapImage;
-->
</script>