Daha önceki flash tooltip çalışmamızı geliştiriyoruz.

Web tasarım çalışmalarınızı biraz renklendirmek için küçük bir uygulama yapacağız. Kendi tarzınıza göre kolayca düzenleyebileceğiniz bu çalışma, flash web tasarım örneklerinde bulabileceğiniz önceki bir çalışmanın geliştirilmişidir. web tasarım larınızda kullanabileceğiniz bu uygulamaları parçalayarak istediğiniz bölümünü (ücretli veya ücretsiz)projelerinizde kullanabilirsiniz fakat başkalarıyla paylaşırken lütfen kaynak belirtiniz.

Son yaptığımız dinamik yazı efekti ile daha önceden yaptığımız flash tooltip uygulamamızı birleştirdikten sonra işin içine biraz javascript katarak linklerin titlelerini süsleyeceğiz.

İlk olarak flash dosyamızı yapalım. baslik isimli değişkenimizi dinamik yazı efektimizle ekrana basan bir dosya hazırlayalım. Bunun için Dinamik yazı animasyonu örneğinde kullanığımızın aynısını yapabilirsiniz. sadece font boyutunu küçültmeniz iyi olacaktır.

Daha sonra sayfadaki linklerin title bilgilerini alan ve üzerlerine gelindiğinde bizim flash animasyonumuza başlık değişkeni olarak bu title verisini gönderecek ve flash dosyamızı mosenin yanında konumlandıracak bir javascript kodu çağıralım.

 
<script type="text/javascript">var ftf="title.swf"</script>
<script type="text/javascript" 
src="http://www.flashwebtasarimi.com/depo/ftitle.js"></script>
 

kodlarda önce sufle adında bir değişken tanımlanarak linklerin üzerine gelindiğinde title bilgileri bu değişkene aktarılarak siliniyor. sonrasında sayfa içerisindeki bir divin içine flash dosyamız eklenerek sayfaya yerleştiriliyor. Son kısımda ise flash dosyamızın olduğu divi mousenin pozisyonuna göre ayarlıyoruz.

java kodları

 
//flash title (29,07,201)
//By Flash Web Tasarimi: http://www.flashwebtasarimi.com
document.writeln('<div style="display:none; position:absolute" 
id="tiyoludiv"></div>');
  var sufle="";
var fth="33px";
  function tiyoal(bu){
  tiyolu=document.getElementById("tiyoludiv")
  sufle=bu.title;
  tiyoen=sufle.length*10;
  bu.title="";
  farebul(bu)
  tiyolu.style.width=tiyoen+"px";
  tiyolu.innerHTML = "<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' 
  codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.
  cab#version=6,0,0,0' 
  WIDTH='"+tiyoen+"' HEIGHT='"+fth+"' id='contents' ALIGN=''>
  <PARAM NAME=movie value='"+ftf+"' /><PARAM NAME=quality VALUE=high>
  <PARAM NAME=flashvars id=objflashvars VALUE='baslik="+sufle+"'>
  <PARAM NAME=wmode VALUE=transparent><embed src='"+ftf+"' 
  flashvars='baslik="+sufle+"' quality='high' wmode='transparent' 
  width='"+tiyoen+"' height='"+fth+"' name='contents' 
  align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' 
  pluginspage='http://www.macromedia.com/go/getflashplayer' /></OBJECT>";
  tiyolu.style.display="block"
  }
  function tiyover(bu){	bu.title=sufle;	tiyolu.style.display="none";}
  
  function ptitle(){
  var atags=document.getElementsByTagName("a")
  for (var t=0; t<atags.length; t++){ 
  atags[t].onmouseover=function(e){tiyoal(this)}
  atags[t].onmouseout=function(e){tiyover(this)}
  }
  }
  
  if (window.addEventListener)
  window.addEventListener("load", ptitle, false)
  else if (window.attachEvent)
  window.attachEvent("onload", ptitle)
  
  var IE = document.all ? true : false;
  if (!IE) document.captureEvents( Event.MOUSEMOVE )
  document.onmousemove = farebul;
  var fareX = 0;
  var fareY = 0;
  function farebul(e) {
  if (IE) {
  fareX = event.clientX + document.body.scrollLeft;
  fareY = event.clientY + document.body.scrollTop;
  }else {
  fareX = e.pageX;
  fareY = e.pageY;
  }
  if (fareX < 0){fareX = 0;}
  if (fareY < 0){fareY = 0;}
  tiyolu=document.getElementById("tiyoludiv")
  tiyolu.style.top=fareY+20+"px"
  tiyolu.style.left=fareX+30+"px"
  return true;
  }

Sayfamıza, flash dosyamızı ekleyeceğimiz divimizi yerleştiriyoruz ve css özelliğini position:absolute yapıyoruz. Div adları ve diğer kısımları nasıl olsa kendinize göre düzenleyeceğiniz için ve işime dönmem gerektiğinden dolayı es geçiyorum. Örnek dosyaları biraz kurcalarsanız kolayca çözebilirsiniz.

Hepimize iyi çalışmalar...

doyaları indir