Hi, I've been directed over here from the Dreamweaver forum who suggested the following code in respect to me wanting to display one out of ten images in a browser window dependent on keys 0 through 9 being pressed.
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function keyDown(e) {
if (ns4) {
if (e.which == "#"
{
alert("your img switch code here"
}
}
if (ie4) {
if (event.keyCode == "#"
{
alert("your img switch code here"
}
}
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
//-->
</SCRIPT>
However, I'm a newbie programmer, so how would I use this to do what I want? I usually use image rollover code (as below) to swap between two images, but don't understand how I could mod it using the above code.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v2.0
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData.src = document.MM_swapImgData[i+1];
}
function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"{
preloadArray = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
function MM_swapImage() { //v2.0
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src
ldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('picture2.jpg','#1002812954010')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.Image1','document.Image1','picture2.jpg','#1002812954010')"><img name="Image1" border="0" src="picture1.jpg" width="512" height="384"></a>
</body>
</html>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function keyDown(e) {
if (ns4) {
if (e.which == "#"
{
alert("your img switch code here"
;}
}
if (ie4) {
if (event.keyCode == "#"
{
alert("your img switch code here"
;}
}
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
//-->
</SCRIPT>
However, I'm a newbie programmer, so how would I use this to do what I want? I usually use image rollover code (as below) to swap between two images, but don't understand how I could mod it using the above code.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v2.0
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData.src = document.MM_swapImgData[i+1];
}
function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"
{preloadArray = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
function MM_swapImage() { //v2.0
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src
ldArray[j];obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('picture2.jpg','#1002812954010')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.Image1','document.Image1','picture2.jpg','#1002812954010')"><img name="Image1" border="0" src="picture1.jpg" width="512" height="384"></a>
</body>
</html>