Hi,

When the user clicks a button, I dynamically add entries to the page that have an X button rollover created with it as a means to remove the entry. The code would work just fine except that every time I add an element, I need to add the following line of javascript code:

setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1');

where the number '1' is replaced by whatever number of rollover I'm at (as new entries are added, it'd be rollover1, rollover2, etc.

Is there a way to add, and possibly even remove, a line of javascript from a .js file? I'd like to do something like:

Once the user clicks the button, and the entry is created, add/append

"setrollover(\"images/tabs-icons/over-address_remove.png\", \"address_remove1" + i + "\");"

to rollovers.js.

A more challenging task would be to : When that element is removed, remove that line from the file.

Below is a working example of two rollover images that differ only by the number.

Code:
<html>
<head>
</head>
<script>
//THIS SCRIPT BLOCK IS NORMALLY IN A SEPARATE FILE THAT I CAN PROBABLY APPEND/REMOVE FROM.
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this 
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
	if (! document.images)return;
	if (pageImageName == null)
		pageImageName = document.images[document.images.length-1].name;
	rollOverArr[pageImageName]=new Object;
	rollOverArr[pageImageName].overImg = new Image;
	rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
	if (! document.images)return;
	if (! rollOverArr[pageImageName])return;
	if (! rollOverArr[pageImageName].outImg)
		{
		rollOverArr[pageImageName].outImg = new Image;
		rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
		}
	document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
	if (! document.images)return;
	if (! rollOverArr[pageImageName])return;
	document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->

setrollover("images/tabs-icons/over-address_remove.png", 'address_remove');
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1');

</script>

<body>
<span id="AddressesVisited" style="font-weight:bold; cursor:pointer;">

<a onMouseOver="rollover('address_remove')" onMouseOut="rollout('address_remove')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove" title="remove" alt="remove"></a>&nbsp;<span class="address-

text">Entry1</span><br>

<a onMouseOver="rollover('address_remove1')" onMouseOut="rollout('address_remove1')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove1" title="remove" alt="remove"></a>&nbsp;<span class="address-

text">Entry2</span><br>
</span>
</body>