Razor Variable Used Within More Razor Within Javascript

Im looping through multiple items and setting an image tag like below for each item. Each one has an onmouseover and onmouseout event. The db stores both mouseover and mouseout ima

Solution 1:

One way to approach this is by assigning the two urls as data- attributes to each img tag, and then reading those attributes within the hover/unhover functions:

<img onmouseover='hover(this)' onmouseout='unhover(this)' data-img-hover='@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[1])' data-img-unhover='@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[0])' src='@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[0])'>

function hover(element) {
    element.setAttribute('src', element.data('img-hover'));
}
function unhover(element) {
    element.setAttribute('src', element.data('img-unhover'));
}