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 に答える