点击右侧标题左侧变换图片

xhtml

<div id="ads">
  <div class="block1">
    <ul>
      <li><h3>title</h3></li>
      <li><a href=""><span class="b1"></span>this is title 1.</a></li>
      <li><a href=""><span class="b2"></span>this is title 2.</a></li>
      <li><a href=""><span class="b3"></span>this is title 3.</a></li>
      <li><a href=""><span class="b4"></span>this is title 4.</a></li>
      <li><a href=""><span class="b5"></span>this is title 5.</a></li>
    </ul>
  </div>
</div>

Css

<style>
*{ margin:0; padding:0; list-style:none;}
body{ padding:50px; font-size:12px; line-height:1.8; font-family:Verdana, Arial, "宋体"}
#ads{ border:1px solid #CC0000}

.block1{margin:10px;background: url(http://www.zishu.cn/attachments/month_0712/h2007124221631.gif) no-repeat;background-position: left 10px;}
* html .block1{background-position: left 22px;} //这里是为了处理IE67FIREFOX的差别
*+html .block1{background-position: left 22px;}
.block1 ul{ padding-left:120px;}
.block1 a:active,.block1 a:hover{cursor:pointer}//处理IE6可能出现的问题
.block1 a:hover span,.block1 a:active span{z-index:20px; display:block; position:absolute; width:100px; height:100px; margin-left:-120px}

.b1{ background:url(http://www.zishu.cn/attachments/month_0712/n2007124221636.gif); margin-top:-15px;}
.b2{ background:url(http://www.zishu.cn/attachments/month_0712/12007124221641.gif); margin-top:-37px;}
.b3{ background:url(http://www.zishu.cn/attachments/month_0712/j2007124221644.gif); margin-top:-59px;}
.b4{ background:url(http://www.zishu.cn/attachments/month_0712/e2007124221648.gif); margin-top:-81px;}
.b5{ background:url(http://www.zishu.cn/attachments/month_0712/e2007124221652.gif); margin-top:-103px;}
</style>