Форум

sarik · #1 (**permalink**) 01.03.2013, 12:38

Как сделать так чтобы в место value использовать url чтобы картинка менялось через значение url а не с value?

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 var img_r = new Image();
 img_r.src = "2.png";
 function img_size(val){
 var kartinka = document.getElementById("kartinka");
 kartinka.src = img_r.src;
 var img = new Image();
 img.onload = function() {
 kartinka.src = this.src
    };
	
	
 switch(val){
 case "1":
   img.src = "img/2.png";
   break;
 case "2":
   img.src = "img/3.png";
   break;

 }
}

 </script>

</head>
<body>
<input type="radio" name="" value="1" onclick="img_size(this.value)" />11
<br>
<input type="radio" name="" value="2" onclick="img_size(this.value)" />22
</body>
</html>

Я уже использовал date-url но неработаеть.
Как сделать так чтобы картинка менялось не с значение value а с другого ... Например url или id?

ksa · #2 (**permalink**) 01.03.2013, 13:04

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

Я уже использовал date-url но неработаеть.

Не верю! (с)
Покажи как делал...

рони · #3 (**permalink**) 01.03.2013, 13:07

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

Например url или id?

и где у вас эти url или id и "kartinka"? что хотим то в результате, такого ... эффекта?

ksa · #4 (**permalink**) 01.03.2013, 13:10

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

Я уже использовал date-url но неработаеть.

Бивас, тест! (с)

<!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">
div {
	width: 50px;
	height: 50px;
	border: 1px solid;
	cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('div').click(function (){
		var o=$(this);
		o.css({
			background: 'url("'+o.data('url')+'") no-repeat center center'
		});
	});
});
</script>
</head>
<body>
<div data-url='http://javascript.ru/forum/images/smilies/smile.gif'></div>
</body>
</html>

Все там работает...

sarik · #5 (**permalink**) 01.03.2013, 13:14

<!DOCTYPE html>
<html>
<head>
<link href="http://starlexx.com/Touareg/style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 var img_r = new Image();
 img_r.src = "http://starlexx.com/Touareg/2.png";
 function img_size(val){
 var kartinka = document.getElementById("kartinka");
 kartinka.src = img_r.src;
 var img = new Image();
 img.onload = function() {
 kartinka.src = this.src
    };
     
     
 switch(val){
 case "1":
   img.src = "http://starlexx.com/Touareg/img/2.png";
   break;
 case "2":
   img.src = "http://starlexx.com/Touareg/img/3.png";
   break;
 
 }
}
 
 </script>

</head>
<body>
<input type="radio" data-url="1" />11
<br>
<input type="radio" data-url="2" />22
<img id="kartinka" src="img/3.png" align="right"/>
</body>
</html>

ksa · #6 (**permalink**) 01.03.2013, 13:19

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

<input type="radio" data-url="1"  onclick="img_size(this.getAttribute('data-url'))" />11

sarik · #7 (**permalink**) 01.03.2013, 13:32

Спасибо...Получилось

Форум

Справочник

Discord чат

Курсы javascript