innerHTML information

Question

I have to re-make a part of my page. This is part of code that is making my link :

$downloadLinks .= '<li><a onclick="document.getElementById(\'last-crop-resize\').parentElement.style.backgroundColor=\'lightgreen\';document.getElementById(\'last-crop-resize\').innerHTML=this.href" target="_blank" href="'._CONFIG_SITE_PROTOCOL . '://' . file::getFileDomainAndPath($file->id, $file->serverId, true) . '/' . PLUGIN_DIRECTORY_NAME.'/images/scripts/resize_image.php?m=middle&f='.(int) $file->id.'&w='.$linkWidth.'&h='.$linkHeight.'"><i class="entypo-right"></i>JPG '.$linkWidth.' x '.$linkHeight.' px</a> </li>';

On the screen I am getting some thing like this:

https://localhost/plugin/images/scripts/resize_image.phpm=middle&f=16788&w=390&h=276

All I am douing is selecting it on click.

Now I need to change this part so that my screen output is this :

    {*<img src="https://localhost/plugin/images/scripts/resize_image.php
    m=middle&f=16788&w=390&h=276" 
    alt="" title="" width="390" height="276" vspace="20" hspace="20" border="0"
    style="width:390px;height:276px;margin-top:0px;margin-bottom:0px;
    margin-left:0px;margin-right:0px;border:0px solid black;" class="" />*}

I've tried using ASCII for escaping inside of a innerHTML , but as soon as I try to place <img my output start's breaking.

So just to add a bit more info :

It is not redirecting.
And all the functionality I need is => select all on click, so that I can copy the output.

Is this possible?

it needs to be a big "link" that on click someone can copy and use on a diferent page. it is not redirecting just sitting there. and copy on click — user3350597, Dec 12 '16 at 18:57
select all what on click? Are you using jquery - I did not see it tagged? — happymacarts, Dec 12 '16 at 19:03
when user clicks. what do you want to happen? What are you trying to copy? — happymacarts, Dec 12 '16 at 19:10
on click it is selectiong whole output so that user can copy it. — user3350597, Dec 12 '16 at 19:20
[This post](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) may similar to what you are trying to get — happymacarts, Dec 12 '16 at 19:31

score 0 · Answer 1 · answered Dec 12 '16 at 18:57

Your question is unclear on what you're trying to achieve, but I think you are trying to use an image as a link?

If so here is what you need:

<a href="https://localhost/plugin/images/scripts/resize_image.php
        m=middle&f=16788&w=390&h=276">
    <img src="https://localhost/plugin/images/scripts/resize_image.php
    m=middle&f=16788&w=390&h=276" 
    alt="" title="" width="390" height="276" vspace="20" hspace="20" border="0"
    style="width:390px;height:276px;margin-top:0px;margin-bottom:0px;
    margin-left:0px;margin-right:0px;border:0px solid black;" class="" />
</a>

Let me know if this helps

score 0 · Answer 2 · answered Dec 12 '16 at 18:57

I am not sure but I think this is what you are looking for.

you are allowed to nest an img element in an a tag

<a href="https://localhost/plugin/images/scripts/resize_image.php?m=middle&f=16788&w=390&h=276"> <img src="https://localhost/plugin/images/scripts/resize_image.php?m=middle&f=16788&w=390&h=276" 
    alt="" title="" width="390" height="276" vspace="20" hspace="20" border="0"
    style="width:390px;height:276px;margin-top:0px;margin-bottom:0px;
    margin-left:0px;margin-right:0px;border:0px solid black;" class="" /></a>

@BviLLe_Kid looks like you beat me to the same response. – happymacarts Dec 12 '16 at 19:11 — happymacarts, Dec 12 '16 at 19:11

score 0 · Accepted Answer · answered Dec 14 '16 at 07:09

I managed to get it to work. My question title was bad so I've change it. All I needed to do is to change innerHtml and not href. Don't know what I was thinking. This is my solution :

$downloadLinks .= '<li><a onclick="document.getElementById(\'last-crop-resize\').parentElement.style.backgroundColor=\'lightgreen\';document.getElementById(\'last-crop-resize\').innerHTML=\'{*<&#127;img src=&quot;\'+this.href+\'&quot; alt=&quot;&quot; title=&quot;&quot; width=&quot;'.$linkWidth.'&quot; height=&quot;'.$linkHeight.'&quot; vspace=&quot;20&quot; hspace=&quot;20&quot; border=&quot;0&quot; style=&quot;width:'.$linkWidth.';height:'.$linkHeight.';margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;&quot; class=&quot;&quot; &#47;>*}\'"; target="_blank" href="'._CONFIG_SITE_PROTOCOL . '://' . file::getFileDomainAndPath($file->id, $file->serverId, true) . '/' . PLUGIN_DIRECTORY_NAME.'/images/scripts/resize_image.php?m=middle&f='.(int) $file->id.'&w='.$linkWidth.'&h='.$linkHeight.'"><i class="entypo-right"></i>JPG '.$linkWidth.' x '.$linkHeight.' px </a> </li>';

The output is :

{*<img src="https://localhost/plugin/images/scripts/resize_image.php
m=middle&f=16788&w=390&h=276" 
alt="" title="" width="390" height="276" vspace="20" hspace="20" border="0"
style="width:390px;height:276px;margin-top:0px;margin-bottom:0px;
margin-left:0px;margin-right:0px;border:0px solid black;" class="" />*}

Thanks to everyone who tried to help.

innerHTML information

3 Answers3