เปิด page ขึ้นมาเเล้วโชว์ ballon ทันที

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: เปิด page ขึ้นมาเเล้วโชว์ ballon ทันที

เปิด page ขึ้นมาเเล้วโชว์ ballon ทันที

Post by jataz2 » 22/02/2011 12:06 pm

java script ที่ไว้ทำ balloon tooltip เมื่อเอา mouse hover ลิงค์ต่างๆ นั้นมีตัวอย่างในเว็บให้ดูมากมายครับ มี java script หนึ่งที่ผมเเนะนำคือ mootools ครับ
เเต่หัวข้อนี้ ผมจะทำให้มี balloon เกิดขึ้นทันที เมื่อ pageload ประโยชน์คือเพิ่มช่องทาง alert ให้เห็นได้ชัดเจนขึ้น เเทนที่จะแสดง balloon เฉพาะเมื่อ mouserhover เท่านั้น

สิ่งที่ต้องใช้ 1. jquery-1.4.2.min.js หรือเวอร์ชันที่ใหม่กว่า ดาวน์โหลดได้ที่ http://docs.jquery.com/Downloading_jQuery
2. รูปที่ใช้เป็น popup ในที่นี้ชื่อ PopAlert.jpg ขนาด 299*145

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="file:///C:/Documents%20and%20Settings/kittiphongc/Desktop//jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a').click(function ()//เมื่อคลิกที่ balloon
{
jQuery('div.bubble-share').hide('slow'); //ซ่อนทุกๆ <div> ที่ใช้ class bubble-share จริงๆก็คือคลิก x เพื่อปิด ballon นั่นเอง
return true;
});
});
</script>
<style type="text/css">
/* page load เเล้วโชว์ ballon ทันที */
form, form * {
font-family:tahoma;
font-size:12px;
}
.bubble-share {
background:url("file:///C:/Documents%20and%20Settings/kittiphongc/Desktop//popalert.jpg") no-repeat 0 0 transparent;
bottom:60px;
color:#AB3000;
display:none;
height:125px;
position:absolute;
width:254px;
}
.bubble-share p {
font:14px/55px tahoma;
margin:0;
text-align:left;
}
/* end */
</style>
</head>
<body>
<form id="form1" runat="server">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="a" runat="server">
This area won't be hide when close ballon
</div>
<div id="divPool" style="padding-left:140px;" runat="server">
<a href="#">
<div id="div1" class="bubble-share" style="display: block;"></div>
</a>
</div>
<br/>
<br/>
<div id="b" runat="server">
This area won't be hide when close ballonon
</div>
</form>
</body>
</html>
Attachments
example.jpg
example.jpg (43.82 KiB) Viewed 3081 times

Top