Bharata

чтобы при наведении курсором из панели разработчика был треугольник, а не треугольник в квадрате

Думаю, что ты неправильно представляешь себе своё желание.

Вполне будет достаточно, если при наведении мышки на треугольник будет срабатывать событие onmouseover и при выходе из него onmouseout. Событие прикрепляется к path. Всё остальное для пользователя останется невидимым.

<svg><path id="p1" d="M10,100L100,10L190,100Z" fill="#00f"/></svg>
<script type="text/javascript">
var p1 = document.getElementById('p1');
p1.onmouseover = function(e)
{
	this.setAttribute('fill', '#0f0')
}
p1.onmouseout = function(e)
{
	this.setAttribute('fill', '#00f')
}
</script>

Дополнительно:
Как добавить background-image к SVG path

Вот здесь всё понятно разжёвано про то «Как использовать sprite в canvas», правда на английском языке.

Вырезание картинок из sprite происходит с помощью функции drawImage (описание функции на русском).

Можно, к примеру, так:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'song.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function()
{
	audioContext.decodeAudioData(
		xhr.response, 
		function(buffer)
		{ 
			var c = document.getElementById('canvas-view1');
			drawBuffer(c.width, c.height, c.getContext('2d'), buffer)
		})
}
xhr.send()

Можно также перевести файл в base64 и передавать как строку.

css

body {
    transition: background 1s ease-out;
}

javascript

document.querySelector('.dark').addEventListener('mouseover', function(event)
{   
	document.body.style.backgroundColor = '#31708f'
}, false);

Поля адрес_ошибки и номер_строки_ошибки заполнены в зависимости от используемого обозревателя сети. Если нужны такие данные, то пиши их сам.

Избавляешься от jQuery и сокращается твой код на целых 100 kb.!

document.getElementById('virtuemart_country_id').onchange = function(e) 
{
...
}