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

Question

I am not sure how i can add links to my images to make them clickable in a new tab. 我不知道如何添加链接到我的图像，以使它们可以在新选项卡中单击。 The following code auto rotates my images and has buttons that allows you to choose which image is shown but i have no idea how to add links for each image to take the user to a link in a new tab. 以下代码自动旋转我的图像，并具有允许您选择显示哪个图像的按钮，但我不知道如何为每个图像添加链接以将用户带到新选项卡中的链接。 Any help would be greatly appreciated. 任何帮助将不胜感激。 Thanks! 谢谢！

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

Answer 1

You could have easily googled this question. 你可以很容易地搜索这个问题。

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

For more details See here http://html.cita.illinois.edu/script/onclick/onclick-example.php 有关详细信息，请参见http://html.cita.illinois.edu/script/onclick/onclick-example.php

Refer to http://www.w3schools.com/jsref/prop_html_innerhtml.asp as well. 请参阅http://www.w3schools.com/jsref/prop_html_innerhtml.asp 。 This would add link to each image displayed More specifically, you need to edit this part, 这会为显示的每个图像添加链接更具体地说，您需要编辑此部分，

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';
}

Answer 2

Try this, didn't test it though but it should work. 尝试这个，虽然没有测试，但它应该工作。

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

Answer 3

updated to Anshul's code, then expanded slightly as you are after clickable images... you'll need the follow js: jquery-color.js 更新到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>

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

问题描述

3 个解决方案

解决方案1
0 2012-11-18 17:29:27

解决方案2
0 2012-11-18 17:33:39

解决方案3
0 已采纳 2012-11-18 17:40:24

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

问题描述

3 个解决方案

解决方案1 0 2012-11-18 17:29:27

解决方案2 0 2012-11-18 17:33:39

解决方案3 0 已采纳 2012-11-18 17:40:24

解决方案1
0 2012-11-18 17:29:27

解决方案2
0 2012-11-18 17:33:39

解决方案3
0 已采纳 2012-11-18 17:40:24