Forum Moderators: open
Ok, so I got this script that changes a flag from red to white.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
img1 = "images/white-flag.gif";
img2 = "images/red-flag.gif";
function chng(c_img) {
if (document[c_img].src.indexOf(img1)!= -1) document[c_img].src = img2;
else document[c_img].src = img1;
}
</Script>
</head>
<body>
<img src="images/white-flag.gif" onClick="chng('img');" name="img" width="20" border="0" height="20">
</body>
</html>
It does, however, only work for one image (per page).
I have a list of about 150 items that each needs one flag next to it, and I need them all to be flaggable.
Ofcourse, I COULD just copy paste this code 150 times, but lets just say thats not going to happen.
So, can anyone help me rewrite this script so that it works with multiple images? I suppose they can have different name=""-tags, I can fix that in PHP, and dont worry about storing the "on or off"-value of the flag, Im taking care of that with another PHP-script.
regards, praxiz
Try this:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
img1 = "images/white-flag.gif";
img2 = "images/red-flag.gif";
function chng(c_img) {
if (c_img.src.indexOf(img1)!= -1) c_img.src = img2;
else c_img.src = img1;
}
</Script>
</head>
<body>
<img src="images/white-flag.gif" onClick="chng(this)" name="img" width="20" border="0" height="20">
</body>
</html>
But if you try it yourself, it does seem to be a bit .. "slow", I mean, if i click on a flag twice it might only change once, if i click too fast.
Any tips?
regards, praxiz.
You could add delays or disable the button during the event handler.
To wit (untested):
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var g_disabled=false;
img1 = "images/white-flag.gif";
img2 = "images/red-flag.gif";
function chng(c_img) {
if (c_img.src.indexOf(img1)!= -1) c_img.src = img2;
else c_img.src = img1;
// You could add a delay here.
g_disabled=true;
}
</Script>
</head>
<body>
<img src="images/white-flag.gif" onClick="if(!g_disabled){g_disabled=true;chng(this)}" name="img" width="20" border="0" height="20">
</body>
</html>
// You could add a delay here.
g_disabled =[b]false[/b];
