Здравствуйте!
Нужна помощь, сделал вывод опций картинок горизонтально в ряд. Сам код нашел на просторах интернета, так вроде бы все нормально, но при выборе цвета изображение не становиться активным. Сам выбор срабатывает! Подскажите, как сделать, чтобы при выборе картинка становилась активной.
Вот часть кода связанная с картинками:
<b>Выберите цвет:</b><br />
<table class="option-image">
<?php foreach ($option['option_value'] as $option_value) { ?>
<tr class="tr_my_options">
<td style="width: 1px; display: none;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
<td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
<td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><!--<?php echo $option_value['name']; ?>-->
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
CSS:
.product-info .option-image {
margin-top: 3px;
margin-bottom: 10px;
}
.product-info .option-image .tr_my_options {
float: left;
margin-bottom: 0;
margin-right: 10px;
position: relative;
width: 50px;
}
.product-info .option-image .tr_my_options label {
border: 0.5px solid #f9e5d2;
display: block;
height: 71px;
width: 50px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-khtml-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.product-info .option-image .tr_my_options label:hover {
border: 0.5px solid #990000;
}
.product-info .option-image .tr_my_options img {
border: none;
cursor: pointer;
margin-right: 5px;
}
.product-info .option-image .name_my_options {
left: 3px;
position: absolute;
right: 10px;
text-align: center;
top: 3px;
}
.product-info .option-image label {
display: block;
width: 100%;
height: 100%;
}
.product-info .option-image img {
margin-right: 5px;
border: 1px solid #CCCCCC;
cursor: pointer;
}