A java script example:

Composition and artistic appreciation.

Image 1 Image 2 Image 3 Image 4

This vignette is about interesting photography subjects you can spot in almost any environment you find yourself in. all it takes is your sense of aesthetics and a bit of knowledge about formal artistic composition. Before you know it, you start having fun spotting all kinds of interesting subjects to photograph. It is this sense of FUN that drives me to think about how to improve bot my technical skills and my artistic appreciation

This kitchen tap caught my interest primarily because of a series of strong lines. The shiny silver surfaces provide a strong contrast against the darker surfaces. All lines converge on the base of the tap. The ivy and the flower pot edge provide context. The slightly diagonal lines from left to right provide balance between the top and the bottom of the image. The bright reflections of the tap point to the “in-focus” self portrait in the bottom 1/3. The red flowers in the left top corner however are a major distraction that needs to be fixed

Here is the code:

<h2><u>Composition and artistic appreciation.</u></h2>
<img id="myImg" src="/wp-content/uploads/2021/12/Kitchen-Tap.jpg">
<br>
<audio id="myAudio" controls="">
<source src="/wp-content/uploads/2021/12/Composition-Vignete-1-01.mp3">
</audio>
<br>

<button onclick="myFunctiona()">Image 1</button>
<button onclick="myFunctionb()">Image 2</button>
<button onclick="myFunctionc()">Image 3</button>
<button onclick="myFunctiond()">Image 4</button>

<p><br>This  vignette is about interesting photography subjects you can spot in almost any environment you find yourself in. all it takes is your sense of aesthetics and a bit of knowledge about formal artistic composition. Before you know it, you start having fun spotting all kinds of interesting subjects to photograph. It is this sense of FUN that drives me to think about how to improve bot my technical skills and my artistic appreciation<br><br>This kitchen tap caught my interest primarily because of a series of strong lines. The shiny silver surfaces provide a strong contrast against the darker surfaces. All lines converge on the base of the tap. The ivy and the flower pot edge provide context. The slightly diagonal lines from left to right provide balance between the top and the bottom of the image. The bright reflections of the tap point to the "in-focus" self portrait in the bottom 1/3. The red flowers in the left top corner however are a major distraction that needs to be fixed</p>

<script>

function myFunctiona() {
  document.getElementById("myImg").src = "/wp-content/uploads/2021/12/Kitchen-Tap.jpg";
 document.getElementById("myAudio").src = "/wp-content/uploads/2021/12/Composition-Vignete-1-01.mp3";
}
function myFunctionb() {
  document.getElementById("myImg").src = "/wp-content/uploads/2021/12/Interpretation-Kitchen-Self-Portrait.jpg";
document.getElementById("myAudio").src = "/wp-content/uploads/2021/12/Composition-Vignete-1-02.mp3";
}
function myFunctionc() {
  document.getElementById("myImg").src = "/wp-content/uploads/2021/12/Vignette-01-Fix-01-800px.jpg";
document.getElementById("myAudio").src = "/wp-content/uploads/2021/12/Composition-Vignete-1-03.mp3";
}
function myFunctiond() {
  document.getElementById("myImg").src = "/wp-content/uploads/2021/12/Kitchen-Tap-red-desaturated.jpg";
document.getElementById("myAudio").src = "/wp-content/uploads/2021/12/Composition-Vignete-1-03.mp3";
}
</script>

Notes on the code above:

id=”myImg” and id=”myAudio” in the second and fourth line of the code above, gives programmatic access in the java script functions between the <script></script> tags. The HTML buttons call each function which “switch” images and audio files.