Thumbnail Viewer II - onKeyPress?

[Tailslide]

<script type="text/javascript">
//<![CDATA[
/***********************************************
* Image Thumbnail Viewer II script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["images5.jpg", "images/big5.jpg","i"]
dynimages[1]=["images6.jpg", "images/big6.jpg","i"]
dynimages[2]=["images7.jpg", "images/big7.jpg","i"]
dynimages[3]=["images1.jpg", "images/big1.jpg","i"]

//Set scrolling for text content if text content used("yes" or "no"):
var scrolltext="no"

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
if (dynimages[x][2]=='i'){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
if (theimg[2]=="i")
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[2]=="t"){
scrollHeight=(document.getElementByID)?document.getElementById('dynloadarea').style.height:document.all('dynloadarea').style.height
scrollWidth=(document.getElementByID)?document.getElementById('dynloadarea').style.width:document.all('dynloadarea').style.width

}
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
get_cap('');
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

function get_cap(cap){
if (document.getElementById){
document.getElementById('caploadarea').innerHTML=cap;}
else if (document.all){
document.all('caploadarea').innerHTML=cap;}
else{
return;}
}
//]]>
</script>

Hi folks

I'm using the Thumbnail II image viewer with added captions.

What I'd like to do is to make the script device independent - in other words so that the image is produced in the dynload area when the smaller image gets focus. The larger linked image can already be "got to" with the keyboard but I need to replicate the mouseover effect with focus.
Any advice gratefully accepted.

[jscheuer1]

Make the thumbnails also be links. This would have to be done in the HTML part of the page:

<a href="javascript:void(0);" onfocus="whatever();"><img onmouseover="whatever();" src="thumb1.jpg"></a>

[Tailslide]

Ah perfect! Thanks John.

I stuck the path to the large image in the mouseover's link along with the onfocus bit as you describe and it works like a dream.