Forum Moderators: open
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
function imageswap(id, newImage)
{
identity=document.getElementById(id);
identity.src=newImage;
}
// Functions
function gallery0001() {imageswap('galleryimagehere', 'image-0001.jpg');}
function gallery0002() {imageswap('galleryimagehere', 'image-0002.jpg');}
</script>
</head><body>
<div class="center">
<img alt="Full Sized Image" id="galleryimagehere" src="images/image-0001.jpg" />
</div><div id="gallery">
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0001" onkeyup="gallery0001()" onmouseover="gallery0001();"><img alt="" src="images/image-thumb-0001.gif" /><span>0001</span></a>
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0002" onkeyup="gallery0002()" onmouseover="gallery0002();"><img alt="" src="images/image-thumb-0002.gif" /><span>0002</span></a>
</div>
</body>
</html>
That all works great but I want to be able to dynamically scale this as some of my galleries have literally hundreds of images.
If you look at the thumbnails (uh, both of them) I use both keyboard and mouse triggers (my latest work is literally 99% keyboard accessible without the mouse) so my big idea is to somehow pass the image number I want through the function call like this...
onaction="imageswap(0005);"
How could I adapt the current script to support this?
- John
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
function afunction(thenumber) {
identity = document.getElementById("galleryimagehere");
identity.src = "images/image-" +thenumber+ ".jpg";
}
</script>
</head><body>
<div class="center">
<img alt="Full Sized Image" id="galleryimagehere" src="images/image-0001.jpg" />
</div><div id="gallery">
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0001" onkeyup="afunction(0001)" onmouseover="afunction(0001);"><img alt="" src="images/image-thumb-0001.gif" /><span>0001</span></a>
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0002" onkeyup="afunction(0002)" onmouseover="afunction(0002);"><img alt="" src="images/image-thumb-0002.gif" /><span>0002</span></a>
</div>
</body>
</html>
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
function afunction(thenumber) {
identity = document.getElementById("galleryimagehere");
identity.src = "images/image-" +thenumber+ ".jpg";
}
</script>
</head><body>
<div class="center">
<img alt="Full Sized Image" id="galleryimagehere" src="images/image-0001.jpg" />
</div><div id="gallery">
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0001" onkeyup="afunction('0001')" onmouseover="afunction('0001');"><img alt="" src="images/image-thumb-0001.gif" /><span>0001</span></a>
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0002" onkeyup="afunction('0002')" onmouseover="afunction('0002');"><img alt="" src="images/image-thumb-0002.gif" /><span>0002</span></a>
</div>
</body>
</html>
