...

View Full Version : Dynamically add/remove rollover code to js file.



kberry
07-24-2011, 06: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>&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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum