Здравствуйте, есть изображение <img src="img.jpg" />
,
нужно при клике на инпут
<input type="radio" value="Белый"/>
взять его значение и подставить в src , чтобы вышло вот так <img src="img_белый.jpg" />
есть варианты как это сделать?
2 ответа
Довольно костыльно, но работает. Я сам еще учусь :)
function myFunction(value){
var img = document.getElementById("myImg");
var startOfName = "img";//начало названия [img]_белый.jpg
var previousImg=img.src.substring(img.src.lastIndexOf('/')+1,img.src.length).split(".");
img.src = startOfName+"_"+value+"."+previousImg[1];
alert(img.src);
}
<img src="img.jpg" id="myImg"/>
<input type="button" value="white" onClick="myFunction(this.value);" id='btn'/>
<input type="button" value="yellow" onClick="myFunction(this.value);" id='btn'/>
<input type="button" value="red" onClick="myFunction(this.value);" id='btn'/>
-
Да, работает) только плохо что после каждого нажатия на кнопку значение дублируется 19 июл 2017 в 9:06
-
-
@SerhiyBilik просто тогда вместо изначального
img.src
берите фиксированное название (например, просто "img")– AtCliff_19 июл 2017 в 9:11 -
-
Мой вариант на jQuery
$(document).on('click', '.radio', function() {
var $link = jQuery('.link');
var src = $link.data('src');
if (!src) {
src = $link.attr('src').slice(0,-4);
$link.data('src', src);
}
$link.attr('src', src + '_' + $(this).attr("value") + '.jpg');
console.log($link.attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="white" class='radio'/>
<input type="button" value="yellow" class='radio'/>
<input type="button" value="red"class='radio'/>
<img src="images/img1.jpg" class="link"/>