Aligning linked image

Last post 03-15-2010, 6:37 PM by Eric. 5 replies.
Sort Posts: Previous Next
  •  03-11-2010, 2:29 PM 59340

    Aligning linked image

    I have added an image in the editor then wrapped the image in an anchor tag to link the image to another page (<a><img /></a>).
     
    The problem is that when I click the image to align it, only the image gets the alignment (<a><div align="center"><img /></div></a>). This causes the link to no longer function because it has a <div> as a child. Is it possible to have the anchor tag wrapped instead of the image when clicking an alignment button?
  •  03-12-2010, 10:16 AM 59359 in reply to 59340

    Re: Aligning linked image

    Please try the following example:
     
     
    Step 1. Select an image
    Step 2. Create a link
    Step 3. Click the align button.
     
    You should get the following code:
    <a href="ee"><img align="right" src="http://cutesoft.net/Uploads/j0262681.jpg" width="80" height="53"  alt="" /></a>
     
    Keep me posted

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  03-15-2010, 10:41 AM 59390 in reply to 59359

    Re: Aligning linked image

    I have followed your steps and encountered the following:
     
    Step 1. Select an image (I click an image in the editor)
    Step 2. Create a link (with the image selected, I click the Insert Hyperlink button)
    Step 3. Click the align button ...
     
    At this point the cursor is placed after the image. Clicking an alignment at this point aligns the surrounding <p> tag. Selecting the image again then selecting an alignment works as stated except for Center, which I know doesn't work for <img> so the image must be wrapped in a block element with the alignment set to center. This is the point where the problem occurs. The image is already wrapped in an anchor tag but then only immediately wrapped in a <div> which causes the anchor to fail.
     
    <a href="ee"><div align="center"><img src="http://cutesoft.net/Uploads/j0262681.jpg" width="80" height="53"  alt="" /></div></a> 
     
    Is it possible to test if the image is wrapped in an anchor tag and then wrap that in a centered element?
    <div align="center"><a href="ee"><img src="http://cutesoft.net/Uploads/j0262681.jpg" width="80" height="53"  alt="" /></a></div>
     
    Or is there another method of centering a linked image that is equally simple?
  •  03-15-2010, 11:12 AM 59394 in reply to 59390

    Re: Aligning linked image

  •  03-15-2010, 12:36 PM 59404 in reply to 59394

    Re: Aligning linked image

    I am using IE 8.
  •  03-15-2010, 6:37 PM 59410 in reply to 59404

    Re: Aligning linked image

    Dear myersjosh,
     
     I have tested it in the following two scenarios, in these two scenarios,  link works fine:
    Test enviornment: Windows 7 & IE8.0

    Scenario 1:

    1. open link http://cutesoft.net/example/general.aspx
    2. click button "insert image", insert image http://cutesoft.net/uploads/10n2.jpg
    3. select image
    4. click button "Insert HyperLink", input "http://www.google.com" in "Url" in that poped up dialog
    5. click button "Center"
    6. switch to "Preview" view, click image, it will redirect to google, the anchor is valid
    The HTML Code is:
    <a href="http://www.google.com"><div align="center"><img border="0" alt="" src="http://cutesoft.net/uploads/10n2.jpg" width="135" height="85" /></div></a>

    Scenario 2:


    1. open link http://cutesoft.net/example/general.aspx
    2. click button "insert image", insert image http://cutesoft.net/uploads/10n2.jpg
    3. select image
    4. click button "Center"
    5. click button "Insert HyperLink", input "http://www.google.com" in "Url" in that poped up dialog
    6. switch to "Preview" view, click image, it will redirect to google, the anchor is valid
    The HTML Code is:
    <div align="center"><a href="http://www.google.com"><img src="http://cutesoft.net/uploads/10n2.jpg" alt="" border="0" width="135" height="85" /></a></div>
     
     
    Regards, 
    Eric
View as RSS news feed in XML