Смена картинки при нажатии на радиокнопку (нужен совет)
Уважаемые знатоки, помогите разрешить одну задачку.
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');" />
Помогите самообучающемуся советом, пожалуйста. |
Разобрался. В принципе вот так заработало как нужно:
<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> |
Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 18:16. |