otomatik değişen resimler için html kodu

Kodla Büyü
turkuazalacam

turkuazalacam

Seçkin Üye
Seçkin Üye
Mesajlar
257
Arkadaşlar aşağıdaki linkteki gibi resimleri otomatik değiştiren bir html kodu arıyorum. Ya da bunu flash'ta nasıl yapabilirim.? linkteki sitede zannedersem normal frontpage ya da dreamvevarda normal atmış. Bu konuda sizden yardım bekliyorum.

örnek: http://www.castlecary.somerset.sch.uk/
 
Bu sitedeki html kodu ile ilgili değil.
Ordaki resim .gif olduğundan kodla bir alakası yok.
Bir kaç .jpeg resminden .gif yapılmış
 
gif falan değil js ile yapılmış, kaynak kodu acıp görebilir ve ordan alabilirsiniz
 
JS Kodları:
Kod: 
<script language="JavaScript1.2">

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='354px' //SET IMAGE WIDTH
var slideshow_height='265px' //SET IMAGE HEIGHT
var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="images/slideshow/1.gif"
fadeimages[1]="images/slideshow/2.gif"
fadeimages[2]="images/slideshow/3.gif"
fadeimages[3]="images/slideshow/4.gif"
fadeimages[4]="images/slideshow/5.gif"
fadeimages[5]="images/slideshow/6.gif"
fadeimages[6]="images/slideshow/7.gif"
fadeimages[7]="images/slideshow/8.gif"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
 
herkese görüş ve yardımlarından dolayı teşekkürler. Bu siteye bu yüzden hergün giriyor ve beğeniyorum. karşılıksız paylaşım ve yardımlaşma olduğu için..
 
Buyur hocam birde benden reimler images klasöründe 33 klasörünün içinde olacak

<td><script>

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/33/1.JPG'
Pic[1] = 'images/33/2.JPG'
Pic[2] = 'images/33/3.JPG'
Pic[3] = 'images/33/4.JPG'
Pic[4] = 'images/33/5.JPG'
Pic[5] = 'images/33/6.JPG'
Pic[6] = 'images/33/7.JPG'
Pic[7] = 'images/33/8.JPG'
Pic[8] = 'images/33/9.JPG'
Pic[9] = 'images/33/10.JPG'
Pic[10] = 'images/33/11.JPG'
Pic[11] = 'images/33/12.JPG'
Pic[12] = 'images/33/13.JPG'
Pic[13] = 'images/33/14.JPG'
Pic[14] = 'images/33/15.JPG'
Pic[15] = 'images/33/16.JPG'
Pic[16] = 'images/33/17.JPG'
Pic[17] = 'images/33/18.JPG'
Pic[18] = 'images/33/19.JPG'
Pic[19] = 'images/33/20.JPG'
Pic[20] = 'images/33/a01.JPG'
Pic[21] = 'images/33/a02.JPG'
// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>



<body onload="runSlideShow()">



<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=250 width=250>
<p align="center">
<img src="images/33/1.JPG" name='SlideShow' width=405 height=250></td>
</tr>
</table>
</td>
 
turkuazalacam' Alıntı:
Arkadaşlar aşağıdaki linkteki gibi resimleri otomatik değiştiren bir html kodu arıyorum. Ya da bunu flash'ta nasıl yapabilirim.? linkteki sitede zannedersem normal frontpage ya da dreamvevarda normal atmış. Bu konuda sizden yardım bekliyorum.

örnek: http://www.castlecary.somerset.sch.uk/
Genişletmek için tıkla ...

..
hocam orda sizi uğraştıracak hiç bir şey yokki.
..
yöntem 1
fireworks te resimleri layer layer ekleyerek her layer in gösterim süresini ayarlayın. HAREKETLİ GİF olsun
..
yöntem 2
dreamweaver ı açın
INSERT \ MEDIA \ IMAGE VIEWER a tıklayın
resimlernizi ekleyin.
yandaki ayar kısmından otomatik başlatmayı aktif, kontrol düğmelerini pasif yapın
alın size aynı değişen resim göstericisi
..
yöntem 3
sitede verilen FLASH GALERİ programlarından herhangi birini kullanın
..
yöntem 4
javascript kullanarak
.
galeriyi koyacağın yere bu kodu ekleyip
<script type="text/javascript" src="galeri.js"></script>
galeri içinde ekteki galeri.js dosyasını kullanarak

..
yöntem 5
flash kullanarak
resimleri istediğiniz aralıklarda frame lere yerleştirin.
normalde saniyede 12 kare oynatılıyor. siz kare oynatma süresini değiştirerek resimler arasındaki süreyi artırıp / azaltabilirsiniz.
son karede de action script kodu eklyerek goto frame 1 dersiniz
....
sanırım bu kadar alternatif yeter :D
 

Ekli dosyalar

1.gif


Resim işlenmiş hocam o şekilde
 
hanamichi10' Alıntı:
BaRBaRYaN35 hocam, 4. metodun hazır çalışan bi örneğini gönderebilirseniz çok iyi olacak.

Bi de http://www.castlecary.somerset.sch.uk/ bu sitede resimlerin köşelerini gizlemiş, ben ona takıldım. Nasıl olduğu konusunda fikri olan varmı acaba?
Genişletmek için tıkla ...
..
hocam ordaki olay FIREWORKS ile yapılmış HAREKETLİ GIF örneğidir. söylediğin gizleme olayı da MASKELEME örneğidir.
..
1. fireworks açılır
2. maskelenecek resim açılır
3. MASKELEYECEK çerçeve açılır. (Kenarları yuvarlatılmış dikdörtgen, üçgen, yıldız vb..)
3. maskelenecek resim CTRL + A ile seçilir ve Edit / Cut (CTRL + X) yapılarak kesilir
4. MASKLEYECEK çerçeve seçilir. Edit / Past Inside (CTRL + SHIFT + V) yapılır.
5. MASKELEYECEK çerçevenin ortasındaki MAVİ merkez noktası mouse ile hareket ettirilerek istenilen yer gösterilir.
...

...
Örnek fireworks 8 ile hazırlanmıştır. olayı açıklamak için.
Frames and Histories kısmında 1 frame vardır.
Frame sayısı çoğaltılarak aynı olay diğer frame lerde de uygulanır.
Frame gösterme süresi (Normalde 7 / 100 dür. 100 / 100 değeri 1 saniyeye eşittir.) değiştirilerek istenilen hareketli gif hazırlanır.
...
 

Ekli dosyalar

Değerli yorumlarınız ve akılcı çözümleriniz için çok teşekkürler. Ben de birkaç gündür bunu yapmaya uğraşıyordum.
Sayenizde hazır kodları buldum. :)
 
Cevap yazmak için giriş yap yada kayıt ol.
BBNET
Geri
Üst