Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

haber linki

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
1 Misafir - 1 Masaüstü
5 sn
10
Cevap
0
Favori
700
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • Arkadaşlar merhabalar. çalışmalarınızda başarılar dilerim. şimdi bazı web sayfalarında görüyorum. alt alta haber başlıkları var, ve bunlar köprüye sahip. bu haber başlıklarının üzerine gelince sağ tarafta o haberin içeriğiyle ilgili resimler çıkıyor. yani linke tıklamadan, hangi linkin üzerine gelirseniz o haberle ilgili bilgi çıkıyor. bunu nasıl yapabilirim. ve bunu html sayfasında uygulayabilirmiyim



  • Hangi web sayfalarında gördüğünü de yaz. O sayfanın kodlarını, kodlardan anlayanlar yazabilir. Sen de fazla beklemezsin.
  • örneğin,www.yesileregli.com sitesinde var
  • http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm
  • dediğiniz linke baktım ama pek bir şey anlamadım. ne yapcam yaa...
  • Buradaki resimler yerine kendi resimlerini yaz. Çalışması lazım. 
       
      <html> 
      <head> 
      <title></title> 
      <style type="text/css"> 
      <!-- 
      body {position: relative; background: white; margin: 0; padding: 0;} 
       
      div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;} 
      div#links a {display: block; text-align: center; font: bold 1em sans-serif;  
         padding: 5px 10px; margin: 0 0 1px; border-width: 0;  
         text-decoration: none; color: white; background: gold; 
         border-right: 5px solid lightsagreen;} 
      div#links a:hover {color: deeppink; background: skyblue; 
         border-right: 5px double orange;} 
       
      div#links a span {display: none;} 
      div#links a:hover span {display: block; 
         position: absolute; top: 180px; left: 0; width: 125px; 
         padding: 5px; margin: 10px; z-index: 100; 
         color: purple; background: turquoise; 
         font: 10px Verdana, sans-serif; text-align: center;} 
       
      --> 
      </style> 
      </head> 
      <body> 
       
      <div id="links"> 
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://mutasyon.net/" data-href="http://mutasyon.net/">anasayfa<span> Ana sayfadır. Buradan diğer kısımlara ulaşabilirsiniz. Bilgisayar ile ilgili bilgiler içeren bir site.<img src="agac.bmp"></span></a> 
       
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://mutasyon.net/dersler.asp" data-href="http://mutasyon.net/dersler.asp">Dersler<span> Dersler kısmına götürür. Konu anlatımları vardır. Bir bakın. <img src="saat.bmp"> </span></a> 
       
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://mutasyon.net/kitaplar.asp" data-href="http://mutasyon.net/kitaplar.asp">Kitaplar<span> Kitapları indirmek için buraya tıklayın. <img src="KUMANDA.bmp"> </span></a> 
       
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://mutasyon.net/makaleler.asp" data-href="http://mutasyon.net/makaleler.asp">Makaleler<span> Bilgisayar ile ilgili makaleleri burada bulabilirsiniz.<img src="tablo1.bmp"></span></a> 
       
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://mutasyon.net/sorular.asp" data-href="http://mutasyon.net/sorular.asp">Sorular<span> Sorulan sorulara verilen cevapları burada bulacaksınız. <em>Daha tıklamadınız mı?</em>Tıkla o zaman.<img src="tablo2.bmp"></span></a> 
       
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://forum.mutasyon.net/" data-href="http://forum.mutasyon.net/">forum<span> Forumsuz kalmayın. Foruma buradan ulaşın. <img src="cicek.bmp"></span></a> 
       
      </div>


    Bendeki diğer kod da bu: 
      
      <style type="text/css"> 
      ul { 
      list-style-type: none; 
      margin:0; 
      padding:0; 
      position: absolute;  
      top: 2em; /* Menu position that can be changed at will */ 
      left: 3em; 
      } 
       
      li { 
      float: left; 
      } 
       
      .menu a {       /* definition for each button in the menu */ 
      width: 100px;	   /* button width that can be changed at will */ 
      height: 20px; 
      float: left; 
      display: block; 
      text-align: center; 
      border: 1px solid #fff;  
      text-decoration: none; 
      color: #000; 
      background: #fff; 
      } 
       
      .menu a:hover { 
      color: #411; 
      background: #AAA; 
      border: 1px solid gray;  
      border-bottom: 0px; 
      color: #fff; 
      } 
       
      .menu a span {     /* definition of <span> tag included in <a> */ 
      display: none; 
      } 
       
      .menu a:hover span {   /* definition of the <span> tag when hovering */ 
      display: block; 
      position: absolute; 
      top: 20px; 
      left: 0; 
      width: 600px;       /* Tooltips zone width according to menu width */ 
      text-align: left; 
      border-top: 1px solid gray; 
      color: #000; 
      } 
      </style> 
       
       
      <body> 
      <ul class="menu"> 
      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://www.mutasyon.net" data-href="http://www.mutasyon.net">Mutasyon<span><img src="cicek.bmp">"</span></a></li> 
      <li> 
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://forum.mutasyon.net" data-href="http://forum.mutasyon.net">forum<span><img src="agac.bmp"></span></a></li> 
      <li> 
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://www.mutasyon.net/dersler.asp" data-href="http://www.mutasyon.net/dersler.asp">dersler<span><img src="saat.bmp"> </span></a></li> 
      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://www.mutasyon.net/kitaplar.asp" data-href="http://www.mutasyon.net/kitaplar.asp">Kitaplar<span>Kitapları indirebilirsin. <img src="KUMANDA.bmp"></span></a></li> 
      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12241563&url=http://www.mutasyon.net/sorular.asp" data-href="http://www.mutasyon.net/sorular.asp">Sorular<span>sorular ve <em>cevaplarını</em> burada bulabilirsin. <img src="kupZeka.bmp"></span></a></li> 
      <li><a href="http://pc.net.com">Pc net<span>Bilgisayar ile ilgili bir site. 
      <img src="ev1.bmp"></span></a></li> 
      </ul>



    < Bu mesaj bu kişi tarafından değiştirildi sanal47 -- 9 Şubat 2007; 19:17:18 >




  • dostum çok teşekkürler, hemen deniyeceğim
  • evet dediğin gibi çalışıyor. eline sağlık . yalnız şöyle bir şey yapmak istiyordum ben. o menüler sağ tarafta olacak, haber ve resimler sol tarafta açılacak. uğraştım olmadı. nasıl olacak ki..
  • Daha önce benzer bir soru sorulmuştu. Ben de verilen linkteki scriptti yazmıştım. Linkler solda resimler sağda idi onda.

    Menü solda, resimler sağda: 
       
      <style type="text/css"> 
      ul { 
      list-style-type: none; 
      margin:0; 
      padding:0; 
      position: absolute;  
      top: 1em; /* Menu position that can be changed at will */ 
      left: 3em; 
      } 
       
      li { 
      /*float: left;*/ 
      } 
       
      .menu a {       /* definition for each button in the menu */ 
      width: 100px;	   /* button width that can be changed at will */ 
      height: 20px; 
      float: left; 
      display: block; 
      text-align: center; 
      /* border: 1px solid #fff;*/  
      text-decoration: none; 
      color: #000; 
      background: #fff; 
      } 
       
      .menu a:hover { 
      color: #411; 
      background: #AAA; 
      /*border: 1px solid gray;*/  
      border-bottom: 0px; 
      color: #fff; 
      } 
       
      .menu a span {     /* definition of <span> tag included in <a> */ 
      display: none; 
      } 
       
      .menu a:hover span {   /* definition of the <span> tag when hovering */ 
      display: block; 
      position: absolute; 
      top: 1em; 
      left: 100; // bunu değiştirdim. 
      width: 600px;       /* Tooltips zone width according to menu width */ 
      text-align: left; 
      /* border-top: 1px solid gray;*/ 
      color: #000; 
      } 
      </style> 
       
       
      <body> 
      <ul class="menu"> 
      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12260007&url=http://www.mutasyon.net" data-href="http://www.mutasyon.net">Mutasyon<span><img src="cicek.bmp">"</span></a></li> 
      <li> 
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12260007&url=http://forum.mutasyon.net" data-href="http://forum.mutasyon.net">forum<span><img src="agac.bmp"></span></a></li> 
      <li> 
      <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12260007&url=http://www.mutasyon.net/dersler.asp" data-href="http://www.mutasyon.net/dersler.asp">dersler<span><img src="saat.bmp"> </span></a></li> 
      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12260007&url=http://www.mutasyon.net/kitaplar.asp" data-href="http://www.mutasyon.net/kitaplar.asp">Kitaplar<span>Kitapları indirebilirsin. <img src="KUMANDA.bmp"></span></a></li> 
      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=12260007&url=http://www.mutasyon.net/sorular.asp" data-href="http://www.mutasyon.net/sorular.asp">Sorular<span>sorular ve <em>cevaplarını</em> burada bulabilirsin. <img src="kupZeka.bmp"></span></a></li> 
      <li><a href="http://pc.net.com">Pc net<span>Bilgisayar ile ilgili bir site. 
      <img src="ev1.bmp"></span></a></li> 
      </ul>



    < Bu mesaj bu kişi tarafından değiştirildi sanal47 -- 10 Şubat 2007; 15:37:39 >




  • ilginize teşekkür ederim. dediğiniz gibi kodları kopyaladım. fakat bu sefer de basamaklanmış bir halde çıkıyor. yani benim anlattığım gibi değil..
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız