3

我不确定如何将链接添加到我的图像以使它们在新选项卡中可点击。以下代码自动旋转我的图像并具有允许您选择显示哪个图像的按钮，但我不知道如何为每个图像添加链接以将用户带到新选项卡中的链接。任何帮助将不胜感激。谢谢！

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image-Text</title>

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
var num=0;

imgArray = [  
 ['pic1.png','Text for Picture 1'],
 ['pic2.png','Text for Picture 2'],
 ['pic3.png','Text for Picture 3'],
 ['pic4.png','Text for Picture 4']
];
/*
*/

function LimitNumber(value) {
  if (value < 0) { value = imgArray.length - 1; }
  var value = value % imgArray.length;
  return value; 
}
function slide(slide_num,Mypic,Mylbl) {
  document.getElementById(Mypic).src=imgArray[slide_num][0];
  document.getElementById(Mylbl).innerHTML=imgArray[slide_num][1];
}

var timedNum = 0;

function TimedImage() {
  timedNum++;
  timedNum = LimitNumber(timedNum);
  slide(timedNum,'mypic','mylbl');
}

var timedFunc = '';
function InitTimeInterval() {
  timedFunc = setInterval("TimedImage()",3000);
}

function DisplaySlides(SNo) {
  clearInterval(timedFunc);
  slide(SNo,'mypic','mylbl');
}

</SCRIPT>

</head>
<body onLoad="InitTimeInterval()">

<center>
<TR>
<TH>
<button onClick="DisplaySlides(0)">T3K's Game Pick</button>
<button onClick="DisplaySlides(1)">T3K's Hardware Pick</button>
<button onClick="DisplaySlides(2)">MEA's Game Pick</button>
<button onClick="DisplaySlides(3)">MEA's Hardware Pick</button>
</TH>
</TR>

<TABLE border="0"><TR><TD>
<TR>
<TH>
  <div class="slide">
  <IMG id="mypic" SRC="pic1.png" alt="" BORDER="0" HEIGHT="218" WIDTH="500">
  <div id="mylbl" style="font-size:larger;">Text for Picture 1</div>
  </div>
</TH>
</TR>

</TABLE>

</body>
</html>
</center>
4

3 回答 3

0

你可以很容易地用谷歌搜索这个问题。

<p onclick="window.open('[link]', '_new')"><a href="javascript:void(0)" >[likable object(text/image)]</a></p>

有关更多详细信息，请参见此处http://html.cita.illinois.edu/script/onclick/onclick-example.php

另请参阅http://www.w3schools.com/jsref/prop_html_innerhtml.asp。这将为显示的每个图像添加链接更具体地说，您需要编辑这部分，

function slide(slide_num,Mypic,Mylbl) {
  document.getElementById(Mypic).src=imgArray[slide_num][0];
  document.getElementById(Mylbl).innerHTML=imgArray[slide_num][1];
  document.getElementById(Mylbl).href='<your link';
  document.getElementById(Mylbl).target='_blank';
}
于 2012-11-18T17:29:27.993 回答
0

试试这个，虽然没有测试，但它应该工作。

       <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Image-Text</title>

    <SCRIPT type="text/javascript" LANGUAGE="JavaScript">
    var num=0;

    imgArray = [  
     ['pic1.png','Text for Picture 1'],
     ['pic2.png','Text for Picture 2'],
     ['pic3.png','Text for Picture 3'],
     ['pic4.png','Text for Picture 4']
    ];
    /*
    */

    function LimitNumber(value) {
      if (value < 0) { value = imgArray.length - 1; }
      var value = value % imgArray.length;
      return value; 
    }
    function slide(slide_num,Mypic,Mylbl,Mylink) {
      document.getElementById(Mypic).src=imgArray[slide_num][0];
document.getElementById(Mylink).href=imgArray[slide_num][0];
      document.getElementById(Mylbl).innerHTML=imgArray[slide_num][1];
    }

    var timedNum = 0;

    function TimedImage() {
      timedNum++;
      timedNum = LimitNumber(timedNum);
      slide(timedNum,'mypic','mylbl');
    }

    var timedFunc = '';
    function InitTimeInterval() {
      timedFunc = setInterval("TimedImage()",3000);
    }

    function DisplaySlides(SNo) {
      clearInterval(timedFunc);
      slide(SNo,'mypic','mylbl','mylink');
    }

    </SCRIPT>

    </head>
    <body onLoad="InitTimeInterval()">

    <center>
    <TR>
    <TH>
    <button onClick="DisplaySlides(0)">T3K's Game Pick</button>
    <button onClick="DisplaySlides(1)">T3K's Hardware Pick</button>
    <button onClick="DisplaySlides(2)">MEA's Game Pick</button>
    <button onClick="DisplaySlides(3)">MEA's Hardware Pick</button>
    </TH>
    </TR>

    <TABLE border="0"><TR><TD>
    <TR>
    <TH>
      <div class="slide">
      <a id="mylink" href="pic1.png" target="_blank"> <IMG id="mypic" SRC="pic1.png" alt="" BORDER="0" HEIGHT="218" WIDTH="500"></a>
      <div id="mylbl" style="font-size:larger;">Text for Picture 1</div>
      </div>
    </TH>
    </TR>

    </TABLE>

    </body>
    </html>
    </center>
于 2012-11-18T17:33:39.410 回答
0

更新到 Anshul 的代码，然后在可点击的图像之后稍微扩展......你需要以下 js：jquery-color.js

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image-Text</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery-color.js"></script>

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
    var num = 0;

    imgArray = [
     ['pic1.png', 'Text for Picture 1', 'http://www.google.co.uk', '_blank'],
     ['pic2.png', 'Text for Picture 2', 'http://www.google.co.uk', '_blank'],
     ['pic3.png', 'Text for Picture 3', 'http://www.google.co.uk', '_blank'],
     ['pic4.png', 'Text for Picture 4', 'http://www.google.co.uk', '_blank']
    ];
    /*
    */

    function LimitNumber(value) {
        if (value < 0) { value = imgArray.length - 1; }
        var value = value % imgArray.length;
        return value;
    }

    function slide(slide_num, Mypic, Mylbl) {
        document.getElementById(Mypic).src = imgArray[slide_num][0];
        document.getElementById(Mylbl).innerHTML = imgArray[slide_num][1];
        document.getElementById("aLink").href = imgArray[slide_num][2];
        document.getElementById("aLink").target = imgArray[slide_num][3];

        //set all button background colors to default color
        $('#btn1').animate({ backgroundColor: '#CCCCCC'}, 200);
        $('#btn2').animate({ backgroundColor: '#CCCCCC'}, 200);
        $('#btn3').animate({ backgroundColor: '#CCCCCC'}, 200);
        $('#btn4').animate({ backgroundColor: '#CCCCCC'}, 200);

        switch (slide_num) {
            case 0: $('#btn1').animate({ backgroundColor: '#FF6600' }, 50); break;
            case 1: $('#btn2').animate({ backgroundColor: '#FF6600' }, 50); break;
            case 2: $('#btn3').animate({ backgroundColor: '#FF6600' }, 50); break;
            case 3: $('#btn4').animate({ backgroundColor: '#FF6600' }, 50); break;
        }
    }

    var timedNum = 0;

    function TimedImage() {
        timedNum++;
        timedNum = LimitNumber(timedNum);
        slide(timedNum, 'mypic', 'mylbl');
    }

    var timedFunc = '';
    function InitTimeInterval() {
        timedFunc = setInterval("TimedImage()", 3000);
    }

    function DisplaySlides(SNo, Btn) {
        clearInterval(timedFunc);
        slide(SNo, 'mypic', 'mylbl');
    }

</SCRIPT>

</head>
<body onLoad="InitTimeInterval()">

<center>
<TR>
<TH>
<button id="btn1" onClick="DisplaySlides(0, this)" style="background: #FF6600;">T3K's Game Pick</button>
<button id="btn2" onClick="DisplaySlides(1, this)" style="background: #CCCCCC;">T3K's Hardware Pick</button>
<button id="btn3" onClick="DisplaySlides(2, this)" style="background: #CCCCCC;">MEA's Game Pick</button>
<button id="btn4" onClick="DisplaySlides(3, this)" style="background: #CCCCCC;">MEA's Hardware Pick</button>
</TH>
</TR>

<TABLE border="0"><TR><TD>
<TR>
<TH>
  <div class="slide">
      <a id="aLink"><IMG id="mypic" SRC="pic1.png" alt="" BORDER="0" HEIGHT="218" WIDTH="500"></a>
      <div id="mylbl" style="font-size:larger;">Text for Picture 1</div>
  </div>
</TH>
</TR>

</TABLE>

</body>
</html>
</center>
于 2012-11-18T17:40:24.363 回答