Solved

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

Posted on 2008-10-10
7
990 Views
Last Modified: 2013-12-07
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
Comment
Question by:SelphProgrammer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 7

Expert Comment

by:bluV11t
ID: 22690558
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
 

Author Comment

by:SelphProgrammer
ID: 22690993
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
 
LVL 7

Expert Comment

by:bluV11t
ID: 22691049
Please post css styles.
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:SelphProgrammer
ID: 22691126
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
 
LVL 7

Expert Comment

by:bluV11t
ID: 22691160
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
 

Author Comment

by:SelphProgrammer
ID: 22691259
correct but the images are not in the form when you put them in the form the dont work anymore, this sucks.
0
 
LVL 7

Accepted Solution

by:
bluV11t earned 50 total points
ID: 22693471
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question