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=rightgt;

<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.

önizleme buton

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:


 

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 <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.

<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>	
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

2878

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.