文中广告简单实现的个人总结

 

最近看了篇关于怎样实现文中广告的文章，因为之前碰到过这样的广告于是研究了一下如何实现的。希望能在最近的Asp.net项目中得到应用。简单说下原理：JS脚本能为我们完成一件非常重要的工作就是将广告关键字以自定义的格式代码补全，因为超级连接在一篇文章中看上去十分显眼且容易被发现，所以好好利用一下吧！？将厂商指定的广告关键字以超级连接的形式表现出来，当鼠标悬停在关键字上时激发onMouseOver事件目的是将一个未被显示和填充内容的<DIV>呈现出来以达到广告效果，架子搭好了那么剩下的事情就是在你软件的功能模块中往HTML中发送这些关键字了，我这里用隐藏域可能并不是最好的。但是也没仔细去琢磨放在哪更好。

至于广告内容和广告风格这就看你自己了。

此处是将广告关键字表示成超级连接的JS脚本：

<!--google_ad.js-->

 

thistest = document.all.bacontent.innerHTML; // 得到bacontent标签,innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.
AdList  =  document.getElementById( " HidAdList " ).value; // 获取隐藏域中的广告列表，列表生成内容由服务器维护，建议在业务类中最好用XML文件注入。
Keywords  =  AdList.split( " , " ); // split 方法将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
AdUrl = " http://www.csdn.net " ; // 广告商的连接地址啦!
Inmessage = " 广告内容 " ;
for  ( var  key  =   0 ; key  <  Keywords.length; key ++ )  ... {
if (Keywords[key] != "") ...{
thistest=thistest.replace(Keywords[key],"<a href='"+AdUrl+"' onMouseOver=showmessage('"+Inmessage+"') style='color:red;text-decoration:underline;'>"+Keywords[key]+"</a>");
//onMouseOver=方法 - 鼠标移动到对象时的响应事件； style='color:颜色 - 广告字体颜色；text-decoration:underline - 广告正文的样式为加下划线
}
}
document.all.bacontent.innerHTML = thistest;

 

 HTML页面文件：

 

< html >
< head >
< style  type ="text/css" > ...
<!--
#googletest {...}{
 position:absolute;
 width:244px;
 height:54px;
 z-index:1;
 display:none;
 overflow: hidden;
 padding: 6px;
 background-color: #FFFFFF;
 border: 3px solid #6699CC;
}
div {...}{
 font-size: 12px;
}
-->
</ style >
< title > 广告窗体 </ title >
< script  type ="text/javascript"  src ="show_ad.js" ></ script >
</ head >
< body >

< DIV  ID ="ticker"  style ="position:absolute;"  onMouseOver =""  onMouseOut ="aloofAd()" ></ DIV >
< input  id ="HidAdList"  type ="hidden"  value ="信息,化工,工作" />

< table  width ="800"  border ="0"  align ="center"  cellpadding ="0"  cellspacing ="0" >
   < tr >
     < td >< div  id =bacontent >       这是一个信息化工的时代，无处不充斥着几乎爆棚的信息，网络的快捷使信息传播加速。一切的工作，技术都在加速前进，人们为了在这样的时代生存，不得不加快脚步。于是，我们看到每个人都像热锅上的蚂蚁，不停打转。技术发展作为时代领头羊，更是让人眼花缭乱，之前还在说着奔腾，转眼间就已是酷睿天下了。专注于企业级应用的服务器领域，基本上就是新技术的试练场，去年英特尔刚发布四核处理器，转眼一年间，四核早已遍地开花，取代了原先主流的双核CPU，站上了霸主位置。仅从市场角度来看，目前主流的机型已由双路四核机取代了原有的双路双核机型，今天我们就来谈谈刚刚独占鳌头的双路四核机型。特尔今年中旬一声令下大力推广四核处理器的举动，获得众多服务器厂商的拥簇。服务器领域的三大制造厂商IBM，戴尔，惠普自然不甘人后，纷纷换核上阵，重整产品线。而我们今天就以2U机架式的机型为例，为用户推荐三款最为主流的机型。它们分别是戴尔旗下的PowerEdge2950，惠普Proliant DL380 G5及IBM System x3650。这三款笔者已经不厌其烦的介绍过很多遍了，换上四核后的它们也必将焕发新颜。 < p >  这是一个信息化的时代，无处不充斥着几乎爆棚的信息，网络的快捷使信息传播加速。一切的工作，技术都在加速前进，人们为了在这样的时代生存，不得不加快脚步。于是，我们看到每个人都像热锅上的蚂蚁，不停打转。技术发展作为时代领头羊，更是让人眼花缭乱，之前还在说着奔腾，转眼间就已是酷睿天下了。专注于企业级应用的服务器领域，基本上就是新技术的试练场，去年英特尔刚发布四核处理器，转眼一年间，四核早已遍地开花，取代了原先主流的双核CPU，站上了霸主位置。仅从市场角度来看，目前主流的机型已由双路四核机取代了原有的双路双核机型，今天我们就来谈谈刚刚独占鳌头的双路四核机型。特尔今年中旬一声令下大力推广四核处理器的举动，获得众多服务器厂商的拥簇。服务器领域的三大制造厂商IBM，戴尔，惠普自然不甘人后，纷纷换核上阵，重整产品线。而我们今天就以2U机架式的机型为例，为用户推荐三款最为主流的机型。它们分别是戴尔旗下的PowerEdge2950，惠普Proliant DL380 G5及IBM System x3650。这三款笔者已经不厌其烦的介绍过很多遍了，换上四核后的它们也必将焕发新颜。
     </ div ></ td >
   </ tr >
</ table >
< img  alt ="powerbookg4.jpg"  src ="index01.gif"  style ="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;"  onMouseOver ="this.style.MozOpacity=1;
this.filters.alpha.opacity=100"  onMouseOut ="this.style.MozOpacity=0.25;
this.filters.alpha.opacity=50" >
< script  type ="text/javascript"  src ="google_ad.js" ></ script >
  x=
   < input  type ="text"  name ="txt1" >
  y=
   < input  type ="text"  name ="txt2" >
</ body >
</ html >

 

将广告层显示出来这里就比较简单了：

<!--show_ad.js-->

document.onmousemove = handlerMM;
//  宽
var  tickerwidth = 200 ;

//  高
var  tickerheight = 150 ;

//  广告字体位置
var  tickerpadding = 5 ;

//  边
var  borderwidth = 1 ;

//  字体
var  fnt = " Verdana " ;

//  广告字体大小
var  fntsize = 10 ;

//  广告字体颜色
var  fntcolor = " #006600 " ;

//  字体磅数取1-9之间
var  fntweight = 9 ;

//  背景颜色
var  backgroundcolor = " #ffffff " ;

//  鼠标与广告体X轴距离
var  xdistance = 15 ;

//  鼠标与广告体Y轴距离
var  ydistance = 2 ;

// 鼠标坐标
var  mouseX,mouseY;

// 外边界
var  sideX,sideY;

// 内边界
var  insideX,insideY;
// 广告显示状态
var  show;

//  不要改变以下变量，方法中将被调用
var  topposition = 0 ;
var  leftposition = 0 ;
var  x,y;
var  message;
var  messagecontent = "" ;
var  imgtop = " index01.gif " ;
var  img2 = " AD.jpg " ;
var  imgfoot = " hc.gif " ;

// 获取消息内容,设置输出格式。
function  getmessagecontent()  ... {    
        messagecontent="<table border=1 bordercolor='#000000' cellspacing=0 cellpadding="+tickerpadding+">";
        
        messagecontent+="<tr><td bgcolor='#FFFFFF'><img src=' "+imgtop+" ' width='187' height='45' alt='中国银联' /></td></tr>";
        
        messagecontent+="<tr><td valign=top bgcolor='#FFFFFF'>";
        messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"   ; 
        messagecontent+="<font color='"+fntcolor+"'>";
        messagecontent+=message;
        messagecontent+="</font>";
        messagecontent+="</span>";
        messagecontent+="</td></tr>";
 
        messagecontent+="<tr><td bgcolor='#FFFFFF'><img src=' "+imgfoot+" ' width='120' height='19' /></td></tr>";
        messagecontent+="</table>";
  
}

// 显示消息
function  showmessage(linkmessage)  ... {   
  show="show";
     message=linkmessage;//存放广告信息
     leftposition=x+xdistance;//X坐标+鼠标与广告体X轴距离
     topposition=y+ydistance;//Y坐标+鼠标与广告体Y轴距离
  //将DIV显示出来
        document.all.ticker.style.posLeft=leftposition;//设置X坐标
        document.all.ticker.style.posTop=topposition;//设置Y坐标
  document.all.ticker.style.visibility="visible";//让它显示出来
        getmessagecontent();//将设置好的广告窗体加载近来
  ticker.innerHTML=messagecontent; //格式话补全
  
  //window.setTimeout("hidead()",5000);

}
// 隐藏特效
function  hidead()  ... {  
  //window.setTimeout("document.all.ticker.style.visibility='hidden'",1000);
  show="noneshow"
     document.all.ticker.style.visibility="hidden";//document修改了<DIV id = 'ticker' style='...  visibility : hidden;  ...' ></DIV> --表示:层不可见
}

// 鼠标焦点
function  handlerMM() ... {
     x =  document.body.scrollLeft+event.clientX;
  mouseX=x;
      //获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
     y =  document.body.scrollTop+event.clientY;  
  mouseY=y;
     //获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
  document.all.txt1.value=mouseX+"--->"+sideX;
  document.all.txt2.value=mouseY+"--->"+sideY;
  aloofAd(); 
}
// 离开广告
function  aloofAd() ... {
  sideX=leftposition+tickerwidth+30;
  sideY=topposition+tickerheight+30;
  insideX=leftposition-100;
  insideY=topposition-30;
  if(show=="show")...{
   if(x>sideX||y>sideY||x<insideX||y<insideY)...{
    hidead();
   }
  } 
}