Question

我正在使用onclick两张图片，但是，点击第一张图片后，我希望第二张图片作为下一张图片的链接。我现在拥有的是两张来回切换的图片。

<html>
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Starting Your Journey</title>
    <style>
        a:link {color: #ffffff;}
        .image
        {
            text-align: center;
            border: 10px solid black;
            margin-left: -30px;
            margin-right: 5px;
            margin-top: 80px;
        }
    </style>
</head>
<body style="  background-color:black;">
    <script>
        function changeImage()
        {
            element=document.getElementById('myimage')
            if (element.src.match("two"))
            {
                element.src="./choosingstarter.png";
            }
            else
            {
                element.src="./choosingstartertwo.png";
            }
        }
    </script>
    <div class="image">
        <img id="myimage" onclick="changeImage()" src="./choosingstarter.png">
    </div>
    <a href="../story_begin.html" style="text-decoration:none">Continue!</a>
</body>
</html>

Answer 1

以下代码隐藏了currentImage并显示了下一个代码，或者在您的情况下，它会在显示所有图像时导航到其他位置。你可以在id中使用id imgContainer在div中添加几个DIV元素，然后隐藏并显示这些元素而不是图像。这样，您只需要一个页面即可显示包含故事文本的所有图像。

<html>
 <head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Starting Your Journey</title>
<style>
.image{
  text-align:center;
  border:10px solid black;
  margin-left:-30px;
  margin-right:5px;
  margin-top:80px;
  cursor: pointer;
}</style>
</head>
<body style="  background-color:black;">
 <script>
 // bad practice to have variables in the global scope
 // but to wrap the whole thing up in an object would
 // make this example too complicated
 var currentImage=0;
function changeImage(){
    // get all the images in the div with the id imgContainer
    var imageElements=document.getElementById("imgContainer")
        .getElementsByTagName("img");
    // set current image to 0
    imageElements[currentImage].style.display="none";
    // go to next image by adding one to current image
    currentImage++;
    // if the current image points to an image that doesn't exist
    // like 3 where there are only 3 images (0 is the first one)
    // then all the images have been shown, you can reset currentImage
    // back to 0 or navigate to another page
    if(currentImage>=imageElements.length){
       // navigate to another page
       window.location="http://www.google.com";
       // do not continue executing next lines
       return;
    }
    // this would reset the currentImage to 0 when it's
    // higher than the amount of images
    currentImage =(currentImage>=imageElements.length)
        ?0:currentImage;
    // show the next image
    imageElements[currentImage].style.display="";
}
 </script> <div class="image" id="imgContainer" onclick="changeImage()"> 
 <img src="./choosingstarter.png">
 <img src="./another.png" style="display:none">
 <img src="./and_another.png" style="display:none">
</div>
<a href="../story_begin.html" style="text-decoration:none">Continue!</a>
 </body>
</html>

Answer 2

试试这个：

    function changeImage() {
    element = document.getElementById('myimage');
    if (/two/.test(element.getAttribute('src'))) {
            element.setAttribute('src', "./choosingstarter.png");
        }
        else {
            element.setAttribute('src', "./choosingstartertwo.png");
        }
    };

点击图片并转到另一张链接图片？

2 个答案: