How can I have multiple onClick events associated with a single element in HTML? And can I make them change href?

Question

I am creating a page for a company in which I intern, and it seems I can’t understand it. The code that you see below is just a simplified template, so I do not give any information about the company (and all the style attributes are in a separate document, so everything in the code is in order).

I am having a problem with multiple onClick events. In this case, is it possible to use onClicks in comment tags even? I want the text to say “Additional instructions” to change the href path depending on the clicked image of the animal.

Also, I cannot use any kind of JavaScript, so please do not suggest using it. Any ideas?

<div id="container"> <div class="mainPicture"> <img alt="" id="awesome" name="Awesome2" src="awesome.png" /> </div> <div id="gallery"> <ul class="popOut"> <li> <a href="DogText.html" target="AnimalInfo" onClick="document.Awesome2.src='dog.jpg'"> <!--onClick="document.furtherInstructions.href='DogText.html'">--> <img src="dog.jpg" alt="dog"><img src="dog.jpg" alt="dog" class="preview"> </a> </li> <li> <a href="CatText.html" target="AnimalInfo" onClick="document.Awesome2.src='cat.jpg'"> <!--onClick="document.furtherInstructions.href='CatText.html'">--> <img src="cat.jpg" alt="cat"><img src="cat.jpg" alt="cat" class="preview"> </a> </li> <li> <a href="ParrotText.html" target="AnimalInfo" onClick="document.Awesome2.src='parrot.jpg'"> <!--onClick="document.furtherInstructions.href='ParrotText.html'">--> <img src="parrot.jpg" alt="parrot"><img src="parrot.jpg" alt="parrot" class="preview"> </a> </li> <li> <a href="LizardText.html" target="AnimalInfo" onClick="document.Awesome2.src='lizard.jpg'"> <!--onClick="document.furtherInstructions.href='LizardText.html'">--> <img src="lizard.jpg" alt="lizard"><img src="lizard.jpg" alt="lizard" class="preview"> </a> </li> <li> <a href="HorseText.html" target="AnimalInfo" onClick="document.Awesome2.src='horse.jpg'"> <!--onClick="document.furtherInstructions.href='HorseText.html'">--> <img src="horse.jpg" alt="horse"><img src="horse.jpg" alt="horse" class="preview"> </a> </li> <li> <a href="ChickenText.html" target="AnimalInfo" onClick="document.Awesome2.src='chicken.jpg'"> <!--onClick="document.furtherInstructions.href='ChickenText.html'">--> <img src="chicken.jpg" alt="chicken"><img src="chicken.jpg" alt="chicken" class="preview"> </a> </li> <li> <a href="DefaultText.html" target="AnimalInfo" class="center" onClick="document.Awesome2.src='awesome.png'"> <!--onClick="document.furtherInstructions.href='DefaultText.html'">--> <p>Default Image</p> </a> </li> </ul> <div id="rightcol"> <iframe src="DefaultText.html" title="Information About Animals" name="AnimalInfo" class="fixThisHeight"> </iframe> </div> <div id="externalInstructions"> <a href="DefaultText.html" name="furtherInstructions"> <p>Further Instructions</p> </a> </div> </div> </div> 

Answer 1

Just separate your commands with a colon:

 onClick="document.Awesome2.src='chicken.jpg'; document.furtherInstructions.href='ChickenText.html';">