Forum

Posted: **02 Jun 2021, 04:49**

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 ????

Posted: **02 Jun 2021, 08:40**

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.

Posted: **02 Jun 2021, 10:10**

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"/>

Posted: **03 Jun 2021, 06:19**

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>

Posted: **03 Jun 2021, 12:34**

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 ?

Forum

Add position for picture in JS

Add position for picture in JS

Add position for picture in JS

Add position for picture in JS

Add position for picture in JS

Add position for picture in JS