• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1000
  • Last Modified:

javascript onclick triggers css class change in firefox but not in ie

I have a list of images that when clciked I want to display a red border around it. I have this working fine in firefox but dosent work in ie, not sure why. I tried on tghe link herf='#' as well and no luck.
<script language="javascript" type="text/javascript">
 
var previous = '';
function deleteImage(field){
 
	document.form1.deleteImage.value = field;
	if (previous != ''){document.getElementById(previous).className='inactive';}
	document.getElementById(field).className='active';
	previous = field;
	
}
</script>
 
<a href="javascript:void(null);" onclick="deleteImage('dinmenu01');"><img id="dinmenu01" class="inactive" src="" alt="" width="80" /></a>
<a href="javascript:void(null);" onclick="deleteImage('dinmenu02');"><img id="dinmenu02" class="inactive" src="" alt="" width="80" /></a> 
<a href="javascript:void(null);" onclick="deleteImage('dinmenu03');"><img id="dinmenu03" class="inactive" src="" alt="" width="80" /></a>
<a href="javascript:void(null);" onclick="deleteImage('dinmenu04');"><img id="dinmenu04" class="inactive" src="" alt="" width="80" /></a>
<a href="javascript:void(null);" onclick="deleteImage('dinmenu05');"><img id="dinmenu05" class="inactive" src="" alt="" width="80" /></a>

Open in new window

0
SelphProgrammer
Asked:
SelphProgrammer
  • 4
  • 3
1 Solution
 
bluV11tCommented:
Move the onClick event to the image and not the anchor (A - tag). Maybe IE realoads thus always resetting your "previous" variable. You could style your "inactive" with "cursor: hand; " to make it appear as an achor :-)
0
 
SelphProgrammerAuthor Commented:
No good, doing it wothout <a> tags it dosent even work in forefox.
 <img id="dinmenu01" class="inactive" onMouseOver="this.style.cursor='pointer';" src="dinmenu01.jpg" onclick="deleteImage('this.id');" alt="" width="80" />

Open in new window

0
 
bluV11tCommented:
Please post css styles.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
SelphProgrammerAuthor Commented:
Here the are
@charset "utf-8";
 
/* coffee news adminsection css */
 
#main_admin {
	clear: both;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 0;
	padding-left: 20px;
	padding-right: 0;
	float:left;
}
 
#footer_admin {
	clear: both;
	margin: 0; padding: 0 0 0 0;
	font: normal .92em/1.5em 'Trebuchet MS', Tahoma, Arial, sans-serif;
	height: 12px;
	background:#FFFFFF;
	text-align: center;
}
.active{
	border:2px solid #FF0000;
}
.inactive{
	border: 2px solid #CCCCCC;
}
/* --- table view tags ------------------------------------------------------- */
 
.KT_tngtable th, .KT_tngtable td.KT_th {
	border: 1px solid #ffffff;
	border-right-color: #848284;
	border-bottom-color: #848284;
	background-color: #D6D3CE;
	font-weight: bold;
	vertical-align: top;
}
/* the plain cells   */
.KT_tngtable td {
	border: solid 1px #d6d3ce;
	border-top-width: 0;
	border-left-width: 0;
	vertical-align: baseline;
}
 
/* Table and cell look and feel */
.KT_tngtable {
	border: solid 1px #999999;
}
	.KT_tngtable tfoot, .KT_tngtable thead {
		border: solid 1px #000000;
	}
	.KT_tngtable td, .KT_tngtable th, .KT_tngtable caption {
		padding: 5px;
		white-space: nowrap;
	}
	/* HACK: to make ktml3 skin work properly */
	.KT_tngtable .ktml * td {
		border: 0px;
		white-space: normal ! important;
	}
		.KT_tngtable .ktml span.lcontainer table {
		}
		.KT_tngtable .ktml span.lcontainer td {
			padding: 0px ! important;
			margin: 0px ! important;
			vertical-align: middle;
		}
 
/* Buttons area for tNG form */
.KT_buttons td {
	border-top: solid 1px #000000;
	padding: 4px;
	background-color: #dadadc;
	text-align: right;
}
 
/* Fonts for the table, table headings, table cells */
	.KT_tngtable td, .KT_tngtable th, .KT_tngtable caption {
		font-family: Arial, Helvetica, sans-serif;
	}
	.KT_tngtable th, .KT_tngtable td.KT_th, .KT_tngtable caption {
		font-size: 12px;
		text-align: left;
	}
	.KT_tngtable td {
		font-size: 11px;
	}

Open in new window

0
 
bluV11tCommented:
This produces the same result in IE and FF.
 <script language="javascript" type="text/javascript">
 
var previous = '';
function deleteImage(field){
 
        document.getElementById('form1').deleteImage.value = field;
        if (previous != ''){document.getElementById(previous).className='inactive';}
        document.getElementById(field).className='active';
        previous = field;
        
}
</script>
 
<a onclick="deleteImage('dinmenu01');"><img id="dinmenu01" class="active" src="pixel.gif" alt="" width="80" height=80 /></a><br />
<a onclick="deleteImage('dinmenu02');"><img id="dinmenu02" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
<a onclick="deleteImage('dinmenu03');"><img id="dinmenu03" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
<a onclick="deleteImage('dinmenu04');"><img id="dinmenu04" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
<a onclick="deleteImage('dinmenu05');"><img id="dinmenu05" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
 
<form id="form1">
<input type=text id="deleteImage"></form>

Open in new window

0
 
SelphProgrammerAuthor Commented:
correct but the images are not in the form when you put them in the form the dont work anymore, this sucks.
0
 
bluV11tCommented:
Change the name of the deleteImage field in the form to somthing else like deletedImage. Browser gets confused becuse the field and the function has the same name.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now