Is there a way to open various href links with distinct images using window.open?

Question

Is there a way to open various href links with distinct images using window.open?

I am facing some limitations with the program, therefore it would be preferable if

the solution does not require JQuery, as mentioned earlier. There are certain

restrictions that need to be taken into consideration.

My objective is to:

Dynamically change an image using JavaScript. (Completed)
Ensure that each image redirects to a different link when clicked by the user. (Need assistance!)

Below is the code I am currently working with:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var image1=new Image()
image1.src="image_1.jpg" 

var image2=new Image()
image2.src="image_2.jpg"

var image3=new Image()
image3.src="image_3.jpg"

var step = 1 

function slideit(){

document.images.slide.src=eval("image"+step+".src")

if(step<3) step++

else step=1

setTimeout("slideit()",2500)

}

slideit()

function inputhref() {

var href = 'https://www.google.ca/';

window.open(href)

}
</script>
</head>
<body>
<img src="image_1.jpg" name="slide" width="400" height="400" 
 onclick="inputhref()">

javascript window.open

Answer 1

Answer №1

I encountered a few issues, but through troubleshooting and perseverance, I managed to fix them successfully!

To open a URL in the same window, I utilized window.location.href.
For selecting element(s), I employed document.querySelector().
When utilizing the setTimeout() function, I made sure to call it with the function name without using ''.

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <img src="image_1.jpg" id="slide" width="100" height="100" 
     onclick="inputhref()">
     
     
    <script type="text/javascript">

    var image1=new Image()
    image1.src="https://image_1.jpg" 

    var image2=new Image()
    image2.src="https://image_2.jpg"

    var image3=new Image()
    image3.src="https://image_3.jpg"
    
    var step = 1 
    var slide = document.querySelector('#slide');
    var timer

function slideit(){

slide.src="https://image_"+step+".jpg"

if(step<3) step++

else step=1
  console.log('Image changed to ' + slide.src);
timer = setTimeout(slideit,2500)

}

slideit();

    function inputhref() {

window.location.href = slide.src;
  clearInterval(timer);

}
    </script>
</body>
</html>

Answer 2

I encountered a few issues, but through troubleshooting and perseverance, I managed to fix them successfully!

To open a URL in the same window, I utilized window.location.href.
For selecting element(s), I employed document.querySelector().
When utilizing the setTimeout() function, I made sure to call it with the function name without using ''.

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <img src="image_1.jpg" id="slide" width="100" height="100" 
     onclick="inputhref()">
     
     
    <script type="text/javascript">

    var image1=new Image()
    image1.src="https://image_1.jpg" 

    var image2=new Image()
    image2.src="https://image_2.jpg"

    var image3=new Image()
    image3.src="https://image_3.jpg"
    
    var step = 1 
    var slide = document.querySelector('#slide');
    var timer

function slideit(){

slide.src="https://image_"+step+".jpg"

if(step<3) step++

else step=1
  console.log('Image changed to ' + slide.src);
timer = setTimeout(slideit,2500)

}

slideit();

    function inputhref() {

window.location.href = slide.src;
  clearInterval(timer);

}
    </script>
</body>
</html>

Answer 3

Answer №2

To streamline your process, consider creating an object that can store both the image source and its corresponding link. If you are only using the Image() classes for setting and retrieving URLs, you could simplify by storing them as strings within the object. It's also beneficial to include the step as a property and organize all images in an array for easy access.

Here's a suggested format:

var images = [
    {
        step: 1,
        src: "image_1.jpg",
        link: "http://example.com/image1-link",
    },
    {
        step: 2,
        src: "image_2.jpg",
        link: "http://example.com/image2-link",
    },
    // Add more as needed
]

Adjust your functions accordingly:

function slideit() {
    var currentImage = images.find(image => image.step == step);
    document.images.slide.src = currentImage.src;
    // Keep other functionality the same
}

function inputhref(step) {
    var currentImage = images.find(image => image.step == step);
    window.open(currentImage.link);
}

Answer 4

To streamline your process, consider creating an object that can store both the image source and its corresponding link. If you are only using the Image() classes for setting and retrieving URLs, you could simplify by storing them as strings within the object. It's also beneficial to include the step as a property and organize all images in an array for easy access.

Here's a suggested format:

var images = [
    {
        step: 1,
        src: "image_1.jpg",
        link: "http://example.com/image1-link",
    },
    {
        step: 2,
        src: "image_2.jpg",
        link: "http://example.com/image2-link",
    },
    // Add more as needed
]

Adjust your functions accordingly:

function slideit() {
    var currentImage = images.find(image => image.step == step);
    document.images.slide.src = currentImage.src;
    // Keep other functionality the same
}

function inputhref(step) {
    var currentImage = images.find(image => image.step == step);
    window.open(currentImage.link);
}

Is there a way to open various href links with distinct images using window.open?

Answer №1

Answer №2

Similar questions

Guide to generating interactive material-ui components within a react application?

What is the rationale behind Typescript permitting the assignment of an "any" object type to a class object?

Adding a PDF generated from an HTML div to an email using Java

Incorporate the Google Maps API into a React application

Search through the JSON data, identify similar values, and save them in a collection

Issue: Trouble with Rotating Tooltips in Javascript

A new sub-schema has been created in the JSON schema specifically tailored to a certain property

Unable to store the hashed password using bcrypt

What is the best way to convert the <br /> tag name into a white space in sanitize-html JavaScript?

Guide on establishing a connection to a server from a local database

Determining the minimum and maximum values of a grid using props in a React component

Utilize npm module by directly installing from GitHub repository

Tips for preventing users from entering special characters into input fields

Bindings with Angular.js

Converting a JSON list into a JavaScript object for the purpose of creating a dynamic

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

Cocos2D-JS is unable to import a json file that has been exported from CocosStudio

Generating directives on the fly

Navigation menu featuring unique links for varying pages

Working with JavaScript's push() method for JSON data manipulation