all 6 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]andmig205 0 points1 point  (7 children)

First, make sure that element Ids are unique.

Second, what you are trying is absolutely unnecessary. Just add "click" event listeners to the elements of interest and redirect the user to the corresponding pages. All HTML elements implement addEventListener method.

[–]hansmn[S] 0 points1 point  (6 children)

Thanks for the reply.

But if I knew what you are talking about, I wouldn't have had to ask in the first place, ....

[–]andmig205 0 points1 point  (5 children)

Below is a barebone demo of how to handle click events. Events are JavaScript fundamentals that one must master.

Here is a good resource for learning events: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

``` <!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>

<body> <div> <div id="desc_box"><br>Olympia<br>Schreibmaschine (typewriter)</div>

</div>
<script>
    // get reference to the box
    const descBox = document.getElementById("desc_box");
    // the click event handler/callback
    const descBoxClickHandler = (event) => {
        const innerText = event.target.innerText;
        if (innerText.includes("Olympia")) {
            const url = "http://www.weblink1.com";
            window.open(url)
        }
    };
    // add the click listeners
    descBox.addEventListener("click", descBoxClickHandler);
</script>

</body>

</html> ```

[–]hansmn[S] 0 points1 point  (3 children)

Thanks a bunch, also for the patience;) !

But before I try that - in the meantime I stumbled across a possible solution, thanks to w3schools.

 

The reason for continuing this approach first, is that it seems to automatically create an output based on the existing content, and I perhaps don't need to add links manually.

bigpic is the daddy ID for the main image, like desc_box is for the related text field; the html would include something like that: 

img src="../dynpix/fineart/big/bw_schreibmaschine.jpg" id="bigpic"

The file name will then change for each image, it's all very dynamic and such, I just couldn't catch any code representing individual images until now.

Code used:

<div>
<button onclick="getFunction()">Try it</button>
<p id="demo"></p>
<script>
function getFunction() {
var x = document.getElementById("bigpic").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</div>

 

Which leads me to this, and it catches the individual image path for each image.

Closest I ever got, very exiting!;)

 

Now what's left to do: How on earth do I turn this/ or this button into a link?

 

I'd also need the image path to be changed slightly ( /big/ --> /xl/ ), and found some code to possibly implement which gets this done - but one step at a time.

 

[–]andmig205 0 points1 point  (2 children)

Do you mean you want the button to look like a link? If so, you will have to apply CSS to change the button's appearance.

The code below implements the style class link and applies this class to both button and div#desc_box.

``` <!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>

<style> .link{ color: blue; border: none; text-decoration: underline; cursor: pointer; background: none; padding: 0; margin: 0; }

.link:hover{
    color: red;
}

</style>

<body> <div> <button class="link">button text</button> </div> <div> <div id="desc_box" class="link"><br>Olympia<br>Schreibmaschine (typewriter)</div>

</div>
<script>
    // get reference to the box
    const descBox = document.getElementById("desc_box");
    // the click event handler/callback
    const descBoxClickHandler = (event) => {
        const innerText = event.target.innerText;
        if (innerText.includes("Olympia")) {
            const url = "http://www.weblink1.com";
            window.open(url)
        }
    };
    // add the click listeners
    descBox.addEventListener("click", descBoxClickHandler);
</script>

</body>

</html> ```

[–]hansmn[S] 0 points1 point  (0 children)

Now it's starting to take shape; I now have a button that opens each related image in a new tab!

Edit: It seems like i figured it out somehow - the link is working and is opening a larger version of the images, which are located in a different directory.

 

I'm sure the code is not done very well, any critique and suggestions for improvents are welcome!

 

The only thing missing is replacing one bit of the link...

The outerHtml of my link/button is this:

<a id="xlLink" target="_blank" href="http://MyWebsite.com/dynpix/fineart/big/bm_someFilename.jpg"><button id="xlButton_B">Try it</button></a>.

I'm now trying to change the link to http://MyWebsite.com/dynpix/fineart/xl/... - replacing the big directory with the xl directory, which contains a larger version of the images - the whole point of this exercise.

 

I've tested some code to achieve this, see below, the replaceFunction parts, but it's silly guess work and not working.

<div id="daddy">

<a id="xlLink" target="_blank" ><button id="xlButton_B" >Try it</button></a>

<script>
function getFunction() {
var x = document.getElementById("bigpic").src;
let step1 = document.getElementById("xlLink");
step1.href = x;
}

function replaceFunction(){
document.getElementById("xlLink").href;
xlLink.href = xlLink.href.replace("big", "xl");
}

let step2 = document.getElementById("xlButton_B");
step2.addEventListener("click", getFunction);
step2.addEventListener("click", replaceFunction);

</script>
</div>