How do I justify an image without using "document.execCommand(justifyleft);"

Posted on 2003-12-09
Last Modified: 2012-05-04
I have a rich text area where users should be able to edit their websites. I have a function to input an image and others to alter that image. One of the other functions should align the image to the right left or center (three functions really) but I am struggling to do this.

The reason I cannot just do this simply using the "document.execCommand(justifyleft);" is because i have used this command for the alignment of the text. If I use the same function then the button for the alignmet of the text is indented as the id seems to have to be the same as the command.

I hope this makes sense.

Question by:wjdashwood
LVL 25

Expert Comment

by:James Rodgers
ID: 9904195
what about using the style of the image

<img src="" ...  style="align:left">
<img src="" ...  style="align:right">
<img src="" id="someImageId" ...  style="align:center">

and write the tag dynamically"left";
LVL 10

Expert Comment

ID: 9904295
You can put it in a <div>

<div id="images" align="center">Images goes Here</div>

You can change the align dynamically using...
document.all.images.align = "left"; // or right or center

Hope this helps...


Expert Comment

ID: 9904765
use jester's idea.  pass either the reference to the image you want to align or the id of the image (which will require you to add setting the id in the image creation/edit function) and use his method to set the alignment of the image.

the one thing is that "align" is not one of the supported style attributes.  you can use .styleFloat and use left, right, none.
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.


Author Comment

ID: 9905019
That sounds like a good answer. But how would I go about setting the id when i insert the image? Also when I align the image in this way will the text wrap around the image? I don't want the image to split the text.


Expert Comment

ID: 9905230
how are you inserting the image?

just wondering if you're using .createElement and appending it or if you're setting the innerHTML or something along that line.

Author Comment

ID: 9905356
the user will select an image from the list. The actual code editor.document.execCommand('insertimage', false, image);
is the inserting of the image. If another way is easier then I can change the way it is done.

Expert Comment

ID: 9905533
assuming that you're working with just a very simple wysiwyg editor as well as working in just IE, the following link leads you to a working example
(sorry about it being in french)

it's very simple to follow and will do most of what it seems you're asking for.

if you're working with pulling in values, you can create a javascript function that will load the initial value into your textarea.

Author Comment

ID: 9905594
i have examples of the inserting the image but I wanted to know how i give the image an id, which seems to be needed for the alligning. I can get the image inserted though I will be creating my own customised version which is a lot simpler, this is why the method of input can be changed to aid the adding of the id.


Expert Comment

ID: 9907613
the document.execCommand() does not seem to insert an id for the image (at least no one that i'm seeing), so it doesn't seem that

if you change document.execCommand('insertimage', false) to document.execCommand('insertimage', true), there will be a user interface that pops up that will allow them to choose the image that they want as well as the different tools for alignment, etc.

setting the user interface (the second argument) to true allows them to click on the image then select the icon you have for editing/adding an image and be brought back to that same interface.

the disadvantage to this is the whole pathing issue.  it seems to write out the path for the image as it pertains to the fso on the machine that is editing the file.

Author Comment

ID: 9911789
I'm not exactly sure I understood all of that.
By making the second argument false I am able to use my own interface to insert the image. I have to do this as the default interface does not do enough and is over complicated. Can I not use my own interface to assign the id to the image. If I can, do you know how?

As for your last paragraph, i'm completely lost


Expert Comment

ID: 9912400
the last paragraph was a poor attempt to try and think outloud about how setting the second parameter to true seems to pass the local file path in as the image source, which would obviously be a problem.

ok, working with your own interface, here you go:

<script language=javascript>
var myPage = window.opener;

var imageWidth;
var imageHeight;
var imageAlign;
var imageBorder;
var imageAltTag;
var imageHspace;
var imageVspace;
var imageSrc;
var imageBorderColor;

      imageWidth = myPage.selectedImage.width;
      imageHeight = myPage.selectedImage.height;
      imageAlign = myPage.selectedImage.align;
      imageBorder = myPage.selectedImage.border;
      imageAltTag = myPage.selectedImage.alt;
      imageHspace = myPage.selectedImage.hspace;
      imageVspace = myPage.selectedImage.vspace;
      imageSrc = myPage.selectedImage.src;
      imageBorderColor =;
      imageWidth = ''
      imageHeight = ''
      imageAlign = ''
      imageBorder = ''
      imageAltTag = ''
      imageHspace = ''
      imageVspace = ''
      imageSrc = ''
      imageBorderColor = ''

window.onload = function Load()

function setValues()
      document.imageForm.image_width.value = imageWidth;
      document.imageForm.image_height.value = imageHeight;
      if (imageBorder == "")
            imageBorder = "0"
      document.imageForm.image_border.value = imageBorder;
      document.imageForm.alt_tag.value = imageAltTag;
      document.imageForm.image_hspace.value = imageHspace;
      document.imageForm.image_vspace.value = imageVspace;
      document.imageForm.img_Src.value = imageSrc;

where imageForm is the form on your page and the form fields are image_width, image_height, image_border, alt_tag, image_hspace, image_vspace, image_src

Author Comment

ID: 9912491
could you give a short description of what this does please?
As i try to follow it I get that there is a selected image in the parent window, the properties of this are copied into the variables. Then what happens, what and where is the form?

Sorry, but i'm quite new to javascript so I struggle to understand it sometimes.


Accepted Solution

poliguin earned 470 total points
ID: 9912612

the first part you have correct, it is a test to see if an image has been selected, otherwise default values are set for the different properties of an image (such as hspace, vspace, alt, src, etc.

window.onload = function Load()


is the same thing as putting

<body name="MyBody" id="MyBody" onload="Load()">

i've just gotten used to setting the load like that in js that i don't put it on the body any more.

basically, the setValues() function is assuming that you have a form that you are using to get the information from the user, something like (written out in divs for shorthand purposes):
<form name="imageForm" id="imageForm" method="post">
    <div>Image Source:<input type="text" name="img_src" id="img_src" value="" /></div>
    <div>Image alt:<input type="text" name="alt_tag" id="alt_tag" value="" /></div>
    <div>Image hspace:<input type="text" name="image_hspace" id="image_hspace" value="" /></div>
    <div>Image vspace:<input type="text" name="image_vspace" id="image_vspace" value="" /></div>
    <div>Image border:<input type="text" name="image_border" id="image_border" value="" /></div>
    <div>Image height:<input type="text" name="image_height" id="image_height" value="" /></div>
    <div>Image width:<input type="text" name="image_width" id="image_width" value="" /></div>

you access the Image Source text input in java script with the syntax document.imageForm.img_src.value, etc.  you could use document.getElementById('img_src') as well (especially considering you're not going to be worried about nn 4.x or IE browsers that don't support document.getElementById() with what you're trying to do).

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i select 4 28
Get the number of current month days 2 23
What am I doing wrong with this Lightbox widget? 6 33
Getting selected value of a dropdown with jquery 7 31
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now