asked on

Change an image when user holds down "Alt"

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

AsishRaj

<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

Samuel Liew

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

dzash2000

ASKER

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

dzash2000

ASKER

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

ASKER CERTIFIED SOLUTION

Samuel Liew

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dzash2000

ASKER

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

Change an image when user holds down &quot;Alt&quot;

Change an image when user holds down "Alt"