How to add a custom event to an element
Adding events to elements such as buttons and text within "quote" boxes is a useful documentation technique.
Multiple Clickable text links
On my page about the murals in Belchamp Walter Church I have added multiple event handlers to link to images by Stiffleaf on the Ipernity website.
The code below takes the visitor to the Jerusalem page.
Adding a hyperlink to an element
While this is quite cute, it results in a confusing situation as the visitor does not expect this.
A link should look like a link as that is what most users expect. Putting a hyperlink on a block of text, as in a quote, is confusing.
In any case the link to the external website is now dead and the example above is now a moot point.
The code to do this
The first thing is to select the element by id. In this case "ip1".
and then an Eventlistener is added to it.......
The script used on the wall paimtings page
<script>
document.getElementById("ip1").addEventListener("click", function()
{ location.href = "jerusalem.html" })
</script> !-- Gate of Jerusalem -->
Capturing Function Keys
As an extension to this technique I was wondering how you would capture an F1 press for example.