У меня проблема, и до сих пор я не нашел правильного ответа.
У меня есть картинка (в формате .jpeg), которую вы можете увидеть здесь https://picload.org/view/dcipdggi/boxed.jpg.html.Это на самом деле намного больше, это всего лишь часть, так что вы сможете понять, что я хочу.
Я хотел бы иметь возможность нажимать на каждую «клеточку», и тогда должна появиться граница вокругкоробка.В основном выбор.
Я пробовал ОЧЕНЬ МНОГО вещей и много смотрел на Google и на этом форуме.Мое окончательное решение состояло в том, что я изменил тип с jpeg на svg, затем создал обводку вокруг каждого поля и установил заливку обводки прозрачной.С помощью jQuery я дошел до того, что (используя событие click) обводка заполняется цветом, отображается и снова скрывается.
В любом случае, поскольку я использую поле CSS Grid на своей веб-странице. Обычно этовыглядит так https://s15.directupload.net/images/190126/5wtqwf9v.jpg
, но после изменения jpeg-файла на svg-файл это выглядело так:
https://s15.directupload.net/images/190126/2i7fj49a.jpg
Как видите;это довольно запутано.Его абсолютно нельзя использовать как это.Кроме того, как вы, вероятно, довольно быстро поймете, я не являюсь экспертом по javascript / jquery.
Итак;будет ли какой-нибудь способ реализовать мою идею?Буду очень признателен за помощь!
$(document).ready(function(){
var selected;
$(".cls-1").click(function(){
$("#test").show(200);
$(this).css({"stroke": "#fff", "stroke-width": "4.04px"});
selected = true;
return selected;
});
$('#test').click(function(){
$("#test").hide(200);
$(".cls-1").css({"stroke": "#fff", "stroke-width": "0px"});
var selected = false;
return selected;
});
CSS
html, body, .grid-container {
height: 100vh;
margin-left: auto;
margin-right: auto;
width: 1200px;
overflow:hidden;
margin-top: 0.1%;
}
.grid-container * {
position: relative;
border-radius: 13px;
}
.grid-container *:after {
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 0.6fr 1fr 1fr 0.6fr;
grid-template-rows: auto;
grid-template-areas:
"block1 Bild-kreuz Bild-kreuz block4"
"block2 Bild-kreuz Bild-kreuz block5"
"block3 Bild-kreuz Bild-kreuz block6";
}
.Bild-kreuz {
grid-area: Bild-kreuz;
margin: auto 1% auto 1%;
}
.block1 {
grid-area: block1;
height: 32vh;
width: 17vw;
}
.block2 {
grid-area: block2;
height: 32vh;
width: 17vw;
overflow: hidden;
}
.block3 {
grid-area: block3;
overflow:hidden;
height: 32vh;
width: 17vw;
}
.block4 {
grid-area: block4;
background-color: black;
height: 32vh;
width: 17vw;
}
.block5 {
grid-area: block5;
height: 32vh;
width: 17vw;
}
.block6 {
grid-area: block6;
height: 32vh;
width: 17vw;
}
.Bild-kreuz{
margin-bottom: 1%;
}
#infokasten-links p{
font-family: 'Roboto Slab';
margin: 0.6rem auto auto 0.6rem;
}
#infokasten-links{
background-color: rgb(246, 90, 22);
color: white;
}
#infokasten-links>img{
width: 15%;
padding-top: 12%;
padding-left: 80%;
position: relative;
border-radius: 0;
}
#infokasten-links:hover{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
transition: ease 200ms;
cursor: pointer;
}
.block5>p {
font-family: 'Roboto Slab';
font-size: 12px;
}
.block6 > p {
font-family: 'Roboto Slab';
font-size: 12px;
}
#manfred-video{
margin: 3rem auto auto auto;
}
.borderClass{
border-color:red;
border-style:solid;
}
HTML
<body>
<div class="grid-container">
<div class="Bild-kreuz">
<img src="assets/img/Kreuz_XL.jpg" style="height: 99vh; width: 100%" usemap="#Kreuz">
</div>
<div class="block1" id="infokasten-links">
<p>
Bitte wählen Sie </br>einen Kanister aus, <br />Förderpatenschaft!
</p>
<img src="assets/img/pfeil-1.png" alt="pfeil-rechts-unten">
</div>
<div class="block2" id="projekt-2">
<img src="assets/img/Sichel_XL.jpg" alt="" style="width: 100%; height: 100%;">
</div>
<div class="block3">
<img src="assets/img/Stern_XL.jpg" alt="" style="width: 100%; height: 100%;">
</div>
<div class="block4">
<iframe width="230" height="129" style="margin-top: 12%;" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="block5">
<img src="assets/img/manfred.jpg" alt="" style="width: 45%;">
<p>
......
......
</p>
</div>
<div class="block6">
<p>
.......
......
</p>
</div>
</div>
Здесь вы можете увидеть скрипку с моимпоследние идеи:
http://jsfiddle.net/7jehn0o5/ Пожалуйста, нажмите на один из полей в верхней части рисунка.
Я хочу получить этот эффект, но, как я уже сказал, он не работает какэто, как только я интегрирую это в мою систему сетки CSS