如何添加图像链接以使其在新选项卡中可单击？

时间：2012-11-18 17:21:53

标签： javascript html

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

<!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>

3 个答案:

答案 0 :(得分：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';
}

答案 1 :(得分：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>

答案 2 :(得分：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>
相关问题
最新问题