Forum Moderators: open
I am trying to find a way to rotate 8 different images that have corresonding links on the index page of our website.
I can do it manually, but the page would refresh each time, and that wouldn't work.
I need for the 8 images to rotate when you hit a left or right arrow. And the image needs to be a hyper link to information, and there also needs to be two corresponding links under it that point to related info.
For example:
_______________
Image with link
_______________
Link1 Link2
Is there a way to do this with javascript? I need something I can cut and paste.
Thanks!
Here is an example page...all the framework is there, you just have to fill in the array data in the script and change the CSS for the image size, links styling, &c...
<!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>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>Title</title>
<style type="text/css" title="Default Style">
<!--
html, body {
background: #E2E4E4;
font-size: 0.94em;
}
div#main {
width: 204px;
height: 300px;
text-align: center;
}
#lnk {
padding: 2px 0px 0px 0px;
margin: 4px 0px;
border: 1px solid gray;
border-right: none;
border-left: none;
}
#img {
width: 200px;
height: 200px;
padding: 2px;
margin: 0px;
border: none;
}
#rel1, #rel2 {
margin: 4px;
}
/* .small-button {
width: 16px;
max-width: 16px;
padding: 0px;
margin: 0px;
} */
a, a:link, a:visited {
display: block;
text-decoration: none;
color: navy;
}
a:hover {
color: green;
}
-->
</style>
<script type="text/javascript">
<!--
var currentImg = 0;
// array of images and main links arrays
var imgs = new Array(8);
imgs[0] = new Array(2);
imgs[0][0] = "tmp1.png";
imgs[0][1] = "http://somewhere.over.there/";
imgs[1] = new Array(2);
imgs[1][0] = "tmp2.png";
imgs[1][1] = "http://somewhere.over.there/";
imgs[2] = new Array(2);
imgs[2][0] = "tmp3.png";
imgs[2][1] = "http://somewhere.over.there/";
imgs[3] = new Array(2);
imgs[3][0] = "tmp1.png";
imgs[3][1] = "http://somewhere.over.there/";
imgs[4] = new Array(2);
imgs[4][0] = "tmp2.png";
imgs[4][1] = "http://somewhere.over.there/";
imgs[5] = new Array(2);
imgs[5][0] = "tmp3.png";
imgs[5][1] = "http://somewhere.over.there/";
imgs[6] = new Array(2);
imgs[6][0] = "tmp1.png";
imgs[6][1] = "http://somewhere.over.there/";
imgs[7] = new Array(2);
imgs[7][0] = "tmp2.png";
imgs[7][1] = "http://somewhere.over.there/";
// array of related links arrays
var rel = new Array(8);
rel[0] = new Array(4);
rel[0][0] = "http://somewhere.over.there/1/";
rel[0][1] = "Description of the link";
rel[0][2] = "http://somewhere.over.there/2/";
rel[0][3] = "Description of the link";
rel[1] = new Array(4);
rel[1][0] = "http://somewhere.over.there/3/";
rel[1][1] = "Description of the link";
rel[1][2] = "http://somewhere.over.there/4/";
rel[1][3] = "Description of the link";
rel[2] = new Array(4);
rel[2][0] = "http://somewhere.over.there/5/";
rel[2][1] = "Description of the link";
rel[2][2] = "http://somewhere.over.there/6/";
rel[2][3] = "Description of the link";
rel[3] = new Array(4);
rel[3][0] = "http://somewhere.over.there/7/";
rel[3][1] = "Description of the link";
rel[3][2] = "http://somewhere.over.there/8/";
rel[3][3] = "Description of the link";
rel[4] = new Array(4);
rel[4][0] = "http://somewhere.over.there/9/";
rel[4][1] = "Description of the link";
rel[4][2] = "http://somewhere.over.there/10/";
rel[4][3] = "Description of the link";
rel[5] = new Array(4);
rel[5][0] = "http://somewhere.over.there/11/";
rel[5][1] = "Description of the link";
rel[5][2] = "http://somewhere.over.there/12/";
rel[5][3] = "Description of the link";
rel[6] = new Array(4);
rel[6][0] = "http://somewhere.over.there/13/";
rel[6][1] = "Description of the link";
rel[6][2] = "http://somewhere.over.there/14/";
rel[6][3] = "Description of the link";
rel[7] = new Array(4);
rel[7][0] = "http://somewhere.over.there/15/";
rel[7][1] = "Description of the link";
rel[7][2] = "http://somewhere.over.there/16/";
rel[7][3] = "Description of the link";
// preload the images
function preload() {
var tmp = null;
for (var j = 0; j < imgs.length; j++) {
tmp = imgs[j][0];
imgs[j][0] = new Image();
imgs[j][0].src = tmp;
}
}
// keyup handler
function detectKey(e) {
if (!e) { e = window.event; } // sanity
if (e.keyCode == 37) { // left
changeImg("left");
}
else if (e.keyCode == 39) { // right
changeImg("right");
}
return false;
}
function changeImg(dir) {
if ((dir == "left") &&
(currentImg > 0)) {
currentImg--;
setImgProps();
}
else if ((dir == "right")&&
(currentImg < 7)) {
currentImg++;
setImgProps();
}
}
function setImgProps() {
var img = document.getElementById("img");
img.src = imgs[currentImg][0].src;
var lnk = document.getElementById("lnk");
lnk.href = imgs[currentImg][1];
var rel1 = document.getElementById("rel1");
rel1.href = rel[currentImg][0];
rel1.innerHTML = rel[currentImg][1];
var rel2 = document.getElementById("rel2");
rel2.href = rel[currentImg][2];
rel2.innerHTML = rel[currentImg][3];
}
// hookup event handlers
document.onkeyup = function(event) { detectKey(event); };
window.onload = function() { preload(); };
//-->
</script>
</head>
</body>
<div id="main">
<a id="lnk" href="http://somewhere.over.there/">
<img id="img" src="tmp1.png" alt="Image" />
</a>
<a id="rel1" href="http://somewhere.over.there/1/">
Related 1
</a>
<a id="rel2" href="http://somewhere.over.there/2/">
Related 2
</a>
<!-- uncomment the following and the 'small-button' -->
<!-- CSS rule above to enable button navigation -->
<!--
<input type="button" class="small-button"
value="<" onclick="changeImg('left');"
onfocus="this.blur();" />
<input type="button" class="small-button"
value=">" onclick="changeImg('right');"
onfocus="this.blur();" />
-->
</div>
</body>
</html>
Jordan
