|
|
主题: 图片轮显如何加上链接标题
|
yiliaocheng
职务：普通成员
等级：2
金币：2.0
发贴：631
|
#12006/5/28 12:12:53
我有个图片轮显的代码，但本人想修改下，使它可以显示每个图片链接页面的标题，可是我修改了多次却无法成功，关键在于链接href的title如何引用的问题，各位有什么高见请指点一二啊。代码如下： <script LANGUAGE="javascript">
<!--
var cpAD=new Array();
var cpADlink=new Array();
var cpADmsg=new Array();
var adNum=5; //定义了5个数组
var coll=0;
cpAD[0]="http://www.5dm.cn/upload/1498/banners/mba.gif"; //链接图片
cpADlink[0]="http://www.5dm.cn/"; //链接URL
cpADmsg[0]="mba.gif"; //状态栏提示信息
cpAD[1]="http://www.5dm.cn/upload/1498/banners/google.gif";
cpADlink[1]="http://www.5dm.cn/"
cpADmsg[1]="google.gif";
cpAD[2]="http://www.5dm.cn/upload/1498/banners/2005.gif";
cpADlink[2]="http://www.5dm.cn/";
cpADmsg[2]="2005.gif";
cpAD[3]="http://www.5dm.cn/upload/1498/banners/cz8y.gif";
cpADlink[3]="http://www.5dm.cn/";
cpADmsg[3]="cz8y.gif";
cpAD[4]="http://www.5dm.cn/upload/1498/banners/JG_YUEDU.gif";
cpADlink[4]="http://www.5dm.cn/";
cpADmsg[4]="JG_YUEDU.gif";
var preloadedimages=new Array();
for (i=1;i<cpAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=cpAD[i];
}
//跳转的URL地址
function jump2url()
{
jumpUrl=cpADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != '')
{
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
//图片变化的函数
function changeimg(n)
{
adNum=n;
switch(adNum)
{
case 0:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1-2.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 1:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2-2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 2:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3-2.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 3:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4-2.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 4:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5-2.gif";
break;
}
}
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
//当点击时直接跳转
function nextAd(){
coll++;
if(coll>1)
{
switch(adNum+1)
{
case 5:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1-2.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 1:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2-2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 2:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3-2.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 3:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4-2.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5.gif";
break;
}
case 4:
{
window.img1.src="http://www.5dm.cn/upload/1498/images/1.gif";
window.img2.src="http://www.5dm.cn/upload/1498/images/2.gif";
window.img3.src="http://www.5dm.cn/upload/1498/images/3.gif";
window.img4.src="http://www.5dm.cn/upload/1498/images/4.gif";
window.img5.src="http://www.5dm.cn/upload/1498/images/5-2.gif";
break;
}
}
}
if(adNum<cpAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.cpADrush.src=cpAD[adNum];
playTransition();
displayStatusMsg();
//定义了轮换时间 5s
theTimer=setTimeout("nextAd()", 5000);
}
function setTransition(){
if (document.all){
cpADrush.filters.revealTrans.Transition=23;
cpADrush.filters.revealTrans.apply();
}
}
function playTransition(){
if (document.all)
cpADrush.filters.revealTrans.play()
}
function displayStatusMsg() {
status=cpADmsg[adNum];
document.returnValue = true;
}
//结束
// -->
</script>
<table height="148" cellspacing="0" cellpadding="0">
<tr>
<td> <a href="javascript:jump2url()"> <img style="FILTER: revealTrans
(duration=2,transition=23)" height="150" src width="575" border="0"
name="cpADrush"></a></td>
<script language="JavaScript">nextAd()</script>
</tr>
<tr>
<td>
<table width="575" name="T1" id="T1" border="0" cellspacing="1" cellpadding="0">
<tr>
<td align="right"><img src="http://www.5dm.cn/upload/1498/images/dh_bg.gif" width="178"
height="16"></td>
<td width="20"><a href="javascript:;" onMouseOver="changeimg(0)"><img name="Image2"
id="img1" border="0" src="http://www.5dm.cn/upload/1498/images/1.gif" width="20"
height="16" onClick="changeimg(0)"></a></td>
<td width="20"><a href="javascript:;" onMouseOver="changeimg(1)"><img name="Image3"
id="img2" border="0" src="http://www.5dm.cn/upload/1498/images/2.gif" width="20"
height="16" onClick="changeimg(1)"></a></td>
<td width="20"><a href="javascript:;" onMouseOver="changeimg(2)"><img name="Image4"
id="img3" border="0" src="http://www.5dm.cn/upload/1498/images/3.gif" width="20"
height="16" onClick="changeimg(2)"></a></td>
<td width="20"><a href="javascript:;" onMouseOver="changeimg(3)"><img name="Image5"
id="img4" border="0" src="http://www.5dm.cn/upload/1498/images/4.gif" width="20"
height="16" onClick="changeimg(3)"></a></td>
<td width="20"><a href="javascript:;" onMouseOver="changeimg(4)"><img name="Image6"
id="img5" border="0" src="http://www.5dm.cn/upload/1498/images/5.gif" width="20"
height="16" onClick="changeimg(4)"></a></td>
</tr>
</table>
</td>
</tr>
</table>
|
浮尘
职务：普通成员
等级：3
金币：7.0
发贴：1258
|
|
yiliaocheng
职务：普通成员
等级：2
金币：2.0
发贴：631
|
#32006/5/28 22:02:23
和新浪体育的轮显图片差不多，但是没有显示图片连接文章的标题。
|
浮尘
职务：普通成员
等级：3
金币：7.0
发贴：1258
|
#42006/5/28 22:13:43
显示了呀。你是想怎么显示。在图片上面吗？
|
yiliaocheng
职务：普通成员
等级：2
金币：2.0
发贴：631
|
#52006/5/28 22:15:48
我想在图片下面加一行显示连接新闻的标题，同时把鼠标放到图片上显示图片连接新闻的标题。
|
浮尘
职务：普通成员
等级：3
金币：7.0
发贴：1258
|
#62006/5/30 11:59:06
这好实现啊
|
浮尘
职务：普通成员
等级：3
金币：7.0
发贴：1258
|
#72006/5/30 12:00:13
JS
if(typeof(RotatorPicBorderWidth)=="undefined")RotatorPicBorderWidth=1;
if(typeof(RotatorPicBorderColor)=="undefined")RotatorPicBorderColor="black";
var arrRotatorPicURL=RotatorPicURL.split(",");
var arrRotatorPicText=RotatorPicText.split(",");
var arrRotatorPicLink=RotatorPicLink.split(",");
var RotatorPicNo=0;
function setTransition(){
if (document.all){
RotatorPic.filters.revealTrans.Transition=Math.floor(Math.random()*23);
RotatorPic.filters.revealTrans.apply();
}
}
function playTransition(){
if(document.all)RotatorPic.filters.revealTrans.play();
}
function ShowNextRotatorPic(){
if(RotatorPicNo<arrRotatorPicURL.length-1){
RotatorPicNo++;
}else{
RotatorPicNo=0;
}
setTransition();
document.images.RotatorPic.src=arrRotatorPicURL[RotatorPicNo];
document.images.RotatorPic.title=arrRotatorPicText[RotatorPicNo];
document.all["NewsTitle"].innerText=arrRotatorPicText[RotatorPicNo];
playTransition();
RotatorPicTimer=setTimeout("ShowNextRotatorPic()",4000);
}
function Jump2RotatorPicLink(){
var jumpUrl=arrRotatorPicLink[RotatorPicNo];
window.open(jumpUrl);
}
document.write("<table cellpadding=0 cellspacing=0 border=0>");
document.write("<tr><td align=center>");
document.write("<img width="+RotatorPicWidth+" height="+RotatorPicHeight+" title='' onclick='Jump2RotatorPicLink();' src='javascript:ShowNextRotatorPic();' name=RotatorPic style='cursor:hand;border:"+RotatorPicBorderWidth+"px solid "+RotatorPicBorderColor+";filter:revealTrans(duration=2,transition=20)' galleryimg='no'>");
document.write("</td></tr>");
document.write("<tr><td align=center>");
document.write("<br><a href='javascript:;' onclick='Jump2RotatorPicLink();' name='NewsTitle' id='NewsTitle'>ABC</a>");
document.write("</td></tr>");
|
浮尘
职务：普通成员
等级：3
金币：7.0
发贴：1258
|
#82006/5/30 12:01:28
页面代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片轮转广告</title>
<style type="text/css">
body{margin:0px;}
</style>
<script language="JScript">
var RotatorPicWidth=150;
var RotatorPicHeight=98;
var RotatorPicBorderWidth=10;
var RotatorPicBorderColor="#000000";
var RotatorPicURL="rotator1.jpg,rotator2.jpg,rotator3.jpg,rotator4.jpg";
var RotatorPicText="遭遗弃的智利狼蛛,猎豹的威严,身价21.5万元的\"紫艳红花\",昆明蝴蝶园的珍稀蝴蝶";
var RotatorPicLink="http://www.baidu.com,http://www.google.com,http://www.3gcolor.com,http://www.9i50.com";
</script>
</head>
<body onselectstart="return false;" oncontextmenu="return false;">
<script src="RotatorPic_o1.js"></script>
</body>
</html>
|
yiliaocheng
职务：普通成员
等级：2
金币：2.0
发贴：631
|
#92006/5/30 12:20:56
多谢diffmaker。
|
