3 replies [Last post]
ExternalUser1
ExternalUser1's picture
Offline
newbie
Last seen: 45 weeks 2 days ago
Timezone: GMT+1
Joined: 2020-10-10
Posts: 7
Points: 12

Hi, I am not programmer but due to but luck in my job I need to put a litle "orange info image" in top of each blue "i" part of the main image, I donot know how to position images in top of each other,

I gathered the next code and would like if you could modify it to put an "orange" info image just in top of each "blue" info mark in the main imagen, ... (thanks a lot in advance!)

This is the code I have...

<img src="https://phpstack-480808-1518157.cloudwaysapps.com/moodle/draftfile.php/5/user/draft/140272948/35.JPG" alt="" width="436" height="384" role="presentation" class="img-responsive atto_image_button_middle"><br></span></p>
<p><span style="font-size: 0.9375rem;"><br></span></p>
<p><span style="font-size: 0.9375rem;"><br></span></p>
 
<p style="text-align: right;"><br></p>
-----------------------
 
<img class="img-responsive atto_image_button_text-bottom" onclick="showcontent1()" src="https://phpstack-480808-1518157.cloudwaysapps.com/moodle/draftfile.php/5/user/draft/140272948/Info_img8.JPG" alt="" width="36" height="34" role="presentation" style="position: absolute; top: 600px; right: 700px; z-index : 1;"><br>
<p></p>
 
 
 
 
<div id="contnt-img-1" class="tooltip-content" style="display: none; border: 4px solid orange; width: 680px; top: 60px; right: 0px; position: absolute; background-color: #fff; padding: .5em;"><button id="close-cnt1 " style="position: absolute; background: none; border: none; top: -5px; right: -5px;" onclick="closecontent1(); return false; "> X </button>
    <p>This balance between beneficence and non-maleficence still influences our perception of medical futility. It is important to consider in the context of an inevitable death that beneficence includes the prevention of suffering and indignity and non-maleficence
        includes the prevention of false hope.</p>
 
 
    <script type="text/javascript">
        // <![CDATA[
        function showcontent1() {
            document.getElementById('contnt-img-1').style.display = 'block';
        }
 
        function closecontent1() {
            document.getElementById('contnt-img-1').style.display = 'none';
            return false;
        }
        // ]]>
    </script>
</div>

ExternalUser1
ExternalUser1's picture
Offline
newbie
Last seen: 45 weeks 2 days ago
Timezone: GMT+1
Joined: 2020-10-10
Posts: 7
Points: 12

Sorry this is the image...

Sorry this is the image...

ExternalUser1
ExternalUser1's picture
Offline
newbie
Last seen: 45 weeks 2 days ago
Timezone: GMT+1
Joined: 2020-10-10
Posts: 7
Points: 12

The image is in my original

ExternalUser1
ExternalUser1's picture
Offline
newbie
Last seen: 45 weeks 2 days ago
Timezone: GMT+1
Joined: 2020-10-10
Posts: 7
Points: 12

Hi @newbie thanks a lot for

Hi @newbie thanks a lot for your help here, I have extracted all not necesary text from my code, now I have as bellow...

I found what I need here: https://www.w3schools.com/css/css_positioning.asp but I do not know how to do it in my code, I need the to position my popup as in the last link under section "position: absolute"...

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

The problem is that someone gave me the code bellow and it´s just 1 div, I think I need to created 2 div from it as it´s above but as I am not a dev I donot know how to do it. Bellow is my code...

If anyone could modify it in order for my popup to be ´position: absolute´ i would appreciate!

Thanks in advance!

<img class="img-responsive atto_image_button_text-bottom" onclick="showcontent1()" src="https:.../infopng-b.png?time=1607298509862" alt="" width="31" height="31" role="presentation">
<p></p>
<p></p>
<p></p>
<p></p>
<p><br><br></p>
<p></p>
<div id="contnt-img-1" class="tooltip-content" style="display: none; border: 4px solid orange; width: 380px; top: 88%; right: 17%; position: absolute; background-color: #fff; padding: .5em;"><button id="close-cnt1 " style="position: relative; background: none; border: none; top: -5px; right: -5px;" onclick="closecontent1(); return false; "> X </button>
    <p>Popup content....</p>
</div>
<script type="text/javascript">
    // <![CDATA[
    function showcontent1() {
        document.getElementById('contnt-img-1').style.display = 'block';
    }
 
    function closecontent1() {
        document.getElementById('contnt-img-1').style.display = 'none';
        return false;
    }
    // ]]>
</script>