أولا – انسخ الكود الموضح أدناه:
- الكود:
-
<center>
<style>
#banner img { max-width:95%;}
</style>
<div id="banner">
<script type="text/javascript">
var images= new Array()
images[0]= "<a href = 'url to topic1'><img src='img1 url' alt='description1'/></a>";
images[1]= "<a href = 'url to topic2'><img src='img2 url' alt='description2'/></a>";
images[2]= "<a href = 'url to topic3'><img src='img3 url' alt='description3'/></a>";
images[3]= ""<a href = 'url to topic4'><img src='img4 url' alt='description4'/></a>";
var random=Math.floor(4*Math.random());
document.write(images[random]);
</script>
</div></center><div style="font:5px Arial,sans-serif;color:#aaa"><a style="color:#999" href="http://allinonefor.blogspot.com/">all in one</a>.</div>
ثانيا : لتعديل حجم البنر عدل قيمة (banner img { max-width:95%;}
ثالثا : يفضل استخدام الصور ذات الأبعاد المتساوية
رابعا : توضيح طريقة استخدام كود البنر المتغير
لاحظ أن الكود يحتوي على أربع صور تبدأ بالرقم صفر و تنتهي بالرقم أربعه و مقابل كل صور سنجد
1- url to topic1 استبدله برابط الموضوع المطلوب الوصول إليه عند الضغط على الصورة
2- img1 url نستبدله برابط الصورة
3- description1 وصف مختصر للموضوع
بعد تعديل ما تم توضيحه نختار من صفحة التخطيط.... إضافة أداة.... و نلصق الكود في أداة ( java/script )
و دمتم