ورود

View Full Version : آموزش: لینک کردن تصاویر در انیمشن با کمک جاوا


mr.wolf
یک شنبه 21 فروردین 1390, 20:20 عصر
با سلام
من از کد زیر برای ساخت یک اسلاید شو استفاده میکنم:

<script language="Javascript">
function initialize()
{
start=false
imageSource=new Array(4)
for(var i=0;i<4;++i)
{
imageSource[i]=new Image()
imageSource[i].src="image"+i+".gif"
}
delay=2000
nextImage=1
startAnimation()
}
//**************************
function startAnimation()
{
interval=setInterval('animate()',delay)
}
function setStart()
{
start = true
}
//**************************
function animate()
{
if(start==true)
{
i=nextImage
++nextImage
nextImage%=4
if(imageSource[i].complete)
document.display.src=imageSource[i].src
}
}
//**************************

</script>
</head>
<body bgcolor="#FFFFFF">
<script language="Javascript">
initialize()
</script>

<IMG name="display" src="image0.gif" onLoad="setStart()">



همه چی درست و مرتبه :تشویق:
حالا میخوام برای هر کدوم از تصاویر یک لینک مجزا بذارم به نحویکه وقتی تصویری در حال نمایش هست لینک مربوط به اون هم واسش قرار بگیره

دوستان لطفا راهنمایی کنین :متفکر:
hossin.esm
یک شنبه 21 فروردین 1390, 23:48 عصر
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="Javascript">
function initialize()
{
start=false
imageSource=new Array(4)
for(var i=0;i<4;++i)
{
imageSource[i]=new Image()
imageSource[i].src="image"+i+".gif"
}
delay=2000
nextImage=1
startAnimation()
}
//**************************
function startAnimation()
{
interval=setInterval('animate()',delay)
}
function setStart()
{
start = true
}
//**************************
function animate()
{
if(start==true)
{
i=nextImage
++nextImage
nextImage%=4
if(imageSource[i].complete)
document.display.src=imageSource[i].src;
document.getElementById('src').innerHTML=imageSour ce[i].src;
}
}
//**************************

</script>
</head>
<body bgcolor="#FFFFFF">
<script language="Javascript">
initialize()
</script>

<IMG name="display" src="image0.gif" onLoad="setStart()">
<div id="src"></div>
</body>
</html>
mr.wolf
دوشنبه 22 فروردین 1390, 12:57 عصر
متشکرم از راهنمایی شما
ولی فکر کنم منظورم رو خوب نگفتم
این کدی که شما اضافه کردین باعث میشه یک متن خاص (مثلا اینجا آدرس تصویر) زیر اون تصویر نمایش داده بشه.
من میخوام خود تصویر تصویر لینک بشه.
یعنی هر بار که تصویری نمایش داده میشه لینک مربوط به اون تصویر هم بصورت هایپرلینک روش قرار بگیره و اگه بازدید کننده روی تصویر کلیک کرد بره و لینک مربوط به اون تصویر واسش باز بشه.
لطفا راهنمایی کنین
مرسی
hossin.esm
دوشنبه 22 فروردین 1390, 13:03 عصر
اگر درست متوجه شده باشم لینک زیر را ببینید یک اسلایدر آماده هست
http://www.scriptiny.com/2011/01/javascript-slider/
یک نمونه دیگه
http://www.scriptiny.com/2009/12/slideshow-script/
mr.wolf
دوشنبه 22 فروردین 1390, 15:16 عصر
دوست عزیز
خیلی ممنونم از راهنمایی شما
فقط یه نکته ای:
این اسلایدرها توی ie6 جواب نمیده و کار نمی کنه.
همون کد اولی که من زدم رو نمیشه یه طوری ویرایش کرد تا تصاویر بتونن لینک داشته باشن ؟
hossin.esm
دوشنبه 22 فروردین 1390, 17:21 عصر
خواهش میکنم.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#slider{position:relative;height:600px;width:800px ;}
#link{list-style:none;position:absolute;right:20px;top:20px;}
#link li{float:left;border:#999 thin solid;background:#CCC;width:15px;height:15px;margi n-right:5px;text-align:center;line-height:15px;}
#link li a{text-decoration:none;display:block;color:#06F;}
#link li a:hover{background:#3F0;color:#06F;}
#link li a:active{color:#06F;}
</style>
<script language="Javascript">
function initialize()
{
start=false
imageSource=new Array(4)
for(var i=0;i<4;++i)
{
imageSource[i]=new Image()
imageSource[i].src="image"+i+".gif"
document.getElementById('link').innerHTML+="<li><a href=\"javascript:void(0)\" onclick='goto("+i+")'>"+i+"</a></li>";
}
document.getElementById('link').getElementsByTagNa me("li")[0].style.backgroundColor="#F00"
delay=3000
nextImage=1
startAnimation()
}
//**************************
function startAnimation()
{
interval=setInterval('animate()',delay)
}
function setStart()
{
start = true
}
//**************************
function animate()
{
if(start==true)
{
i=nextImage
++nextImage
nextImage%=4
if(imageSource[i].complete)
document.display.src=imageSource[i].src;

c=document.getElementById('link').getElementsByTag Name("li");
for(k=0;k<c.length;k++)
{
c[k].style.backgroundColor="#CCC"
}
c[i].style.backgroundColor="#F00"


}
}
function goto(j)
{

nextImage=j*1+1;
nextImage%=4
document.display.src=imageSource[j].src;
c=document.getElementById('link').getElementsByTag Name("li");
for(k=0;k<c.length;k++)
{
c[k].style.backgroundColor="#CCC"
}
c[j].style.backgroundColor="#F00"
clearInterval (interval)
startAnimation()


}
//**************************

</script>
</head>
<body bgcolor="#FFFFFF">
<div id="slider">
<IMG name="display" src="image0.gif" onLoad="setStart()" height="600" width="800">
<ul id="link" >

</ul>
</div>
<script language="Javascript">
initialize()
</script>

</body>
</html>