Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Change an image when user holds down "Alt"

Posted on 2009-04-22
6
Medium Priority
?
384 Views
Last Modified: 2012-06-21
Hi -

When the user holds down the ALT key I want a CSS class I've named "Add" to change to the CSS class I've named "Delete" - and when the user releases the ALT key the class should change back to "Add".

These classes have background images that I hope will change with the key down and up events.

How can this be done with Javascript?

Thanks for your input.

d2


HTML:		
 
<a href="#"   class="btnPair Add" ></a>
 
<a href="#"   class="btnPair Delete" ></a>
 
 
CSS:
 
.btnpair.Add{
	background: url("../_images/btnPair_Add.gif") no-repeat 0 0;
	}
 
.btnpair.Delete{
	background: url("../_images/btnPair_Delete.gif") no-repeat 0 0;
	}

Open in new window

0
Comment
Question by:dzash2000
  • 3
  • 2
6 Comments
 
LVL 9

Expert Comment

by:AsishRaj
ID: 24210520
<a href="#"   class="btnPair Add" ></a>
 
<a href="#"   class="btnPair Delete" ></a>

add and id to these elements

<script type="text/javascript">
function detectspecialkeys(e){
var evtobj=window.event? event : e
if (evtobj.altKey || evtobj.ctrlKey || evtobj.shiftKey)
alert("you pressed one of the 'Alt', 'Ctrl', or 'Shift' keys")
}
document.onkeypress=detectspecialkeys 
'change the css class here - get the element ID and change its CSS Class
</script>
 
Or 
function doSomething(e) {
	var code;
	if (!e) var e = window.event;
	if (e.keyCode) code = e.keyCode;
	else if (e.which) code = e.which;
	var character = String.fromCharCode(code);
	alert('Character was ' + character);
'change the css class here - get the element ID and change its CSS Class
}

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 24210557
Try this. I'm not sure if it's working, because I don't have the images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.add{
	background: url("../_images/btnPair_Add.gif") no-repeat 0 0;
}
.delete{
	background: url("../_images/btnPair_Delete.gif") no-repeat 0 0;
}
</style>
<script type="text/javascript"><!--
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}; 
 
// Capture Keyboard events
function KeyDown(e) { try {
	var k = (window.event)?event.keyCode:e.keyCode;
	if(k==18) {
		e=document.getElementsByClassName("add");
		for(i=0;i<e.length;i++){
			e[i].ClassName="btnpair delete";
		}
	}
}catch(e){} }
function KeyUp(e) { try {
	var k = (window.event)?event.keyCode:e.keyCode;
	if(k==18) {
		e=document.getElementsByClassName("delete");
		for(i=0;i<e.length;i++){
			e[i].ClassName="btnpair add";
		}
	}
}catch(e){} }
document.onkeydown = KeyDown;
document.onkeyup = KeyUp;
//--></script>
</head>
 
<body>
<a href="#" class="add"></a>
<a href="#" class="delete"></a>
</body>
</html>

Open in new window

0
 

Author Comment

by:dzash2000
ID: 24219441
AsishRaj and sam2912
I could not make those solutions work but I appreciate your input.

2 things I should have done: 1: told you I'm pretty in the dark with JS and 2: provided the images.  

Both omissions have been corrected here.

There is also expanded CSS to make sure these gifs show up on your screen when called with the html.


Thanks for your help.
html -----------
 
	<a href="#" class="add" ></a>
	
	
	<a href="#" class="delete"></a>
	
 
css  ----------------
 
.add{
	background: url("_images/btn_Add_off.gif") no-repeat 0 0;
	display: inline-block;
	width: 54px;
	height: 20px;
	margin-top: -22px;
 
}
.delete{
	background: url("_images/btn_Delete_off.gif") no-repeat 0 0;
	display: inline-block;
	width: 54px;
	height: 20px;
	margin-top: -22px;
}

Open in new window

btn-Add-off.gif
btn-Delete-off.gif
0
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.

 

Author Comment

by:dzash2000
ID: 24220020
HI - PLEASE note that the images I've uploaded were somehow renamed in transit from having underscores to hyphens between words.  

*******my name:

btn_Add_off.gif

*******after uploading:

btn-Add-off.gif


Sorry for any confusion this has caused.

d2
0
 
LVL 14

Accepted Solution

by:
sam2912 earned 1000 total points
ID: 24220869
Tested in Firefox.

When Alt keys is down, the add button will change to delete. When Alt key is up, both being delete, will change to add. Is that what you want?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.add{
   background: url("btn_Add_off.gif") no-repeat 0 0;
   display: inline-block;
   width: 54px;
   height: 20px;
   margin-top: -22px;
   }
   .delete{
   background: url("btn_Delete_off.gif") no-repeat 0 0;
   display: inline-block;
   width: 54px;
   height: 20px;
   margin-top: -22px;
}
</style>
<script type="text/javascript"><!--
document.getElementsByClassName = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
	var classes = elem[i].className;
	if (myclass.test(classes)) retnode.push(elem[i]);
	}
	return retnode;
}; 
 
// Capture Keyboard events
function KeyDown(e) { try {
	var k = (window.event)?event:e;
	if(k.keyCode==18) {
		elem=document.getElementsByClassName("add");
		for(i=0;i<elem.length;i++){
			elem[i].className="delete";
		}
	}
}catch(e){} }
function KeyUp(e) { try {
	var k = (window.event)?event:e;
	if(k.keyCode==18) {
		elem=document.getElementsByClassName("delete");
		for(i=0;i<elem.length;i++){
			elem[i].className="add";
		}
	}
}catch(e){} }
document.onkeydown = KeyDown;
document.onkeyup = KeyUp;
//--></script>
</head>
 
<body>
<a href="#" class="add"></a>
<a href="#" class="delete"></a>
</body>
</html>

Open in new window

0
 

Author Comment

by:dzash2000
ID: 24220986
sam2912 -

Thanks - I think I can work with that.  

I  can see that it will flip ANY button on the page with the classname of "add" or "delete".  So if I want to target only one button I'll just name it and it's counterpart something else - - - like "zig" and "zag".  Right?

Thanks again.

d2

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

810 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