Categories: MSDN / DotNet / Java / Scripts / Linux / PHP Ask - La ask - La Answer

JavaScript nested quotation marks...

Hey Everyone :),

I'm trying to have a button toolbar pop up after hovering the cursor over an image, and it works fine the only problem is that the buttons should swap to another image when you hover the cursor over an actual button. When hovering the cursor over the button the image doesn't swap.

Here is the code that is causing the problem (the following code is just for one button in the toolbar)...

addMenuItem("<a href='portugues/home.html' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('home_button','','buttons/home_button_over.gif',1)'><img src='buttons/home_button.gif' alt='Home' name='home_button' width='94' height='52' border='0' id='home_button' /></a>");

Basically what i have highlighted in red is what i think is causing the problem, i think i've implemented the quotation marks incorrectly. I am using Dreamweaver as you can probably tell from the code, but unfortunately dreamweaver can't do everything i want it to and so i need to make this modification in order to get my pop-up toolbar working fine.

Just in case the MM_swapImgRestore function's code is required, here it is:

function MM_swapImgRestore()
{ //v3.0
var i,x,a = document.MM_sr;
for( i=0; a && i < a.length && ( x = a [i] ) && x.oSrc; i++ )
x.src = x.oSrc;
}

Anyone know what exactly i'm doing wrong in that line of code?

Thanks for your time,

- CK
[1642 byte] By [Clark_Kent] at [2007-11-11 8:37:05]
# 1 Re: JavaScript nested quotation marks...
Over time I've realized it can be easier to learn to "escape" all nested double quotes in JavaScript. This way I don't run into issues in whether or not I've used single or double quotes last and I can almost always use double quotes when necessary in nested text.

Ie.

addMenuItem("<a href=\"portugues/home.html\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage(\'home_button','','buttons/home_button_over.gif',1)\"><img src=\"buttons/home_button.gif\" alt=\"Home\" name=\"home_button\" width=\"94\" height=\"52\" border=\"0\" id=\"home_button\" /></a>");

I would paste that line into a new script block in a new page and change 'addMenuItem" to "alert" and take a close look at the results. The "\" backslash will ensure that the parameter passed in addMenuItem isn't parsed to a double quote until after it enters the function call. I guess that's a bit wordy. Here is a link to an explanation of escape characters in JavaScript.

http://www.htmlgoodies.com/beyond/javascript/article.php/3470891

Hope that helps.
KalebZen at 2007-11-11 23:34:54 >