تغییر عکس پشت زمینه

mahtab30

mahtab30

کاربر فعال
سلام بچه ها . خوبید . کسی میدونه چجوری میشه با جاوااسکریپت عکس پشت زمینه صفحه رو عوض کرد ؟ ممنون
 
A.S.Roma

A.S.Roma

عضو جدید
کاربر ممتاز
mahtab30 گفت:
سلام بچه ها . خوبید . کسی میدونه چجوری میشه با جاوااسکریپت عکس پشت زمینه صفحه رو عوض کرد ؟ ممنون
کلیک کنید تا باز شود...
یک نمونه خدمت شما :
کد: 
<!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 type="text/javascript">
    function dosomework()
    {
        var obj = document.getElementById('container');
        obj.style.backgroundImage = "url(images/test.jpg)";
    }
</script>
</head>

<body id="container">
    <input type="submit" onclick="dosomework()" />
</body>
</html>
 
mahtab30

mahtab30

کاربر فعال
ممنون جناب A.S.Roma مثل همیشه کمک خیلی بزرگی به من کردید . در ضمن عنوان جدید مبارک . :gol::gol::gol:
 
M

mina alvandy

عضو جدید
دوست عزیز اگر بخوام عکس هایی که تو هدر سایت قرار می دم هرچند ثانیه عوض بشه چی؟با جاوا اسکریپت
 
heil

heil

عضو جدید
با سلام

برای این کار ابتدا باید آدرس عکس هاتون رو توی یک آرایه مثلا MyPicList بریزید.
بعد یک متغیر مثلا i تعریف میکنیم.
بعد یک تابع می نویسید که مقدار یک گراند تگ هدر ما رو برابر با عنصر i ام آرایه مون بکنه.... و یک واحد به i اضافه کنه ... و بعد چک می کنیم که اگر i>MyPicList.length بود ، i رو مساوی 0 قرار بده (سری بعد عکس اول لود بشه)

حال به کمک تابع setinterval تابعی که در بالا نوشتیم رو هر چند ثانیه فراخونی می کنیم ....

به همین راحتی....

کد های HTML :
کد: 
<body>
<center>
<div id="Header" style="background-color:gray;height:100px;width:600px;"><h1>هدر سایت</h1></div>

<div style="border:1px gray dashed;height:500px;width:600px;direction:rtl;text-align:right;">
<pre>
               اینجا
                        متن 
                                سایت 
                                        شما
                                              نوشته میشه
</pre>
<p style="text-align:center;"><a style="font-family:Tahoma;font-size:medium;" href="#" onclick="clearInterval(Timer);">توقف اسلاید شو</a></p>
</div>
</center>

</body>

کد های جاوا اسکریپت :

کد: 
var MyPicList = new Array();
var i=0;
var Timer;
var Delay=1000;

MyPicList[0] = 'aqua';
MyPicList[1] = 'blue';
MyPicList[2] = 'fuchsia';
MyPicList[3] = 'red';
MyPicList[4] = 'gray';



function ChangePic()
{
    document.getElementById('Header').style.backgroundColor=MyPicList[i];
    i++;
    
    if (i>MyPicList.length)
    i=0
}

window.onload=function()
{
    Timer=setInterval('ChangePic()',Delay);
}


دقت کنین که من چون عکس نداشتم ، توی مثال بالا از رنگ ها استفاده کردم .... شما می تونین آدرس عکس هاتون رو قرار بدین ... فقط برای عوض کردن عکس این بخش کدتون رو باید تغییر بدین :

کد: 
document.getElementById('Header').style.backgroundImage
یا حق
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا