请教这个校报功能么样的实现的(100分求教)高手指点

用javascript来判断namelist元素的位置实现的。

lz可以看看页面源代码中的js代码就知道了。

是比较难打开！只是一个报纸然后上面添加了相应的时间
你可以查看下源文件就一个<div class="baozhi" id="showpic"> </div>通过http://weekly.hustnews.com/index/js/load.js这个JS动态的加载图片
通过ajax来设置图片的效果

div的边框加粗加上气泡提示！！

配上背景图就行了
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head> <body>
<DIV style="CLEAR: both"></DIV>
<DIV class=left>
<DIV class=baozhi id=showpic>
<DIV style="BACKGROUND: url(http://weekly.hustnews.com/index/pic/2009/3/170.jpg) no-repeat; WIDTH: 409px; POSITION: relative; HEIGHT: 597px">
<DIV style="BACKGROUND: url(image/banner.gif) no-repeat; WIDTH: 100%; HEIGHT: 100%"></DIV>
<DIV id=div1249 style="DISPLAY: none; FONT-SIZE: 12px; Z-INDEX: 22; LEFT: 316px; WIDTH: 210px; POSITION: absolute; TOP: 332px">
<DIV style="MARGIN-LEFT: 15px"><IMG src="http://weekly.hustnews.com/index/image/tip.gif"></DIV>
<DIV style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #45070b; PADDING-TOP: 8px; BACKGROUND-COLOR: #eb545d; TEXT-ALIGN: center"><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 14px">我校学习实践活动主题的内涵</SPAN> </DIV></DIV>
<DIV onmouseover="this.style.border='red 2px solid';document.getElementById('div1249').style.display='block';" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; LEFT: 316px; BORDER-LEFT: medium none; WIDTH: 60px; CURSOR: pointer; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 93px; HEIGHT: 232px" onclick="window.location.href='#word_news_id=1249';FirstLoad()" onmouseout="this.style.border='';;document.getElementById('div1249').style.display='none';"></DIV>
<DIV id=div1246 style="DISPLAY: none; FONT-SIZE: 12px; Z-INDEX: 22; LEFT: 34px; WIDTH: 210px; POSITION: absolute; TOP: 248px">
<DIV style="MARGIN-LEFT: 15px"><IMG src="http://weekly.hustnews.com/index/image/tip.gif"></DIV>
<DIV style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #45070b; PADDING-TOP: 8px; BACKGROUND-COLOR: #eb545d; TEXT-ALIGN: center">敢于竞争善于转化聚精会神科学发展<BR><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 14px">学习实践科学发展观活动动员大会召开</SPAN> </DIV></DIV>
<DIV onmouseover="this.style.border='red 2px solid';document.getElementById('div1246').style.display='block';" style="BORDER-RIGHT: red 2px solid; BORDER-TOP: red 2px solid; LEFT: 34px; BORDER-LEFT: red 2px solid; WIDTH: 274px; CURSOR: pointer; BORDER-BOTTOM: red 2px solid; POSITION: absolute; TOP: 93px; HEIGHT: 148px" onclick="window.location.href='#word_news_id=1246';FirstLoad()" onmouseout=";document.getElementById('div1246').style.display='none';"></DIV>
<DIV id=div1247 style="DISPLAY: none; FONT-SIZE: 12px; Z-INDEX: 22; LEFT: 34px; WIDTH: 210px; POSITION: absolute; TOP: 528px">
<DIV style="MARGIN-LEFT: 15px"><IMG src="http://weekly.hustnews.com/index/image/tip.gif"></DIV>
<DIV style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #45070b; PADDING-TOP: 8px; BACKGROUND-COLOR: #eb545d; TEXT-ALIGN: center"><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 14px">华中科技大学深入学习实践科学发展观活动实施方案</SPAN> </DIV></DIV>
<DIV onmouseover="this.style.border='red 2px solid';document.getElementById('div1247').style.display='block';" style="LEFT: 34px; WIDTH: 337px; CURSOR: pointer; POSITION: absolute; TOP: 338px; HEIGHT: 183px" onclick="window.location.href='#word_news_id=1247';FirstLoad()" onmouseout="this.style.border='';;document.getElementById('div1247').style.display='none';"></DIV>
<DIV id=div1248 style="DISPLAY: none; FONT-SIZE: 12px; Z-INDEX: 22; LEFT: 34px; WIDTH: 210px; POSITION: absolute; TOP: 333px">
<DIV style="MARGIN-LEFT: 15px"><IMG src="http://weekly.hustnews.com/index/image/tip.gif"></DIV>
<DIV style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #45070b; PADDING-TOP: 8px; BACKGROUND-COLOR: #eb545d; TEXT-ALIGN: center">李忠杰论述如何“把学习实践科学发展观提高到新水平”<BR><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 14px">拓展视野辩证思维求真务实</SPAN> </DIV></DIV>
<DIV onmouseover="this.style.border='red 2px solid';document.getElementById('div1248').style.display='block';" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; LEFT: 34px; BORDER-LEFT: medium none; WIDTH: 274px; CURSOR: pointer; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 247px; HEIGHT: 79px" onclick="window.location.href='#word_news_id=1248';FirstLoad()" onmouseout="this.style.border='';;document.getElementById('div1248').style.display='none';"></DIV></DIV></DIV></DIV>
</body>
</html>

onclick="window.location.href='#word_news_id=1249';FirstLoad()" 当然你在写新闻的时候，要传递编号了

首先设置图片热点，由于热点不能设置边框，所以只能采取
动态创建div模拟，并且绝对定位，设置边框即可。
<style>
*{margin:0;}
</style>
<script language="JavaScript">
function createDiv(left,top,width,height)
{
    var rect=document.createElement("DIV");
    rect.id="rect";
    rect.style.position="absolute";
    rect.style.left=left;
    rect.style.top=top;
    rect.style.width=width;
    rect.style.height=height;
    rect.style.border="2px solid #eb545d";
    document.body.appendChild(rect);

    var info=document.createElement("DIV");
    info.id="info";
    info.style.position="absolute";
    info.style.marginTop=5;
    info.style.left=left;
    info.style.top=top+height;
    info.style.width=width;
    info.style.height=height/2;
    info.style.backgroundColor="#eb545d";
    info.innerHTML="文本";
    document.body.appendChild(info);
}
function removeDiv()
{
    var rect=document.getElementById("rect");
    if(rect)
    {
        document.body.removeChild(rect);
    }
    var info=document.getElementById("info");
    if(info)
    {
        document.body.removeChild(info);
    }
}</script>
<img src="http://www.baidu.com/img/baidu_logo.gif" border="0" usemap="#SystemMap" id="img1" style="margin:0"/>
<map id="SystemMap" name="SystemMap">
<area shape="rect" coords="0,0,108,130" href="http://www.baidu.com/" alt="Bai" onmouseover="createDiv(0,0,108,130)" onmouseout="removeDiv()"/>
<area shape="rect" coords="108,0,160,130" href="http://www.baidu.com/" alt="Logo" onmouseover="createDiv(108,0,52,130)" onmouseout="removeDiv()"/>
<area shape="rect" coords="160,0,270,130" href="http://www.baidu.com/" alt="百度" onmouseover="createDiv(160,0,110,130)" onmouseout="removeDiv()"/>
</map>

===========================
这些HTML代码都是在后台生成出来的。你可以再生产的时候把编号添加上，然后如果实现这样的效果。你肯定得需要几块不同的新闻模块。
每个模块生成出来的板块大小都一样，例如现实中的报纸一样，都是有板块的。

1：可以通过你所谓的切割图片，图片的热区来实现
2：可以把图片作为背景图，然后图片上面是DIV来实现

调试易

请教这个校报功能么样的实现的(100分求教)高手指点

解决方案 »