HTML KAYAN RESİM VE Marguee KULLANIMI

Birşeyi kaydırmak için gerekli kodumuz:<marquee></marquee> şeklindedir. Örneğin WEBCEBİR.COM yazısını html sayfada kaydırmak için <marquee>WEBCEBİR.COM</marquee> komutunu kullanırız.

Resim kaydırmada işlemi yazı kaydırma işleminden hiçbir farkı yoktur.

Soldan sağa Kayan Resim




Sağdan sola Kayan Resim




Sağdan Sola ve Soldan Sağa Kayan Resim




Yukarıdan Aşağıya Kayan Resim





Aşağıdan Yukarıya Kayan Resim





Çoklu Resim kaydırma


Üç tane resmi yanyana kaydıralım.






NOT:

Resim hangi dizinde bulunuyorsa bu resim ana dizinde bulunduğu için böyle gösterdik. src="ari.png" images klasöründeyse şöyle gösterilir src="images/ari.png"

Yazı kaydırma için Lütfen bakınız.

önizleme buton

zelihanur bacak Diyor ki 02/01/2015

sayfamıza resim ekledikten sonra resme tıklandığında başka bir sayfada bilgi vermesini nasıl sağlarım ?

yönetici Diyor ki: 10/01/2015

Sorunuzdan anladığım kayan resimlere tıklayınca başka sayfaya yada başka bir siteye link vermeyi soruyorsunuz?

ÖRNEK:

<marquee direction="right">
<a href="https://www.google.com.tr" target="_blank">
<img src="ari.png"> </a>
</marquee>

Lütfen HTML bölümünde Link verme, bağlantı ekleme ve Resme link verme konusuna bakınız.

Ahmet Diyor ki 11/03/2015

Merhaba; Alt alta resim ekliyorum ama resim bittiğinde bir boşluk oluyor. ben istiyorumki devamlı aynı resimleri dvm etsin boşluk olmadan. nasıl yapabilirim.

yönetici Diyor ki: 12/03/2015

Alt alta resim eklemede <br/> etiketi kullandığınız için boşluk oluşur. bu sorunu aşmak için resimleri style özelliği ile alt alta dizelim.

ÖRNEK:

<marquee scrollamount="1" height="500" width="100%" direction="down">
<img src="manzara.jpg" style="display:block"> <img src="manzara.jpg" style="display:block"> <img src="manzara.jpg" style="display:block">
</marquee>

mahsun Diyor ki 01/04/2015

resme nasıl link verebilirim

yönetici Diyor ki: 02/04/2015

Mahsun birinci soruda kayan resme link verme anlatıldı. Ayrıca resme link verme için bakınız.

AHMET BURAK CAN Diyor ki 17/04/2015

10 tane resim var sağ taraftan hemen 1. resim kaymasını istiyorum. Nasıl yaparım

yönetici Diyor ki: 19/04/2015

AHMET BURAK CAN 10. resimden sonra sağ tarafta hemen 1. resim kaymaya başlar. Sizde bu şekilde olmuyorsa sorun site kodlamanızda olmalı misal border(çerceve..vb.) gibi bazı nesneler görünme süresini uzatabilir.

ÖRNEK:

<div style="width:900;height:75;border: 20px ridge #7b3200;">
<marquee direction="right" scrollamount="15">
<img src="manzara.jpg">
<img src="manzara.jpg">
</marquee>
</div>

Lütfen örneği görmek için Tıklayınız

emre Diyor ki 20/04/2015

Ben alt alta resim ekliyorum ama 1.resimden sonra 2.resim bitişik olarak geliyor.Ben aralarında biraz boşluk bırakmak istiyorum lütfen yardım edin.

yönetici Diyor ki: 20/04/2015

HTML'de boşluk bırakmak için <br/> etiketi kullanılır.

ÖRNEK:

<marquee scrollamount="1" height="500" width="100%" direction="down">
<img src="manzara.jpg">
<br />
<img src="manzara.jpg">
<br />
<img src="manzara.jpg">
<br />
</marquee>

emir Diyor ki 29/04/2015

merhaba dediğiniz gibi yaptım resim kayıyor ama resim gozukmuyor site hafızasına yulu resim ama neden gozukmuyor anlayamadım

yönetici Diyor ki: 30/04/2015

Emir eklediğin resimlerin dosya yoluna dikkat et. Resimler images klasörü altındaysa src="images/manzara.jpg" olarak resim dosya yolunu göster. Dosya yolun doğruysa Resim uzantılarına bak".jpeg", ".gif", ".png" bunlardan hangisi ise düzelt ".jpeg" uzantılı resimse bir de ".jpg" olarak göster.


funda Diyor ki 13/05/2015

ben bu kodun nereye yazılcağını anlamadım normal tablonun içine yazıyorum resimi ekliyor ama kaymıyor

yönetici Diyor ki: 16/05/2015

Funda boş bir HTML sayfası aç denemelerini öyle yap.

ÖRNEK:

<table border="1">
<tr>
<td width="700">
<marquee direction="right" scrollamount="15">
<img src="manzara.jpg">
<img src="manzara.jpg">
</marquee>
</td>
</tr>
</table>

Emre Altuntaş Diyor ki 25/07/2015

Sağdan sola resim kaydırma işlemini yaptım teşekkür ederim yanlız biraz yavaş geldi bana nasıl hızlandıra bilirim ?

yönetici Diyor ki: 25/07/2015

scrollamount : Piksel her aralıkta kaydırma miktarını ayarlar. Varsayılan değer 6'dır.

scrolldelay : Milisaniye cinsinden her kaydırma hareketi arasındaki aralığı ayarlar. Varsayılan değer, 60 daha küçük herhangi bir değer yoksayılır ve küçük değer yerine 60 milisaniye kullanılır.

ÖRNEK:

<marquee scrollamount="10" direction="right" >

NOT: scrollamount="20" sayı değerini yükseltikçe kaydırma hızlanır.

ÖRNEK:

<marquee scrolldelay="250" direction="right" >

NOT: scrolldelay="500" Sayı değerini yükseltikçe kaydırma yavaşlar.


barış Diyor ki 06/11/2015

resim büyük cıkıyor resmin boyutunu url denmi ayarlarız

yönetici Diyor ki: 07/11/2015

Barış, resim etiketinin width(genişlik) ve height(yükseklik) değerleri vardır. Bu değerlerle resimin büyüklüğünü ayarlayabilirsin.

ÖRNEK:

<img src="manzara.jpg" width="200" height="100" alt="manzara resmi" />

NOT: websayfana ekleyeceğin resmi böyle küçültmen iyi değildir. Çünkü resimin büyük olması tarayıcıya yüklenmesi geç olur; Websayfan yavaş açılır. Pohotoshop programla resmin hangi boyutlarla görünmesini ayarla, kaydet websayfana böyle ekle ve gerçek büyüklüklerini img etiketinde göster; Seo için iyidir.


beyza Diyor ki 10/12/2015

marquee kodunun slider gibi kullanılması mümkün müdür bunun için program kurmak zorunda kalıyorum da. ayrıca mesela yan yana üç resim var kenardaki ok işaretlerine tıkladığında diğer üç resim,yazı(bunlar üzerinde link bulunan ögeler)gelmesi için ne yapmam lazım?

yönetici Diyor ki: 13/12/2015

Beyza, marguee etiketini slider yapmada kullanılmaz. HTML etiketleriyle sade bir site hazırlanır; Ancak görsel siteler için css ve jquery bilmemiz gerekir. Resimlerin üzerine link ögeleri gelmesi için jquery kullanmak gerekir. web sitemde jquery derslerine daha başlamadığım için şuan için üzgünüm yardımcı olamıyorum. Forumlarda jquery bölümlerine sorabilirsin. Resimlere basit olarak link vermek için Tıklayınız.


Adem Diyor ki 31/03/2016

Öğrenmek için çok basit(iyi anlamda :)) bir site olmuş gerçekten. Ne arıyorsanız var ve hemen öğreniyorsunuz. Teşekkür ederim kim yaptıysa. Tasarımlar da akıyor :D

selin Diyor ki 01/04/2016

Ben çoklu resmi yukarıdan aşağı kaydırmak istiyorum nasıl yapabilirim?

yönetici Diyor ki: 01/04/2016

Selin, Her resim etiketi <img> eklediğimizde resimler çoğalır. Bunlarıda alt alta getirmek için <br/> etiketini kullanırız. Yukarıda cevaplarda buna benzer örnek var.

tayfun özşahin Diyor ki 12/05/2016

Merhaba, Ben mause ile resimlerin üzerine geldiğim zaman resimler dursun istiyorum, yada resimlerin sağına ve soluna ok işareti koyup resimlerin hareketini kendim yönetmek istiyorum. yardımcı olabilirseniz sevinirim.

atay Diyor ki 12/05/2016

soldan sağa doğru kayan 10 adet resmim var, resimler bitince arada büyük bir bir boşluk kalıyor. acaba rulo gibi sürekli devam eden birşey yapmak mümkün mü?

Harun Diyor ki 18/05/2016

@Tayfun özşahin Parantez içindeki etiketleri (onmouseover="this.stop();" onmouseout="this.start();") kopyalayıp kodlarının arasına koyarsanız dediğiniz gibi üzerine geldiğinde durur ayrıldığınızda hareket eder.


yönetici Diyor ki: 20/05/2016

@Atay, html etiketlerle kısıtlı özellik verilebiliyor. Bu dediğin, Html etiketlerle mümkün değil.

Sabri Diyor ki 23/10/2016

merhaba; 20 resim ekledik programa her defasında aynı sıra ile değilde, resimler RASTGELE görünsün istiyoruz. Bu komutla bunu yapmak mümkün mü?

yönetici Diyor ki: 23/10/2016

Sabri, bu komutla yapamazsın. Javascript, php gibi programlama dilleri ile yapabilirsin.

fatih Diyor ki 03/11/2016

merhaba alt alta resim koyuyorum yan yana olarak aralarında boşluk nasıl bırakırım

yönetici Diyor ki: 10/11/2016

Fatih, resim etiketin içine sağdan boşluk vermek için style="margin-right:5px" soldan boşluk vermek için style="margin-left:5px" boşluk çok veya az olması için sayıları artırabilin, azaltabilirsin.

Adınız

Eposta

Mesaj

8946

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE