Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2008-10-10
7
Medium Priority
?
1,000 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
  • 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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 

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 200 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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

595 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