Add position for picture in JS

[JanMolendijk]

Plessant Coursesweb, I have here an little script
what shows directly in a document from a base-url.

Now I would like to ad manual position height + width when a picture is selected
& run it directly in the document with a form or what?

I did not search for anything because I don`t known
what to search for. So I ask here strait.

Code: Select all

<script>
function showMyImage22(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil22");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }
</script>

In the style I added position + height but this I wanna add manual variable
with a form with direct result when I add a picture

Code: Select all

<img id="thumbnil22" class="img22" style="left: 230px; top: 230px; width: 100px; height: 100px;"   src="empty.jpg" alt="image"/>

Hope you understand + hoping for an example-support ????

Hello,
I didn't understand, what position, with and height do you want to add?
You added those values into the "style" attribute in <img>.
Where do you want to add those values?
What result do you want to get.

Marplo on this address is the whole page visible.

Code: Select all

145-53-93-209.fixed.kpn.net/Jan-Molendijk/Petition-Creator/

The script -> extra picture <- on the right 3th button
I wanna add manual variables for position + width & height.
When I add a picture in the php-document I wanna choose variable direction with width + height what directly shows up in the document

It can be done in two ways (I think) where hope the most easy way to do it between the style.

Code: Select all

<img id="thumbnil22" class="img22" style="left: 230px; top: 230px; width: 100px; height: 100px;"   src="empty.jpg" alt="image"/>

Try and adapt the following code into your script:

Code: Select all

<img id="thumbnil22" class="img22" style="left: 230px; top: 230px; width: 100px; height: 100px;"   src="empty.jpg" alt="image"/>

<div>
Left: <input type='number' id='stl_left' value='230'> / Top: <input type='number' id='stl_top' value='200'> / Width: <input type='number' id='stl_width' value='150'> / Height: <input type='number' id='stl_height' value='150'> - <input type='button' id='stl_btn' value='Set style'>
</div>
<script>
var thumbnil22 = document.getElementById('thumbnil22');
var stl_left = document.getElementById('stl_left');
var stl_top = document.getElementById('stl_top');
var stl_width = document.getElementById('stl_width');
var stl_height = document.getElementById('stl_height');
var stl_btn = document.getElementById('stl_btn');
stl_btn.addEventListener('click', (e)=>{
  thumbnil22.setAttribute('style', 'left:'+stl_left.value+'px; top:'+stl_top.value+'px; width:'+stl_width.value+'px; height:'+stl_height.value+'px;');
});
</script>

Marplo Thanks alot, I just did not knewn what to do....

Other question how is your partner
from Coursesweb doing ?
I think I did not see him for an while ?