kberry
07-24-2011, 05:03 PM
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.
<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> <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> <span class="address-
text">Entry2</span><br>
</span>
</body>
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.
<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> <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> <span class="address-
text">Entry2</span><br>
</span>
</body>