echo shows actual html code

[Hooch]

Hey all.I am trying to create some code where you mouse over an image and it then pops some text upin another area. Both the images and text are from a database.Here is my code to show the image.

echo '<a href="' . $image . '" onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . $r2['description'] . '\';return true;"><img alt="" src="' . $image . '" height="" width="" class="" /></a>';

Since $r2['description'] is formatted code it screws up the html it is embedded in.So to see if my code does actually function correctly I tried this..

echo '<a href="' . $image . '" onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . htmlspecialchars($r2['description']) . '\';return true;"><img alt="" src="' . $image . '" height="" width="" class="" /></a>';

On page load everything looks great.But on the mouseover the text that pops up shows all the formatted text. ie instead of displaying text here it will display <strong>text here</strong>I would love anyones suggestion(s)Thank youOh just in case this is needed, here is how I show the text when I mouse over the image

echo '<span id="myText"> </span>';

[justsomeguy]

You don't need to convert to special chars, you want to output the code instead of the text to show the code. But since the string is surrounded by single-quotes in Javascript, you need to escape any single quotes in the string:

echo '<a href="' . $image . '" onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . str_replace("'", "\\'", str_replace("\\", "\\\\", $r2['description'])) . '\';return true;"><img alt="" src="' . $image . '" height="" width="" class="" /></a>';

The inner one first escapes slashes, and then the outer one escapes single quotes.

[Hooch]

Hi Guy.Thanks for the quick reply, but this still messes the html/javascript it is embedded in.It's still picking up some of the formatted code. Instead of displaying the code in the <span> tags it's actually reading the description as code for that specific line it's in.See here on this page...LinkyOnce the page loads you will see most of the text for image 1 above it.This should only be displayed on the right side when you mouse over the images.As you see in the 2nd and 3rd image.I hope this helps a bit more.FYI here is the code the 1st image is associated with..

<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur  aliquet turpis eu justo dictum cursus. Nullam ac facilisis ligula.  Integer ut odio nec leo venenatis placerat. Cras convallis interdum nunc  tincidunt porta. Maecenas malesuada feugiat diam et mattis.</strong> Aliquam et  enim in enim porta pharetra nec ac ante. Pellentesque habitant morbi  tristique senectus et netus et malesuada fames ac turpis egestas. Nunc  aliquam, lectu<img hspace="10" height="120" width="160" vspace="10" border="5" align="left" src="../../../../images/fckeditor/image/Gallery%20Items%20/Watching%20From%20Above.jpg" alt="" />s quis tincidunt volutpat, est nunc pretium risus, a  elementum massa eros vel arcu. Nunc egestas nunc vel lorem facilisis  vehicula. <strong><u>Nam tempus tortor</u></strong> at massa scelerisque imperdiet. Duis in  pharetra nibh. Nullam justo est, aliquet id commodo quis, ornare quis  lectus. Donec sit amet erat elit, <br />

[justsomeguy]

You'll also need to escape double-quotes. It may be better just to use addslashes, I didn't get from the original post that it was also enclosed in double-quotes. This is the output for your link:

<a id="example4" href="images/galleries/art/1285205298.jpg?x=1288713579" onmouseover="document.getElementById('myText').firstChild.data = '<strong>Lorem ipsum dolor sit amet..., lectu<img hspace="10" height="120" width="160" vspace="10" border="5" align="left" src="../../../../images/fckeditor/image/Gallery%20Items%20/Watching%20From%20Above.jpg" alt="" />s quis ...  vehicula. <strong><u>Nam tempus tortor</u></strong> at massa scelerisque imperdiet. Duis in  pharetra nibh. Nullam justo est, aliquet id commodo quis, ornare quis  lectus. Donec sit amet erat elit, <br />';return true;" title="Clouds_01"><img alt="Clouds_01" src="images/galleries/art/1285205298-t.jpg?x=1288713579" height="120" width="160" class="last" /></a>

The double-quote that starts onmouseover ends with the double-quotes in the img tag, so everything that goes inside onmouseover needs the double-quotes escaped also.

[Hooch]

I tried this, but it's not showing the mouseover text.

echo '<a href="' . $image . '" onmouseover=\"document.getElementById(\'myText\').firstChild.data = \'' . $r2['description'] . '\';return true;\"><img alt="" src="' . $image . '" height="" width="" class="" /></a>';

But everything else works 100%.

[justsomeguy]

You need to check the HTML. PHP is only outputting the code the browser is running, if the browser isn't running the code correctly then you need to look at the code that it's actually being sent to figure out why it's broken. It looks like you're back to where you started, I suggested that you use this:http://www.php.net/manual/en/function.addslashes.php

[dsonesuk]

I think a better option would be to add the content to individual span with id ref, you could use a count variable in php to add unique id reference to the anchor mouseover and mouseout id ref and the span id reference. The span content would be hidden using display: none, and then when you mouseover the link/img it would change it to display="block" or display="". much tidier in my opinion.

<td align="center" valign="middle" width="180" height="180"><a href="images/galleries/art/1285205298.jpg?x=1288780616" onmouseover="showhide('myText1');"  onmouseout="showhide('myText1');" title="Clouds_01"><img alt="Clouds_01" src="images/galleries/art/1285205298-t.jpg?x=1288780616" height="120" width="160" class="last" /></td><td align="center" valign="middle" width="180" height="180"><a href="images/galleries/art/1285205335.jpg?x=1288780616" onmouseover="showhide('myText2');"  onmouseout="showhide('myText2');" title="Clouds_02"><img alt="Clouds_02" src="images/galleries/art/1285205335-t.jpg?x=1288780616" height="120" width="160" class="last" /></a></td><td align="center" valign="middle" width="180" height="180"><a href="images/galleries/art/1287796506.jpg?x=1288780616"  onmouseover="showhide('myText3');"  onmouseout="showhide('myText3');" title="Clouds_03"><img alt="Clouds_03" src="images/galleries/stock-t.jpg?x=1288780616" height="120" width="160" class="last" /></a></td><span id="myText1">Content for image1</span><span id="myText2">Content for image2</span><span id="myText3">Content for image3</span><script type="text/javascript">/*<![CDATA[*//*---->*/function showhide(idref){var currentElem = document.getElementById(idref);currentElem.style.display=="none" ? currentElem.style.display="block" : currentElem.style.display="none";}/*--*//*]]>*/</script>

[Hooch]

You need to check the HTML. PHP is only outputting the code the browser is running, if the browser isn't running the code correctly then you need to look at the code that it's actually being sent to figure out why it's broken. It looks like you're back to where you started, I suggested that you use this:http://www.php.net/manual/en/function.addslashes.php

echo '<a href="' . $image . " onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . addslashes($r2['description']) . '\';return true;" title=""><img alt="" src="' . $thumb . '" height="' . $newHeight . '" width="" class="" /></a>';

This has the same results as..

echo '<a href="' . $image . " onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . $r2['description'] . '\';return true;" title=""><img alt="" src="' . $thumb . '" height="' . $newHeight . '" width="" class="" /></a>';

I have tried escaping the double quotes in the mouseover too. This cleans up the text above image 1 but the mouseover text never appears.

echo '<a href="' . $image . " onmouseover=\"document.getElementById(\'myText\').firstChild.data = \'' . addslashes($r2['description']) . '\';return true;\" title=""><img alt="" src="' . $thumb . '" height="' . $newHeight . '" width="" class="" /></a>';

dsonesukThanks for your explanation but this code is dynamic and includes pagination. There could be 1 or 9 images on the page. I'm hoping to fix the above line for now.It's a much easier fix.

[Hooch]

I have even tried going this route and still no progress..

<a href="<?PHP echo $image;?>" onmouseover="document.getElementById('myText').firstChild.data = '<?PHP echo stripslashes($r2['description']);?>';return true;" title=""><img alt="<?PHP echo $r2['item_name'];?>" src="<?PHP echo $thumb;?>" height="" width="" class="last" /></a>

Same results in having the text above the image.

[justsomeguy]

I still suggest this:

You need to check the HTML. PHP is only outputting the code the browser is running, if the browser isn't running the code correctly then you need to look at the code that it's actually being sent to figure out why it's broken.

It's really the only way to solve these kinds of problems.

[Hooch]

I did try that.If you take this code that does not work

<a href="<?PHP echo $image;?>" onmouseover="document.getElementById('myText').firstChild.data = '<?PHP echo stripslashes($r2['description']);?>';return true;" title=""><img alt="<?PHP echo $r2['item_name'];?>" src="<?PHP echo $thumb;?>" height="" width="" class="last" /></a>

And replace

<?PHP echo stripslashes($r2['description']);?>

with

<?PHP echo'testing 123';?>

To create

<a href="<?PHP echo $image;?>" onmouseover="document.getElementById('myText').firstChild.data = '<?PHP echo 'testing 123';?>';return true;" title=""><img alt="<?PHP echo $r2['item_name'];?>" src="<?PHP echo $thumb;?>" height="" width="" class="last" /></a>

This will work :)So the html and php are 100% correct?My limited knowledge here tells me you can't have formatted text within the onmouseover field.

[justsomeguy]

People have a hard time understanding this. I'm not interesting in seeing the PHP code that produces the HTML. I need to see the HTML that was produced by the PHP. I'm looking for the actual HTML code the browser is receiving, not the PHP code that generated it. The browser is responding to the output, not the PHP code.

[Hooch]

Ah. I see the outputted code has double quotes within it. These quotes are screwing everything up.So I tried this...

<a href="<?PHP echo $image;?>" onmouseover="document.getElementById('myText').firstChild.data = '<?PHP echo htmlentities($r2['description']);?>';return true;" title=""><img alt="<?PHP echo $r2['item_name'];?>" src="<?PHP echo $thumb;?>" height="" width="" class="last" /></a>

This will get the code to work but of course the outputted result in the span tags will show the html code and not the images, links etc.Now would this be a good start and try to fix the output of the span tags?

[justsomeguy]

Why did you use htmlentities to escape quotes? What does htmlentities do to quotes? What does the HTML look like after you do that?

[Hooch]

Before I used the htmlentities the page source showed the onmouseover field was breaking down at the quotes in the html from the database.Once I added the htmlentities the html from the database gets echo'd out in the span tags. The source code looks good now too.Unfortunately the code in the span tags show the html..not the desired results of the formatted html.

[justsomeguy]

Right, but why? What did htmlentities change with regard to the quotes? More importantly, is it the correct change?

[Hooch]

It's most definitely not the correct change, but it did stop the formatted from wrecking the onmouseover.I was then hoping to display the span tags a bit differently and have a solution that way. I see it's not asolution either. I am still trying to understand your helpful posts. I will go back and read them again and try some new set ups I can hopefully think of.Thanks for your time and effort.

[dsonesuk]

have you tried just using innerhtml instead isn't data used for setting or getting text values between elements?try for test

echo '<a href="'.$image.'" onmouseover="runthis(\''.htmlspecialchars($r2['description']).'\')" title=""><img alt="" src="'.$image.'" height="180" width="200" class="last" /></a>';

with

<script type="text/javascript">/*<![CDATA[*//*---->*/function runthis(str){document.getElementById('myText').innerHTML = str;}/*--*//*]]>*/</script>

[Hooch]

dsonesuk your code works perfect thank you.Great job!I would still like to fix my original issue that guy and I were working on too. Well..I should say that guy is guiding me through :)I do understand the outputted html is wrong. I may need another snippet of codeto give me a shot in the right direction.

[justsomeguy]

If the problem is that double-quotes need to be escaped, why would you use htmlspecialchars? That function converts a double quote to """. """ is not an escaped quote, it is an HTML entity. You want to add slashes before the double-quotes. You also need to add slashes before any other slashes (before escaping the quotes). The string inside Javascript is also surrounded by single quotes, so you also need to escape single quotes. The addslashes function will escape all of those, which is why I suggested using it. Use addslashes, then check the HTML again to see how it looks. I believe some things in the string will need to be escaped twice.

[Hooch]

I am still working on your suggestions Guy.I'll only show the onmouseover code to simplify.This is not a fix, but am I on the right track?

onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . addslashes(str_replace("\"", "\\\"", str_replace("'", "\\'", str_replace("\\", "\\\\", $r2['description'])))) . '\';return true;"

I'm curious about the placement of the addslashes and escaping the double quotes.

[boen_robot]

While you're in the browser, having opened the page, right click anywhere on the page, and select "View Source". Copy&paste what's there, and we'll know for sure if you're on the right track.(I see you still haven't followed justsomeguy's advise from a few posts above...)

[Hooch]

If the problem is that double-quotes need to be escaped, why would you use htmlspecialchars? That function converts a double quote to """. """ is not an escaped quote, it is an HTML entity. You want to add slashes before the double-quotes. You also need to add slashes before any other slashes (before escaping the quotes). The string inside Javascript is also surrounded by single quotes, so you also need to escape single quotes. The addslashes function will escape all of those, which is why I suggested using it. Use addslashes, then check the HTML again to see how it looks. I believe some things in the string will need to be escaped twice.

Believe me I am trying. It's a little complicated for me.

[Hooch]

My last post outputs

<a id="example4" href="portfolio.php?PGid=art&p=1" onmouseover="document.getElementById('myText').firstChild.data = '<span style=\\\"font-size: xx-large;\\\"><span style=\\\"color: rgb(255, 153, 0);\\\"><span style=\\\"font-weight: bold;\\\">A</span></span></span><span style=\\\"font-size: x-large;\\\"><span style=\\\"font-weight: bold;\\\">rt portfolio</span></span><span style=\\\"font-weight: bold;\\\"><br /></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer  tristique turpis justo, in porttitor urna. Quisque erat tortor,  consequat non lacinia sed, laoreet semper elit. Proin sed ante at ipsum  egestas consectetur. Suspendisse dignissim enim id arcu aliquet vitae  lacinia dolor dignissim. Vivamus sem mauris, bibendum id mollis a,  tincidunt id ligula. Etiam ultrices mauris id ligula porta eleifend.  Nulla euismod mi sit amet mi ornare et tempor magna mattis. Integer quis  erat leo. Quisque porta, odio nec venenatis congue, urna dui mollis  augue, a pretium turpis dui eget nunc. Donec porta varius diam eu  fermentum. Praesent nibh ipsum, pulvinar vel eleifend at, pretium eget  lectus. Sed pretium, dolor at convallis sollicitudin, purus metus tempus  nunc, sit amet pellentesque purus lorem id sapien. Ut sed commodo  velit. Praesent eu lorem massa. Sed eleifend lorem in diam iaculis sit  amet mattis odio varius. Proin venenatis eros sit amet dolor pharetra  vel laoreet leo dapibus. Ut lectus quam, congue ac tristique vitae,  porta non tortor. Suspendisse potenti. In egestas cursus nulla et  suscipit. Mauris posuere felis quis nunc consequat sit amet pulvinar  orci semper.Suspendisse potenti. Duis auctor rutrum ante vel mattis. Aliquam quis  nunc arcu. Suspendisse scelerisque massa id sem luctus vulputate mollis  erat feugiat. Phasellus metus neque, venenatis at semper vel, malesuada  vel velit. Donec pellentesque ultrices mauris, porta condimentum enim  dignissim et. In posuere luctus dolor quis consectetur. Duis eros mi,  lobortis nec egestas ac, ullamcorper ut justo. Donec viverra auctor  venenatis. Suspendisse potenti. Cras aliquet lobortis luctus. Quisque  lobortis est nec leo lacinia quis vulputate erat sagittis. Morbi et nisl  enim. Quisque fringilla feugiat arcu, nec luctus tellus faucibus sed.  Proin convallis nunc eu mi bibendum sed congue justo laoreet.Quisque consequat pellentesque metus, convallis dictum purus tristique  pulvinar. Suspendisse purus felis, euismod in lacinia in, vestibulum a  urna. Quisque tristique mi eu ligula viverra faucibus. Etiam neque dui,  auctor nec dignissim a, venenatis ac erat. Maecenas leo ipsum, euismod  sit amet rutrum ut, convallis in sapien. Proin est eros, fermentum  lobortis mollis tempor, pretium quis metus. Duis id nibh quis augue  euismod condimentum. Nam hendrerit accumsan eros a aliquet. Proin ac  nisi diam, at euismod mi. Proin et justo non velit porta iaculis ac sit  amet nunc. Maecenas blandit mauris eget justo porttitor pellentesque  quis ut mauris. Morbi felis augue, luctus sit amet ullamcorper posuere,  sagittis sed lacus.<span style=\\\"font-weight: bold;\\\"><br /><br /></span>';return true;" title="" border="0">

One thing I did do was change $r2['description'] to $description.

onmouseover="document.getElementById(\'myText\').firstChild.data = \'' . addslashes(str_replace("\"", "\\\"", str_replace("'", "\\'", str_replace("\\", "\\\\", $description)))) . '\';return true;"

[justsomeguy]

The escaped double quotes need only one slash before them instead of 3. Javascript also does not support multi-line strings, so you may want to replace line break characters with spaces.