консоль ругается - конечно, ругается, потому что конструкция (src : t_src)
синтаксически неверна. Объект создаётся так: {src : t_src}
, но в вопросе достаточно использовать просто t_src
.
Второй проблемой является то, что в expand(' + num + ',' + src + ',' + t_src + ')
отсутствуют кавычки (для обозначения при вызове функции expand
того, что это строки) вокруг src
и t_src
.
Третьей проблемой является то, что в будущем вызове expand
нужно src
и t_src
поменять местами.
В итоге, строка кода должна выглядеть так:
el.innerHTML = '<a href="' + src + '" name="expandfunc" onclick="expand(' +
num + ',\'' + t_src + '\',\'' + src + '\'); return false;"><img src="' +
t_src + '" /></a>';
Полный пример:
function expand(num, src, t_src)
{
var el = document.getElementById('doc_' + num);
el.innerHTML =
'<a href="' + src + '" name="expandfunc" onclick="expand(' + num + ',\'' + t_src + '\',\'' + src + '\'); return false;"><img src="' + t_src + '" /></a>';
}
<div id="doc_1">
<a href="http://waytoeast.ru/units/unit1.png" onclick="expand(1, 'http://waytoeast.ru/units/unit1.png', 'http://waytoeast.ru/images/page_bg.jpg'); return false;">
<img src="http://waytoeast.ru/units/unit1.png"/>
</a>
</div>
Однако выглядит код очень криво, не говоря уж о том, что использование onclick
считается устаревшим.
Можно использовать .addEventListener()
. Да, кода получается больше и это не будет работать в старых IE, но зато всё читабельно, раздельно и готово к будущим расширениям/доработкам:
document.addEventListener('DOMContentLoaded', onDomReady, false);
function onDomReady()
{
var links = document.getElementsByClassName('toggle_img');
for (var i = 0; i < links.length; i++)
{
var thisLink = links[i];
thisLink.addEventListener("click", function()
{
handleLinkClick(event, thisLink);
});
}
}
function handleLinkClick(event, link)
{
var currentSrc = link.href;
var toggleSrc = link.getAttribute("data-img");
var img = link.getElementsByTagName('img')[0];
img.src = toggleSrc;
link.href = toggleSrc;
link.setAttribute("data-img", currentSrc);
event.preventDefault();
}
<div id="doc_1">
<a href="http://waytoeast.ru/units/unit1.png" class="toggle_img" data-img="http://waytoeast.ru/images/page_bg.jpg">
<img src="http://waytoeast.ru/units/unit1.png"/>
</a>
</div>
Если использовать jQuery, то код будет короче:
$(document).ready(function()
{
$('.toggle_img').on('click', function()
{
var $this = $(this);
var currentSrc = this.href;
var toggleSrc = $this.data("img");
var img = $this.find('img')[0];
img.src = toggleSrc;
this.href = toggleSrc;
$this.data("img", currentSrc);
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="doc_1">
<a href="http://waytoeast.ru/units/unit1.png" class="toggle_img" data-img="http://waytoeast.ru/images/page_bg.jpg">
<img src="http://waytoeast.ru/units/unit1.png"/>
</a>
</div>
Какой из трёх способов использовать - дело ваше, но я рекомендую 2 и 3 способы.