<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.knowsky.com/http://www.dynamicdrive.com/cssexamples/media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" /><br />So real, its unreal. or is it?</span></a>

#content { overflow:auto; height:200px; width:600px; background:#f00;}

html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%;}

html { overflow:hidden; border:0; height:100%; max-height:100%;}
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}

#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}

#content { height:100%; position:relative; z-index:1; overflow:auto;}

html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}
body { height:100%; max-height:100%; margin:0; overflow:hidden;}

#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
* html #content { top:100px; bottom:0; height:100%;}

#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#f00; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;}

<script language="JavaScript">
function toggleVisibility(me){
  if (me.style.visibility=="hidden"){
   me.style.visibility="visible";
   }
  else {
   me.style.visibility="hidden";
   }
  }
</script>

<div onclick="toggleVisibility(this)" style="position:relative">

<script language="JavaScript">
function toggleDisplay(me){
  if (me.style.display=="block"){
   me.style.display="inline";
   alert("文本目前是：inline.");
   }
  else {
   if (me.style.display=="inline"){
    me.style.display="none";
    alert("文本目前是:none. 3秒钟后自动重新显示。");
    window.setTimeout("blueText.style.display=block;",3000,"JavaScript");
    }
   else {
    me.style.display="block";
    alert("文本目前是:block.");
    }
   }
  }
</script>

<div>在<span id="blueText" onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

##textarea cols="60" name="msg" rows="5" class="ipt-txt" style="background:url() center no-repeat #fff;">##/textarea>

Create TABLE `#@__mood` (
  `id` int(11) NOT NULL auto_increment,
  `aid` int(11) NOT NULL,
  `mood1` int(10) NOT NULL default '0',
  `mood2` int(10) NOT NULL default '0',
  `mood3` int(10) NOT NULL default '0',
  `mood4` int(10) NOT NULL default '0',
  `mood5` int(10) NOT NULL default '0',
  `mood6` int(10) NOT NULL default '0',
  `mood7` int(10) NOT NULL default '0',
  `mood8` int(10) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;
Create TABLE `#@__mood_ranking` (
  `id` int(11) NOT NULL auto_increment,
  `aid` int(10) NOT NULL,
  `mood` int(1) NOT NULL,
  `time` int(11) NOT NULL,
  `ip` varchar(15) NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `aid` (`mood`,`aid`,`time`,`ip`)
) ENGINE=MyISAM;

<!--Ray:mood code start-->
<script language='javascript' type='text/javascript' src='{dede:global.cfg_cmsurl/}/include/dedeajax2.js'></script>
<script language="javascript">
function mood(){
  var mood_obj = document.getElementById('_mood');
  myajax = new DedeAjax(mood_obj,false,false,"","","");
  myajax.SendGet2("{dede:global name='cfg_phpurl'/}/mood/mood.php?aid={dede:field name='aid'/}&up="+10*Math.random());
  DedeXHTTP = null;
}
function moodGet(mood)
{
  var mood_obj = document.getElementById('_mood');
  myajax = new DedeAjax(mood_obj,false,false,"","","");
  myajax.SendGet2("{dede:global name='cfg_phpurl'/}/mood/mood.php?aid={dede:field name='aid'/}&action=mood&mood="+mood+"&up="+10*Math.random());
  myajax = null;
}
</script>
<!--Ray:mood code end-->

<!--Ray:mood code transfer start-->
<div id="_mood">数据统计中，请稍等！</div>
<script language="JavaScript">mood();</script>
<!--Ray:mood code transfer end-->

date 2010-03-14
time 20:20