เปิด page ขึ้นมาเเล้วโชว์ ballon ทันที
โพสต์แล้ว: 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>
เเต่หัวข้อนี้ ผมจะทำให้มี 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>