Changing div border color, by clicking img link located in other div

Question

I'm new to web development and I have a probably pretty trivial question.

I have a div in which I have a vertical img-based menu. On the right side of it I have a div with text content. I want to change border color of this div, by clicking corresponding img object.

Can you please tell me the easiest way to do it?

Thanks, and sorry for my English.

These are the menu elements:

    <div class="menu-boczne"> 
    <img class="element-menu" src="obrazy/zap.png">
    <img class="element-menu" src="obrazy/wyst-czasowe.png">
    <img class="element-menu" src="obrazy/wyst-stale.png"> 
    <img class="element-menu" src="obrazy/dla-gr-i-szk.png"> 
    <img class="element-menu" src="obrazy/dz-sie.png"> 
    <img class="element-menu" src="obrazy/od-terenowe.png"> </div>

The thing is I want to change border-color attribute for the content div when one of them is clicked

These are the menu elements: 'code'

The thing is I want to change border-color attribute for the content div when one of them is clicked. — , Jul 19 '15 at 10:47

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

What I believe you are looking for is CSS Selectors as previously stated in this question.

Using these in combination with :active should be what you are looking for.

Also Note that this is not strictly 'onclick' but works practically the same. This could also be done using JavaScript but I assume you haven't used JS yet so I have only provided an example for CSS.

div {
  height: 50px;
  width: 50px;
  float: left;
}
.image {
  background-color: green;
  border: 4px solid purple;
  text-align: center;
}
.content {
  background-color: blue;
  border: 4px solid yellow;
}
.image:active ~ .content {
  border: 4px solid red;
}
}

<div class="image">Image</div>
<div class="content">Text</div>

edited May 23 '17 at 11:44

Community

1
1

answered Jul 19 '15 at 12:37

Greg

754
9
18

Thank you for your answer. It worked for me, but is there any way to make that change permanent (I mean until the page refreshed)? – Jul 19 '15 at 19:36
Then you will want to look into form checkboxes and use an image instead. http://www.w3schools.com/tags/att_input_checked.asp – Greg Jul 19 '15 at 20:32

score 0 · Answer 2 · answered Jul 19 '15 at 13:06

0

The active command only works with a href links. Try writing a simple javascript command instead.

<div class="menu-boczne"> 
<img class="element-menu" src="obrazy/zap.png" onclick="this.style.borderColor='color'>

answered Jul 19 '15 at 13:06

Chris

113
4

Changing div border color, by clicking img link located in other div

2 Answers2