how to pass image src (php variable )to javascript

Dear all,

I would like to pass php variable to javascript function. I have already read the previous messages about it. But it doesnt still work.

<?php
session start();
....
$src = $language_config_key_value_pairs['reset']; // it means => $src = "btn-reset.gif"
echo '
<script type="text/javascript">
var ri = new resetimage("<?=$src?>"); // if I try var ri = new resetimage("btn-reset.gif"), image button is shown.
ri.write();
</script>
<NOSCRIPT><INPUT TYPE=RESET></NOSCRIPT> ';
.......
?>

The problem is passing php variable like this, image button is not shown. Instead of it, text 'Reset' is shown. But this text actually reset other fields. It also works. But I can't see image button. Can anybody help me ?

Here is my javascript function : Functionally speaking, this function makes image reset button reset other text fields. I have already tested this function. It works properly.


<SCRIPT TYPE="text/javascript">

var resetRolls = new Object();
function resetimage(src)
{
this.src=src;
this.confirm=true;
this.alt="Reset";
this.write=resetimage_write;
}
function resetimage_write()
{
document.write(\'<A \');
if (this.rollover)
{
if (! this.name)
{
alert(\'to create a rollover you must give the image a name\');
return;
}
resetRolls[this.name] = new Object();
resetRolls[this.name].over = new Image();
resetRolls[this.name].over.src=this.rollover;
resetRolls[this.name].out = new Image();
resetRolls[this.name].out.src=this.src;
document.write(
\' onMouseOver="if (document.images)document.images[\\\'\' +
this.name + \'\\\'].src=resetRolls[\\\'\' + this.name + \'\\\'].over.src"\' +
\' onMouseOut="if (document.images)document.images[\\\'\' +
this.name + \'\\\'].src=resetRolls[\\\'\' + this.name + \'\\\'].out.src"\'
);
}
document.write(\' HREF="javascript:\');
document.write(
\'document.forms[\' +
(document.forms.length - 1) + \'].reset();void(0);">\');
document.write(\'<IMG SRC="\' + this.src + \'" ALT="\' + this.alt + \'"\');
document.write(\' BORDER=0\');
if (this.name)document.write(\' NAME="\' + this.name + \'"\');
if (this.height)document.write(\' HEIGHT=\' + this.height);
if (this.width)document.write(\' WIDTH=\' + this.width);
if (this.otheratts)document.write(\' \'+ this.otheratts);
document.write(\'></A>\');
}
</SCRIPT>

var resetRolls = new Object();
function resetimage(src)
{
this.src=src;
this.confirm=true;
this.alt="Reset";
this.write=resetimage_write;
}
function resetimage_write()
{
document.write(\'<A \');
if (this.rollover)
{
if (! this.name)
{
alert(\'to create a rollover you must give the image a name\');
return;
}
resetRolls[this.name] = new Object();
resetRolls[this.name].over = new Image();
resetRolls[this.name].over.src=this.rollover;
resetRolls[this.name].out = new Image();
resetRolls[this.name].out.src=this.src;
document.write(
\' onMouseOver="if (document.images)document.images[\\\'\' +
this.name + \'\\\'].src=resetRolls[\\\'\' + this.name + \'\\\'].over.src"\' +
\' onMouseOut="if (document.images)document.images[\\\'\' +
this.name + \'\\\'].src=resetRolls[\\\'\' + this.name + \'\\\'].out.src"\'
);
}
document.write(\' HREF="javascript:\');
document.write(
\'document.forms[\' +
(document.forms.length - 1) + \'].reset();void(0);">\');
document.write(\'<IMG SRC="\' + this.src + \'" ALT="\' + this.alt + \'"\');
document.write(\' BORDER=0\');
if (this.name)document.write(\' NAME="\' + this.name + \'"\');
if (this.height)document.write(\' HEIGHT=\' + this.height);
if (this.width)document.write(\' WIDTH=\' + this.width);
if (this.otheratts)document.write(\' \'+ this.otheratts);
document.write(\'></A>\');
}
</SCRIPT>

I got it. Thanks!

I realize you solve the problem, but i'll state what I think the solution would look like
If you did it a different way, feel free to post that.
Hopefully this thread will help others as well.