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
<marquee direction=right>
<img src="ari.png">
</marquee>
Sağdan sola Kayan Resim
<marquee>
<img src="ari.png">
</marquee>
Sağdan Sola ve Soldan Sağa Kayan Resim
<marquee behavior=alternate>
<img src="ari.png">
</marquee>
Yukarıdan Aşağıya Kayan Resim
<marquee scrollamount="1" height="50" width="100%" direction="down">
<img src="ari.png">
</marquee>
Aşağıdan Yukarıya Kayan Resim
<marquee scrollamount="1" height="50" width="100%" direction="up">
<img src="ari.png">
</marquee>
Çoklu Resim kaydırma
Üç tane resmi yanyana kaydıralım.
<marquee behavior=alternate bgcolor="#ff6600 ">
<img src="ari.png">
<img src="ari.png">
<img src="ari.png">
</marquee>
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.
zelihanur bacak 27/03/2018
Sayfamıza resim ekledikten sonra resme tıklandığında başka bir sayfada bilgi vermesini nasıl sağlarım ?
yönetici 27/03/2018
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 27/03/2018
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 27/03/2018
Alt alta resim eklemede
etiketi kullandığınız için boşluk oluşur.
Bu sorunu aşmak için resimleri style özelliği ile alt alta dizelim.
<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>
AHMET BURAK CAN 27/03/2018
10 tane resim var sağ taraftan hemen 1. resim kaymasını istiyorum. Nasıl yaparım
yönetici 27/03/2018
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.
<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 28/03/2018
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 29/03/2018
HTML de boşluk bırakmak için <br/> etiketi kullanılır.
<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>
Emre Altuntaş 30/03/2018
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 30/03/2018
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.
<marquee scrollamount="10" direction="right">
NOT: scrollamount="20" sayı değerini yükseltikçe kaydırma hızlanır.
<marquee scrolldelay="250" direction="right">
NOT: scrolldelay="500" Sayı değerini yükseltikçe kaydırma yavaşlar.
Adem 1/04/2018
Öğ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
tayfun özşahin 2/04/2018
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.
Harun 2/04/2018
@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.
hakan feyzullah 11/06/2018
selamlar ben sitemde çok resim olduğu için bilgisayarlardaki resim proğramı gibi bir şey istiyorum yani bilgisayarlarda resimlerimize bakarken yandaki ok işareti ile resim değiştirme istersekte slayt yapma sitemi kendim yaptım html site bana yardımcı olursanız minnettar kalırım saygılarımla hakan feyzullah
yönetici 11/06/2018
Hakan, google'dan tüm ve videolar bölümünden "resim galerisi yapımı", "html galeri yapımı" ve "lightbox galeri yapımı" aratmalar yap.
Ali 14/07/2018
Hocam bu marque etiketini kullanarak arkaplanda kayan resim yapıyorum ama bunu nasıl sınırsız yapıcam yani 1.img bittiğinde tekrar gösteriyor ama boşluuk olarak hep aynı resmi göstermesini istiyorum.
yönetici 15/07/2018
HTML etiketlerin sınırlı özellikleri vardır. Bu dediğini ancak JavaScript veya JavaScript kütüphanesi jquery ile yapabilirsin.
Yaşar 30/09/2018
Merhabalar; marque ile yapılan akan resimlerde belirli bir resimin üzerine gelindiğinde style transform scale kullanarak belli bir boyuta kadar büyüsün istiyorum.Sonra resimin üzerinden ayrıldığında aynı animasyonla küçülsün istiyorum.Nasıl yapabilirim?
yönetici 30/09/2018
Yaşar, css kullanarak basit şekilde şöyle yapılır:
CSS:
img{
width:200px;
height:200px;
transition: transform .2s;
}
img:hover{
transform: scale(2)
}
HTML:
<marquee height="250" onmouseover="this.stop();"
onmouseout="this.start()" >
<img src="manzara.jpg">
<img src="manzara.jpg">
<img src="manzara.jpg">
<img src="manzara.jpg">
</marquee>
Akın Genç 06/12/2018
resmin inme hızı gibi özellikleri bulunuyor mu?
yönetici 06/12/2018
Akın, sağdan sola veya aşağıdan yukarı hız için scrollamount="20" özellik verebilirsin değer olarak 1'den 50'ye kadar hızlandırabilirsin.
Ahmet 10/01/2019
4 resim yüklediğimde hepsi art arda geçiyor bunlar arasında sıralama yapmak istiyorum Örnek 1 resim bittikten sonra 2 resim gelsin nasıl yapabilirim?
yönetici 11/01/2019
Ahmet,Tarayıcılar HTML etiketlerini yukarıdan aşağıya sıra ile okurlar. Onun için resim etiketin üste olan 1. altında ki 2. sıra olarak algılar.
Muhammet Ali 29/01/2019
Billboard gibi 1 2 3 4 5. fotoğraftan sonra tekrar 1. fotoğrafa dönmesini nasıl yapabilirim ve de geçiş hızını 5 saniye'ye nasıl ayarlarım yardım ederseniz çok teşekkür ederim
mustafa isenlik 21/03/2019
selam Haber sitelerindeki gibi resimli haber kayması yapmak istiyorum. resimleride link vermek istiyorum yardımcı olurmusunuz
Özlem Atız 21/03/2019
iyi akşamlar .Resimlerin hepsi ayrı ayrı iki saniye durup sonra hafif sönerek bir sonraki resmin gelmesini sağlamak istiyorum. marquee ile birbirine yapışık ip gibi geçiyor .yardımcıolabilir misiniz..
yönetici 21/03/2019
Özlem, css3 yeni özelliklerle ve javascript ile yapılabilir ama üzerinde baya bir çalışmak gerekir. Zamanla buna benzer konular olacak ilerde zaman oldukça yayınlanacak. projede şöyle bir özellikte kullanmak isteyebilirsin. Html slider ekle konusuna bakınız.
Berker 28/06/2019
Merhabalar ;
Logoları yanyana kaydırdığımda aralarında ufak bir boşluk istiyorum.Mevcut kodlar ile işlemi beceremedim. Aynı çizgide değil alt sırasında devam ediyor.
Yardımcı olabilir misiniz ?
Teşekkürler.
yönetici 29/06/2019
Berker şu kodu ekle sayıyı büyüterek arada farkı dahada açabilin.
<marquee>
<img src="manzara.jpg" style="margin-left:10px">
<img src="manzara.jpg" style="margin-left:10px">,
</marquee>
Eren Keskin 05/08/2019
Ben kayan resim ekledim ama o kaydığı yeri nasıl değiştirebilirim
yönetici 06/08/2019
Eren, kayan resmi hangi div'in içine yerleştirirsen orada kayar.
Murat 20/12/2019
Bir resim yada yazı kayarak geldik ten sonra durması için ne yapmam lazım yardım ederseniz sevinirim
yönetici 20/12/2019
Murat, HTML ile kısıtlı işlemler yapılır, malesef öyle komut yok sadece üstüne gelince durdurma olayı var. O'da üsteki yorumlarda verildi.
ONUR MUTLU 04/02/2020
Merhaba N11 De Sattığım Ürün Resimlerini, Resim Formatı Yüklemek Zorundayım Ama Gördüğüm Bazı Satıcılar Ufak Gifler İle Bu Ürün Resimlerini Hareketlendirebiliyorlar Bende Gif Gibi Yükleme Yapmak İstiyorum Ürün Resimlerimi Lütfen Yardımcı Olurmusunuz.
yönetici 05/02/2020
Onur, resim formatları jpg,png,gif sende photoshop gibi programlarla .gif formatında hareketli resimler hazırla bu .gif uzantılı dosyayı yükle.
cavit şentürk 11/02/2020
Merhaba Hocam entegrasyon firmasında çalışıyorum başka firmaların ilan fotoğraflarında gif var nasıl yaptıklarını çözemedim gif yüklenmiyor site kabul etmiyor resim formatında olması gerekiyormuş bu konu ile ilgili nasıl bir yol izlemeliyim
teşekkürler
yönetici 12/02/2020
cavit, gif uzantılı resimler büyük dosyalardır şurdan sıkıştır öyle bir dene. olmazsa sitende sınırlama var yazılımcı ile görüşmelisiniz.
ismet gülseçgin 24/02/2020
Kayan yazı yazdım oldu fakat font değiştiremiyorum. teşekkürler
yönetici 25/02/2020
ismet, style özelliğinden font özelliklerini gireceksin.
<marquee direction=right style="font-family:Georgia, "Times New Roman", serif">WEBCEBİR.COM</marquee>
Şahin ~ERDOĞAN 27/08/2020
Hocam yazıyı belli bi süre sonra başlatabilirmiyiz atıyorum şarkı karaokesi gibi bişey yapıcam sözler saniyesinde gelmeli nası olur?
yönetici 29/08/2020
Şahin, HTML yapılacak kısıtlıdır. şu kodları dene:
<marquee scrolldelay="10">scrolldelay = 10</marquee>
<br />
<marquee scrolldelay="200">scrolldelay = 200</marquee>
Emir 14/10/2020
Ben web sitemi yayınladım fakat resimlerin bazıları büyük ama anasayfaya geçiyorum onda olmuyor?
yönetici 16/10/2020
Emir, resme width="" ve height="" değerleri ver; html resim ekle konusuna bak.
Nihat 29/11/2020
siteden duyuruları marquee ile listelemek istiyorum. listeleme biçimimde ul-li tagları. ul-li tagları kullanarak duyuruları yanyana kayan yazı şeklinde yapabilir miyim?
yönetici 02/12/2020
Nihat, veri tabanından çekip yayınlayacaksan css float konusuna bak. Veritabanı kullanılmayacaksan hiç uğraşma ara açıp cümleleri yaz.
randombiri 06/12/2020
Ben fotoğraları koydum fakat en yukardaki foto kadrajdan çıkınca belli bir süre boş sayfaya bakıyorum bunu nasıl engellerim.
yönetici 14/12/2020
Fotoğraflar, büyük olabilir photoshop gibi proğramla küçültün.
Elif 11/02/2021
Hocam bu kodu blogger sitede yerleştirdim. Kod eklediğimde bir sıkıntı yok.
Fakat ben bu kayan resimlerin telefonda daha küçük olmasını istiyorum. Basit bir şekilde yapmam mümkün mü? Telefona uyumlu olması için ne yapmam gerekiyor.
yönetici 14/02/2021
Elif, Resmin width ve height Değerlerine yüzde değer ver.
Ahmet 10/03/2021
Playstrode resimleri kaydırmak için dokunarak kaydırabiyoruz. Bunu nasıl yaparız. Bir nesneyi parmağınızla kaydırarak nasıl diğer resime geçiş yaparız ?
yönetici 11/03/2021
Ahmet, javascript bilmen veya javascript hazır kütüphane bularak yapabilirsin. CSS ile yapılmış "slider" var. yukarıdan "slider" diye aratmalar yap. bazılarında auto özelliği kapatabiliyor.
Kaan 02/07/2021
Merhabalar, acaba bir resmin yukarı çıkıp tekrar aşşağı inmesini sonsuz bir döngü halinde hareket etmesini nasıl sağlarız?
yönetici 04/07/2021
Kaan html ile kısıtlı işlem yapılır css ile yapabilirsin. CSS Animations Nedir? konusuna bak.
Yusuf 19/10/2021
Merhabalar, Bu şekilde resimleri sağdan sola kaydırdım fakat sınıra gelince tekrar geri dönüyor. Bunu sonsuz yapmak istiyorum. Yardımcı olabilir misiniz?
yönetici 21/10/2021
HTML etiketlerle yapamazsın css kullanman gerekir. Arama kısmından "css amimation nedir" diye aratma yap.
meltem t. 07/12/2021
Hocam merhabalar. Aynı kayma işlemini div için de yapabilir miyiz? PHP içine ya da HTML'de bu mümkün müdür?
yönetici 09/12/2021
HTML div içine koyabilirsiniz.
Merve 08/09/2023
Mail adresimizdeki imza içinde yer alan taşeron şirketlerin logolarını websitemin altında kayarak sağa doğru gitmesini istiyorum fakat istediğim kadar logo ekleyemiyorum hepsinin yan yana olmasını ve sağa kaymasını nasıl sağlayabilirim
yönetici 08/09/2023
Merve, dediğin css animasyon komutu ile yapılır.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.
KATEGORİ
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
POPÜLER MAKALE
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- CSS YATAY MENÜ YAPIMI
- HTML RESİM EKLEME
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML DİV ve SPAN NEDİR?
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
