SelphProgrammer
asked on
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>
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 :-)
ASKER
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" />
Please post css styles.
ASKER
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;
}
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>
ASKER
correct but the images are not in the form when you put them in the form the dont work anymore, this sucks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.