manutdboss
جمعه 16 اسفند 1392, 09:30 صبح
سلام.
میتونی بعد از استایلی که دادی با کد های جی کوئری و رویداد click مشخص کنی که اگر روی عکسی کلیک شد آدرس اون عکس رو بگیره(src) :
var src = $(this).attr('src');
و داخل html دیو سمت چپی که تو عکس نشون دادی جایگذاری کنی:
$('.main').html('<img src="' + src + '" width="250">');
البته اینها در رویداد کلیک عکس قرار دارن:
$('.balls div img').click(function () {
var src = $(this).attr('src');
$('.main').html('<img src="' + src + '" width="250">');
});
برای رنگ هم میتونی یا کد رنگ رو داشته باشی یا اسم رنگ ها که البته کد رنگ مطمئن تره و بازم تو رویداد کلیک مثلا صفت کلاس رو بگیریم(چون رنگ رو الان در اونجا نوشتم) و با css رنگ بکگروند دیو سمت چپ رو عوض کنیم:
$('.backColor div').click(function () {
var color = $(this).attr('class');
$('.main').css({'background-color' : color});
});
البته این width هایی که دادیم استاندارد نیست که بیایم یک عکس با یک طول و ارتفاع رو کوچیکش کنیم باید عکس هارو در دو مدل کوچک و بزرگ و به اندازه ی واقعی داشته باشی و اینجا آدرس دهی کنی.
این نتیجه (http://jsfiddle.net/9cbUv/)رو هم ببین.
توپهایی که بک سفید دارن مال خود عکسشونه.
مرسی دوست عزیز...:قلب: همونیکه میخوام.. :تشویق:فقط من تو سند اچ تی ام ال خودم میارم کار نمی کنه.. اینم کدهایی که میارم تو سند:متفکر:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$('.backColor div').click(function () {
var color = $(this).attr('class');
$('.main').css({
'background-color': color
});
});
$('.balls div img').click(function () {
var src = $(this).attr('src');
$('.main').html('<img src="' + src + '" width="250">');
});
</script>
<style>
.right {
width: 120px;
float: left;
}
.balls {
width: 100px;
}
.balls div {
float: right;
cursor: pointer;
}
.backColor {
width: 100px;
background-color: #ccc;
}
.backColor div {
width: 30px;
height: 30px;
float: right;
margin: 5px;
padding: 5px;
cursor: pointer;
}
.main {
width: 300px;
;
height: 250px;
float: right;
margin-right: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="right">
<div class="balls">
<div>
<img src="http://thesandtrap.com/imgs/clubs/taylormade_tp5_balls_one_ball.jpg" width="50">
</div>
<div>
<img src="https://shop.aph.org/wcsstore/APHConsumerDirect/images/catalog/products_large/1-07516-00_APH_Techno_Ball.jpg" width="50">
</div>
<div>
<img src="http://www.aplusrstore.com/photos/large/idearoot_color.jpg" width="50">
</div>
<div>
<img src="http://sweetclipart.com/multisite/sweetclipart/files/soccer_ball_football_futbol_1.png" width="50">
</div>
</div>
<div class="backColor">
<div class="blue" style="background-color: blue;"></div>
<div class="green" style="background-color: green;"></div>
<div class="red" style="background-color: red;"></div>
<div class="yellow" style="background-color: yellow;"></div>
</div>
</div>
<div class="main"></div>
</body>
</html>