ผมใช้จาวาสคริปตัวนี้ทำโฆษณาลอยสองด้านครับ ซ้ายและขวา
นี่โค้ดครับ จาวาสคริปครับ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 0);
}
return el;
}
JSFX_FloatDiv("divBottomRight",1600,100).floatIt();
JSFX_FloatDiv("divBottomLeft",50,100).floatIt();
</script>
อันนี้โค้ด HTML & CSS ครับ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
<style>
#divBottomRight p, #divBottomLeft p{
padding: 2px 0 0 0;
margin: 0;
}
#divBottomRight, #divBottomLeft{
z-index: 150;
}
</style>
<!--ป้ายโฆษณาด้านซ้าย-->
<div id="divBottomLeft" style="position:absolute">
<p><a href="#" target="_blank"><img src="img/ads1.png" width="250" height="200"></a><br></p>
<p><a href="#" target="_blank"><img src="img/ads2.png" width="250" height="200"></a></p>
<p><a href="#" target="_blank"><img src="img/ads3.png" width="250" height="200"></a><br></p>
<p><a href="#" target="_blank"><img src="img/ads4.png" width="250" height="200"></a></p>
<!--ปุ่ม X-Close ด้านซ้าย-->
<div style="text-align:left ; width:125px; padding:0px; margin:0; ">
<a onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" style="cursor:pointer; padding:0px; margin:0;">
<STRONG><FONT style="height:10px; color:#ff0000;">ปิดโฆษณา</FONT></STRONG></a></div>
</div>
<!--ป้ายโฆษณาด้านขวา-->
<div id="divBottomRight" style="position:absolute">
<p><a href="#" target="_blank"><img src="img/ads5.png" width="250" height="200"></a><br></p>
<p><a href="#" target="_blank"><img src="img/ads6.png" width="250" height="200"></a></p>
<p><a href="#" target="_blank"><img src="img/ads7.png" width="250" height="200"></a><br></p>
<p><a href="#" target="_blank"><img src="img/ads8.png" width="250" height="200"></a></p>
<!--ปุ่ม X-Close ด้านขวา-->
<div style="text-align:left ; width:125px; padding:0px; margin:0; ">
<a onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" style="cursor:pointer; padding:0px; margin:0;">
<STRONG><FONT style="height:10px; color:#ff0000;">ปิดโฆษณา</FONT></STRONG></a></div>
</div>
เปิดด้วยจอขนาด Resolution 1920*1080 ผลเป็นปกตินะครับ แต่ลองให้เพื่อนไปเปิดกับพวกจอ 1366*768 กลายเป็นว่าโฆษณาฝั่งซ้ายบังเนื้อหาตรงกลาง ส่วนโฆษณาด้านขวาหายไปไหนไม่รู้ ผมไม่รู้จะตั้งค่ายังไงให้มันพอดีกับทุกขนาดจออ่ะครับ ช่วยทีครับติดแค่นี้จริงๆ ขอบคุณครับ
Javascript สำหรับทำโฆษณาลอยทั้งด้านซ้ายและขวามันบังเนื้อหาตรงกลางเว็บครับ
นี่โค้ดครับ จาวาสคริปครับ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
อันนี้โค้ด HTML & CSS ครับ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
เปิดด้วยจอขนาด Resolution 1920*1080 ผลเป็นปกตินะครับ แต่ลองให้เพื่อนไปเปิดกับพวกจอ 1366*768 กลายเป็นว่าโฆษณาฝั่งซ้ายบังเนื้อหาตรงกลาง ส่วนโฆษณาด้านขวาหายไปไหนไม่รู้ ผมไม่รู้จะตั้งค่ายังไงให้มันพอดีกับทุกขนาดจออ่ะครับ ช่วยทีครับติดแค่นี้จริงๆ ขอบคุณครับ