BlogJava-<h1><font color="red" size="36">︻┳═一Java</font></h1>-文章分类-Csshttp://www.blogjava.net/rain1102/category/27497.html<b><font color="#3C1435">最低奋斗目标：</font><font color="red">农妇，山泉，有点田！</font></b>zh-cnThu, 24 Jan 2008 16:43:00 GMTThu, 24 Jan 2008 16:43:00 GMT60自定义鼠标提示代码http://www.blogjava.net/rain1102/articles/177315.htmlEric.ZhouEric.ZhouWed, 23 Jan 2008 08:38:00 GMThttp://www.blogjava.net/rain1102/articles/177315.htmlhttp://www.blogjava.net/rain1102/comments/177315.htmlhttp://www.blogjava.net/rain1102/articles/177315.html#Feedback0http://www.blogjava.net/rain1102/comments/commentRss/177315.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/177315.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Tip </TITLE>
  <script type="text/JavaScript">
 function showTip(oEvent) {
  var oDiv = document.getElementById("divTip1");
  oDiv.style.visibility = "visible";
  oDiv.style.left = oEvent.clientX + 5;
  oDiv.style.top = oEvent.clientY + 5;
 }
 function hideTip(oEvent) {
  var oDiv = document.getElementById("divTip1");
  oDiv.style.visibility = "hidden";
 }
  </script>
 </HEAD>

 <BODY>
 <p>Move your mouser over the red square.</p>
 <div id="div1" style="background-color:red; height:50px; width:50px" onmouseover="showTip(event);" onmouseout="hideTip(event);"><div>
 <div id="divTip1" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">
  <span style="font-weight:bold">Custom Tooltip</span><br/>
 </div>
 </BODY>
</HTML>



Eric.Zhou 2008-01-23 16:38 发表评论
]]>可折叠区域实现代码http://www.blogjava.net/rain1102/articles/177308.htmlEric.ZhouEric.ZhouWed, 23 Jan 2008 08:20:00 GMThttp://www.blogjava.net/rain1102/articles/177308.htmlhttp://www.blogjava.net/rain1102/comments/177308.htmlhttp://www.blogjava.net/rain1102/articles/177308.html#Feedback0http://www.blogjava.net/rain1102/comments/commentRss/177308.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/177308.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Toggle </TITLE>
  <script type="text/JavaScript">
 function toggle(sDivId) {
  var oDiv = document.getElementById(sDivId);
  oDiv.style.display = (oDiv.style.display == "none") ? "block":"none";
 }
  </script>
 </HEAD>

 <BODY>
 <div style ="background-color:blue; color:white; font-weight:bold; padding:10px; cursor:pointer" onclick="toggle('divContent1');">Click Here</div>
 <div style="border:3px solid blue; height:100px;padding:10px" id="divContent1">
  This is some content to show and hide.
 </div>
 <div style ="background-color:blue; color:white; font-weight:bold; padding:10px; cursor:pointer" onclick="toggle('divContent2');">Click Here</div>
 <div style="border:3px solid blue; height:100px;padding:10px" id="divContent2">
  This is some content to show and hide.
 </div>
 </BODY>
</HTML>



Eric.Zhou 2008-01-23 16:20 发表评论
]]>snap给文章中的链接加上缩略图(小教程)（转载）http://www.blogjava.net/rain1102/articles/168953.htmlEric.ZhouEric.ZhouThu, 20 Dec 2007 02:36:00 GMThttp://www.blogjava.net/rain1102/articles/168953.htmlhttp://www.blogjava.net/rain1102/comments/168953.htmlhttp://www.blogjava.net/rain1102/articles/168953.html#Feedback0http://www.blogjava.net/rain1102/comments/commentRss/168953.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/168953.html标放到链接上就可以看到缩略图。
效果演示见本站首页

具体使用办法，
到snap网站可以申请到一段类似以下形式的代码：

<script defer id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&amp;key=739080a127808f9856fa43a8c91c4d21&amp;sb=1&amp;domain=dimlau.com"></script>

将代码置于页面代码的</head>前面就可以了。（经测试，为不拖慢速度，放在</body>前也可以，）

下面说说代码的修改：

1、使用默认的代码，鼠标移动到链接上时显示的效果是带搜索框的，但是可以通过修改代码来去掉搜索框，先看效果对比：
snap

修改方法是，将获得代码中的sb=1改成sb=0

2、默认代码效果是页面中的所有链接都有鼠标划过时显示缩略图效果。如果你想对某个特定链接禁用缩略图效果，可以对该链接加上一个分类来标识；
例如链接

<a href="xxxx">xxx</a>
，禁用缩略图的方法是写成
<a href="xxxx" class="snap_nopreview">xxx</a>

通常，一个页面里大部分链接我们都不想加入缩略图的，所以上述办法有点烦琐了。
其实可以通过修改代码中的ap=1为ap=0来使页面的所有链接在默认情况下不显示缩略图，这时只有链接写成以下格式的情况下才会有缩略图显示：

<a class="snap_preview" href="XXX">XXX</a>

对于上述各种情况，如果链接本身已经有了某个class分类，比如已经分类为class="123",可以用空格来分隔，并赋予多个class分类，比如
class="123 snap_nopreview"或者class="123 snap_preview"

以上为本人的一点小小心得，希望对各位看官有点帮助。
--------------------------------------------------------------------------------------------------------

对于我使用的MT，可以对模版中的评论者网站链接形式加入一个class="snap_preview"来实现对评论者网站界面的初步预览，我觉得是个不错的小工具。
当然其他程序，也可以做相应的修改实现该效果。我就不再多说了。



Eric.Zhou 2007-12-20 10:36 发表评论
]]>符合web标准插入Flash的方法http://www.blogjava.net/rain1102/articles/168268.htmlEric.ZhouEric.ZhouMon, 17 Dec 2007 08:57:00 GMThttp://www.blogjava.net/rain1102/articles/168268.htmlhttp://www.blogjava.net/rain1102/comments/168268.htmlhttp://www.blogjava.net/rain1102/articles/168268.html#Feedback0http://www.blogjava.net/rain1102/comments/commentRss/168268.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/168268.html符合web标准插入Flash的方法

Eric.Zhou 2007-12-17 16:57 发表评论
]]>使用CSS控制图片对齐方式http://www.blogjava.net/rain1102/articles/168013.htmlEric.ZhouEric.ZhouSat, 15 Dec 2007 15:04:00 GMThttp://www.blogjava.net/rain1102/articles/168013.htmlhttp://www.blogjava.net/rain1102/comments/168013.htmlhttp://www.blogjava.net/rain1102/articles/168013.html#Feedback0http://www.blogjava.net/rain1102/comments/commentRss/168013.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/168013.html

Eric.Zhou 2007-12-15 23:04 发表评论
]]>CSS样式切换技巧 - 动态更换网页色彩皮肤(转)http://www.blogjava.net/rain1102/articles/163809.htmlEric.ZhouEric.ZhouWed, 28 Nov 2007 12:58:00 GMThttp://www.blogjava.net/rain1102/articles/163809.htmlhttp://www.blogjava.net/rain1102/comments/163809.htmlhttp://www.blogjava.net/rain1102/articles/163809.html#Feedback2http://www.blogjava.net/rain1102/comments/commentRss/163809.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/163809.html样式与数据分离所带来的不只是符合标准这样的简单，样式既然与数据分离那么样式的切换则变得理所当然的了！但是网上这样的中文教程实在是太少了！所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考。

首先要具备不同内容的CSS文件（最好每个文件代表一种样式，或是代表需要作出变动的部分）。这里以三个为例：

第一个是背景为红色的CSS文件（red.css）CSS中的内容为：

Copy code

body {background-color:red;}

第二个是背景为绿色的CSS文件（green.css）CSS中的内容为： 

Copy code

body {background-color:green;}

第三个是背景为黄色的CSS文件（yellow.css）CSS中的内容为：

Copy code

body {background-color:yellow;}

然后在xthml文件中加入这三个CSS的链接

Copy code

<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>

这三个中除了title不一样外还有一个地方有所不同，那就是REL。第一个与第三个都是alternate stylesheet只有第二个是stylesheet。这第二个就是当然样式。

在链接下面再导入一个JS文件，用来控制这个样式切换

Copy code

function setActiveStyleSheet(title) {
  var i, a, main;
  if (title) {
  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
  a.disabled = true;
  if(a.getAttribute('title') == title) a.disabled = false;
  }
  }
  }
  }
  function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');
  }
  return null;
}


在合适的地方加入三个切换按钮

Copy code

<a href="javascript :void()" onclick="setActiveStyleSheet('red'); return false;" title="红色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('green'); return false;" title="绿色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('yellow'); return false;" title="黄色样式"></a>
<a href="javascript :void()" onclick="setActiveStyleSheet('none'); return false;" title="没有样式"></a>

好了发布试试点那三个切换链接！是不是已经切换了样式？


补遗：带有记忆功能的JS文档

Copy code

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+";
path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return
c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);



Eric.Zhou 2007-11-28 20:58 发表评论
]]> 对li元素进行样式化,实现水平放置http://www.blogjava.net/rain1102/articles/162471.htmlEric.ZhouEric.ZhouThu, 22 Nov 2007 13:37:00 GMThttp://www.blogjava.net/rain1102/articles/162471.htmlhttp://www.blogjava.net/rain1102/comments/162471.htmlhttp://www.blogjava.net/rain1102/articles/162471.html#Feedback0http://www.blogjava.net/rain1102/comments/commentRss/162471.htmlhttp://www.blogjava.net/rain1102/services/trackbacks/162471.html  display: inline;  //让所有的在一行
 list-style-type: none;
}

list-style-type的值可以为:
disc Default. Solid circles.
circle Outlined circles.
square Solid squares.
decimal 1, 2, 3, 4, and so on.
lower-roman i, ii, iii, iv, and so on.
upper-roman I, II, III, IV, and so on.
lower-alpha a, b, c, d, and so on.
upper-alpha A, B, C, D, and so on.
none No marker is shown


Eric.Zhou 2007-11-22 21:37 发表评论
]]>