# img

**URL:** https://forum.kirupa.com/t/img/652116
**Category:** programming
**Created:** [June 4, 2022, 3:20pm UTC](https://forum.kirupa.com/t/img/652116 "2022-06-04T15:20:47Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 4, 2022, 3:20pm UTC](https://forum.kirupa.com/t/img/652116/1 "2022-06-04T15:20:47Z")

</div>

Hello! Problem, I want a menu to open by clicking on the picture, I made the menu myself, I just need to change the position of the menu by clicking on the picture.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 4, 2022, 3:22pm UTC](https://forum.kirupa.com/t/img/652116/2 "2022-06-04T15:22:20Z")

</div>

Hi @Javer - can you share more details like a screenshot or what your current markup/code looks like?

Cheers,  
Kirupa 😀

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 4, 2022, 3:49pm UTC](https://forum.kirupa.com/t/img/652116/3 "2022-06-04T15:49:20Z")

</div>

![](https://yyz1.discourse-cdn.com/flex011/Users/daniil/Documents/qwins/png/imgonline-com-ua-Resize-xxZoL2fDi8Sp.png)

I have already removed the script because it did not work, I did it as in the book on chapter 30

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 4, 2022, 3:50pm UTC](https://forum.kirupa.com/t/img/652116/4 "2022-06-04T15:50:30Z")

</div>

```auto
<a href="#" class="logo" id="setting"><img src="/Users/daniil/Documents/qwins/png/imgonline-com-ua-Resize-xxZoL2fDi8Sp.png"></a>

<script>
     let setting-menu = document.querySelecor("#setting");
     setting-menu.addEvenListener("click",menu_open, false);

     function menu_open(e){
       document.logo.style.border = "20px solid darkred";
     }

    </script>

```

here is the code. relying on a book

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 4, 2022, 5:59pm UTC](https://forum.kirupa.com/t/img/652116/5 "2022-06-04T17:59:32Z")

</div>

@kirupa

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 4, 2022, 6:07pm UTC](https://forum.kirupa.com/t/img/652116/6 "2022-06-04T18:07:27Z")

</div>

When you check in the console, what error are you seeing? Here is a guide on how to work with the console: [Console Logging Basics](https://www.kirupa.com/html5/console.htm)

Now, one thing that seems off is the spelling of your properties:

- **querySelecor** should be **querySelector**
- **addEvenListener** should be **addEventListener**

Once you make these spelling updates, see if your code works. If it still doesn’t work, check the Console (using the guide from the earlier link if you aren’t sure how to do that) and let me know what errors you see.

Cheers,  
Kirupa

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 5, 2022, 10:49am UTC](https://forum.kirupa.com/t/img/652116/7 "2022-06-05T10:49:26Z")

</div>

writes no errors, but the code still does not work exactly  
@kirupa

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 5, 2022, 1:36pm UTC](https://forum.kirupa.com/t/img/652116/8 "2022-06-05T13:36:36Z")

</div>

Did you fix the spelling of the misspelled properties? Can you paste a screenshot of what it is that you currently are seeing in your browser when you try to run this app?

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 5, 2022, 5:41pm UTC](https://forum.kirupa.com/t/img/652116/9 "2022-06-05T17:41:22Z")

</div>

![Снимок экрана 2022-06-05 в 20.41.17](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/a/a/aafe8c38596b7848b29ad498e0baa4e63668c8d0.jpeg)

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 5, 2022, 5:48pm UTC](https://forum.kirupa.com/t/img/652116/10 "2022-06-05T17:48:14Z")

</div>

throw something else? @kirupa

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 5, 2022, 7:38pm UTC](https://forum.kirupa.com/t/img/652116/11 "2022-06-05T19:38:14Z")

</div>

When I ran the snippet you posted, the Console showed me another error:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/7/1/712c4b26597ff5e749c388364a7f70028422b004.png)

It turns out you can’t name a variable as **setting-menu** where you have the **-** character. Also, this line “document.logo.style.border” doesn’t work either. What does **document.logo** refer to here?

Here is a working example where clicking on the image gives it a border: [https://codepen.io/kirupa/pen/rNJrpYj](https://codepen.io/kirupa/pen/rNJrpYj)

Take a moment and see where the book’s instructions and what you have differ. JavaScript isn’t very forgiving of misspellings and syntax errors. You have to ensure your code is exactly as specified.

Hopefully this helps 🙂

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 6, 2022, 5:14am UTC](https://forum.kirupa.com/t/img/652116/12 "2022-06-06T05:14:03Z")

</div>

helped, thanks.  
And how to make it so that when you click in an empty area, this frame disappears in the picture? @kirupa

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 6, 2022, 3:02pm UTC](https://forum.kirupa.com/t/img/652116/13 "2022-06-06T15:02:21Z")

</div>

You can listen for a **click** event on the body element and essentially undo the inline style you are setting on the image.

Two tutorials that can help you out:

- [Events in JavaScript](https://www.kirupa.com/html5/javascript_events.htm)
- [Setting CSS Styles using JavaScript | KIRUPA](https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm)

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 13, 2022, 9:19am UTC](https://forum.kirupa.com/t/img/652116/14 "2022-06-13T09:19:07Z")

</div>

Good afternoon, the problem is not solved. I don’t understand how to make it so that when you click on the picture, the property of another class changes, that is, I made a menu and indicated an indent from the right -100%, it is necessary that when you click on the picture this indent disappears (that is, it was 0%), I think I clearly explained . Sorry for such stupid questions 🙂

@kirupa

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 13, 2022, 12:07pm UTC](https://forum.kirupa.com/t/img/652116/15 "2022-06-13T12:07:30Z")

</div>

This tutorial sounds like it can help you out: [Creating a Smooth Sliding Menu | KIRUPA](https://www.kirupa.com/html5/creating_a_smooth_sliding_menu.htm)

What it highlights and what you describe trying to do are very similar 😀

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [June 27, 2022, 12:56pm UTC](https://forum.kirupa.com/t/img/652116/16 "2022-06-27T12:56:18Z")

</div>

Thanks, I already figured it out myself, but thanks for the answer)

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [August 12, 2022, 5:12pm UTC](https://forum.kirupa.com/t/img/652116/17 "2022-08-12T17:12:41Z")

</div>

Hi again!  
I had such a problem, I created a border-radius and put a few lines of text into it, but I can’t put the picture there (I’m doing a project with a partner, he said the position is absolute and you can’t use others)  
Can you please help? I will attach the code below

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [August 12, 2022, 5:16pm UTC](https://forum.kirupa.com/t/img/652116/18 "2022-08-12T17:16:14Z")

</div>

![Снимок экрана 2022-08-12 в 20.15.46](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/7/3/733a48d71b1ebf367627c0bb9b8250bf6d152824.jpeg)

```auto
type or paste code here

```

```
 <main>
    <div class="Kurs">
      <img src="/Users/daniil/Downloads/9945b037-c6dd-4b68-8091-ce5614962c0d 1.png" alt="геи" class="ImgKurs">
               <div class="NameKurs"> Название курса </div>
                <div class="shortOpisanie"> Краткое описание курса <div>
    </div>
 </main>

```

---

<div class="post-metadata">

### Author: ![Javer](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Javer](https://forum.kirupa.com/u/Javer)
#### Post date: [August 12, 2022, 5:16pm UTC](https://forum.kirupa.com/t/img/652116/19 "2022-08-12T17:16:47Z")

</div>

```auto
type or paste code here

```

.main {  
display: flex;  
flex-direction: row;  
gap: 30px;  
height: 248px;  
width: 800px;  
background: #DFE6FF;  
}

.NameKurs {  
padding-left: 635px;  
margin-top: 209px;  
height: 248px;  
width: 970px;  
margin-left: 235px;  
font-family: ‘Raleway’;  
font-style: normal;  
font-weight: 800;  
font-size: 18px;  
line-height: 100%;  
padding-top: 12px;  
padding-left: 400px;  
padding-bottom: 218px;

box-shadow: 4px 4px 5px 3px rgba(0, 0, 0, 0.25);  
border-radius: 10px;  
}

.shortOpisanie {  
margin-left: 635px;  
}

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 13, 2022, 6:19am UTC](https://forum.kirupa.com/t/img/652116/20 "2022-08-13T06:19:01Z")

</div>

If I understand correctly, you have an absolutely positioned image. Its parent is not absolutely positioned, so you need a way to have the parent’s border radius apply to the image. Right?

[Next page](https://forum.kirupa.com/t/img/652116.md?page=2)