Member Avatar for Kevnj

Im looking to have a page with icons at the top at the bottom have a box that when the icon is clicked the source of the image is viewed. Which can then be copied and used somewheres else on the page.


Ive spent the last 3 hours and cant figure it out. It wont allow me to view the "<img src=".... "in the box. I would like the src tags to be included in the preview box so it can be copied to the clipboard.

What am I missing? :?:

Thanks in advance.

  • 2 Contributors
  • 3 Replies
  • 101 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Kevnj

Dani AI

Generated

Short answer: show the literal markup in a form control (textarea or readonly input) and set that control's text/value from a click handler — do not insert the markup as HTML into the page. Inline ONCLICK handlers with embedded angle brackets and quotes force awkward escaping (which is why that example used HTML entities and encoded characters). A cleaner, more robust approach is to store the snippet on the clickable element (data- attribute) and attach an event listener that writes the raw string into a textarea; then use the Clipboard API to copy.

Example pattern (HTML + JS):

<img src="smile.png" alt=":)" class="smiley" data-snippet="<img src='smile.png' alt=':)' />">

<textarea id="preview" rows="3" readonly></textarea>
<button id="copy">Copy</button>

<script>
document.querySelectorAll('.smiley').forEach(el => {
  el.addEventListener('click', () => {
    const snippet = el.dataset.snippet;
    document.getElementById('preview').value = snippet;
  });
});

document.getElementById('copy').addEventListener('click', async () => {
  const text = document.getElementById('preview').value;
  try {
    await navigator.clipboard.writeText(text);
  } catch (e) {
    const ta = document.getElementById('preview');
    ta.select();
    document.execCommand('copy');
  }
});
</script>

Troubleshooting tips:

  • Use .value (for inputs/textareas) or .textContent (for div/pre) to show the raw string; using .innerHTML will render the image instead of showing its source.
  • Put the snippet in a data- attribute to avoid fragile quoting inside HTML attributes. See using data attributes for details.
  • Use the modern Clipboard API (Clipboard.writeText) with a simple execCommand fallback for older browsers.
  • If you must keep inline onclick handlers, be prepared to escape quotes/angles — but migrating to event listeners avoids that headache.

For : switching to data-* + addEventListener will remove the need for HTML-escaped characters and make copying the <img src="..."> text trivial.

Recommended Answers

All 3 Replies

Member Avatar for mikeSQL

Well it most def aint PhP, I looked at their source and it looked like Javascripts to me. This CAN be done in PHP too dont get me wrong, by why go through the hasel?

This is what I saw in example fo Javascript that theyve used below:

<AREA SHAPE="rect" COORDS="2,2148,21,2168" ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml=&#34;AgHSJnQ=&#34;>:-D</font>'" TARGET="" ALT="" />
<AREA SHAPE="rect" COORDS="21,2148,40,2168" ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml=&#34;AgHSJnQ=&#34;>=-O</font>'" TARGET="" ALT="" />
<AREA SHAPE="rect" COORDS="40,2148,59,2168" ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml=&#34;AgHSJnQ=&#34;>:-'+String.fromCharCode(42)+'</font>'" TARGET="" ALT="" />
<AREA SHAPE="rect" COORDS="59,2148,78,2168" ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml=&#34;AgHSJnQ=&#34;>'+String.fromCharCode(62)+':o</font>'" TARGET="" ALT="" />
 <AREA SHAPE="rect" COORDS="78,2148,97,2168" ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml=&#34;AgHSJnQ=&#34;>8-)</font>'" TARGET="" ALT="" />
<AREA SHAPE="rect" COORDS="97,2148,116,2168" ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml=&#34;AgHSJnQ=&#34;>:-$</font>'" TARGET="" ALT="" />

<COUGH> That was alot I squeezed out, ouch!:eek::o

Member Avatar for Kevnj

Thanks Ill be checking it out once I get home from work.

Basically I was missing ONCLICK="parent.document.smiley.smileytext.value=parent.document.smiley.smileytext.value+'<font sml="AgHSJnQ=">'+String.fromCharCode(62)+':o</font>'" TARGET="" ALT="" />

The third set of parent.document.smiley.smileytext.value ??? and the + string.fromcharcode ?

Thanks

Member Avatar for Kevnj

Sorry thought I put this in the javascript forum.

Any idea how to get it to work ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.