Форум

Roningrad · #1 (**permalink**) 04.04.2013, 16:24

Уважаемые знатоки, помогите разрешить одну задачку.

JavaScript отнюдь не является моей специализацией, но нужда заставила.

Требуется, чтобы при нажатии на радиокнопку добавлялась подстрока к адресу главного изображения, тем самым в браузере изменяя эту картинку на другую. Всё это без использования jQuery.

Хочу реализовать задумку примерно таким образом:

<html>
<head>
</head>
<body>
<img src="I:\black.jpg" name="radio" class="radiobutton" />
<div>
	<input type="radio" name='test' OnClick="window.document.images['radio'].src='I:\lime.jpg';" />
	<input type="radio" name='test' OnClick="window.document.images['radio'].src='I:\orange.jpg';" />
	<input type="radio" name='test' OnClick="window.document.images['radio'].src='I:\green.jpg';" />
</div>

</body>
</html>

Но думаю использовать в событии onClick функцию replace(), типа:

replace('.jpg', '-new.jpg')

Таким образом главная картинка должна бы превратиться из black.jpg в black-new.jpg

Но не пойму, как связать функцию с событием onClick; ведь не таким же образом это делать:

<input type="radio" name='test' OnClick="window.document.images['radio'].src.replace('.jpg', '-new.jpg');" />

Помогите самообучающемуся советом, пожалуйста.

Roningrad · #2 (**permalink**) 04.04.2013, 18:09

Разобрался. В принципе вот так заработало как нужно:

<html>
<head>
</head>
<body>
<img src="I:/image-black.jpg" name="radio" class="radiobutton" />
<div>
	<input type="radio" name='test' OnClick="document.radio.src=document.radio.src.replace(/-.*?\.jpg/i, '-orange.jpg');" />
	<input type="radio" name='test' OnClick="document.radio.src=document.radio.src.replace(/-.*?\.jpg/i, '-lime.jpg');" />
	<input type="radio" name='test' OnClick="document.radio.src=document.radio.src.replace(/-.*?\.jpg/i, '-green.jpg');" />
</div>

</body>
</html>

ksa · #3 (**permalink**) 04.04.2013, 21:12

Сообщение от Roningrad

при нажатии на радиокнопку добавлялась подстрока к адресу главного изображения

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function test(Obj) {
	var o=document.getElementById('radio');
	var val=o.src.replace(/\-([A-Za-z0-9])+.jpg$/,Obj.value+'.jpg');
	alert(val);
	o.src=val;
};
</script>
</head>
<body>
<img src="I:\black-my.jpg" id="radio" class="radiobutton" />
<div>
	<input type="radio" name='test' onclick='test(this)' value='-new' />
	<input type="radio" name='test' onclick='test(this)' value='-new2' />
	<input type="radio" name='test' onclick='test(this)' value='-new3' />
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript