?
Solved

How to put border around current image selected ?

Posted on 2003-02-28
6
Medium Priority
?
142 Views
Last Modified: 2010-04-09
I was given this code to insert into a scrolling image slideshow i have (http://64.70.151.74/one.htm)

The code is supposed to enable a stationary border around each image WHEN the image is currently selected and when the next image is then selected the previous image no longers has a any border. (only have border around current image selected)

I can't reach the person who gave it to me to find out how i format it and insert the code....Such as what do i put for onClick= and where do i put that command, etc, I don't really know javascript yet but need to add this functionality or Ill be in big trouble. :-(

What should i do to make following code workable ?  
And can I adjust th ecode so when i load the slideshow the first image in the slideshow shows a border around it upon page load ?

Thanks ! Becky


You can set the IMG border onclick:

this.border = 3;
currentImage = this.name;

That is a global variable to keep track of the currently selected image. This way, when the next image is clicked, to can turn off the border of the first image:

document.images[currentImage].border = 0;
this.border = 3;
currentImage = this.name;
 
 currentImage is just the name of a variable. You can use a variable name of your own choice in that position. You can initially define such a global variable in the HEAD section of your page -- just make sure that you initially define it outside of any functions:

currentImage = null;

Then your code can test it to make sure that there is a previous image that needs its border turned off:

if (currentImage != null) {
document.images[currentImage].border = 0;
}
this.border = 3;
currentImage = this.name;

 
 
 



0
Comment
Question by:perplexedone
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 

Author Comment

by:perplexedone
ID: 8051292
oh and heres the html im trying to add it to:

<html>
<head>
<title>PortfolioThumbs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#766c8f" leftmargin="4" topmargin="1" link="#B4B1C2" vlink="#B4B1C2" alink="#5E4EB8">
<table width="356" border="1" cellspacing="0" cellpadding="0" height="58" bgcolor="#B4B1C2" bordercolor="#FFFFFF" align="left">
 <tr>
   <td bgcolor="#B4B1C2" border="3" bordercolor="#B4B1C2" align="left" height="58">
     <script language="JavaScript1.2">

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width
var menuwidth=356
//configure menu height
var menuheight=58
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//configure background color:
var slidebgcolor="#766c8f"
//specify menu content
var menucontents='<nobr><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/1test.htm" TARGET="preview"><img src="images/96887jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/2b.htm" TARGET="preview"><img src="images/55465jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/3b.htm" TARGET="preview"><img src="images/56556jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/4b.htm" TARGET="preview"><img src="images/56554jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/5b.htm" TARGET="preview"><img src="images/56555jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/6b.htm" TARGET="preview"><img src="images/56576jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/7b.htm" TARGET="preview"><img src="images/55462jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/8b.htm" TARGET="preview"><img src="images/55461jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/9b.htm" TARGET="preview"><img src="images/55460jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/10b.htm" TARGET="preview"><img src="images/96858jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/11b.htm" TARGET="preview"><img src="images/56581jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/12b.htm" TARGET="preview"><img src="images/56582jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/13b.htm" TARGET="preview"><img src="images/56583jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/14b.htm" TARGET="preview"><img src="images/96885jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/15b.htm" TARGET="preview"><img src="images/56577jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/16b.htm" TARGET="preview"><img src="images/56578jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/17b.htm" TARGET="preview"><img src="images/56579jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/18b.htm" TARGET="preview"><img src="images/96857jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/19b.htm" TARGET="preview"><img src="images/96863jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/20b.htm" TARGET="preview"><img src="images/96864jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/21b.htm" TARGET="preview"><img src="images/96889jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/22b.htm" TARGET="preview"><img src="images/56558jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a> <a href="http://64.70.151.74/23b.htm" TARGET="preview"><img src="images/56557jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/24b.htm" TARGET="preview"><img src="images/56559jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/25b.htm" TARGET="preview"><img src="images/56587jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/27b.htm" TARGET="preview"><img src="images/56563jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/28b.htm" TARGET="preview"><img src="images/56561jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/29acd.htm" TARGET="preview"><img src="images/56562jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/29b.htm" TARGET="preview"><img src="images/56564jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/30b.htm" TARGET="preview"><img src="images/56569jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/31b.htm" TARGET="preview"><img src="images/65237jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/32b.htm" TARGET="preview"><img src="images/96866jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/33b.htm" TARGET="preview"><img src="images/56571jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a> <a href="http://64.70.151.74/35b.htm" TARGET="preview"><img src="images/56570jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/36acd.htm" TARGET="preview"><img src="images/56580jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/36b.htm" TARGET="preview"><img src="images/96865jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/37b.htm" TARGET="preview"><img src="images/96861jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/38b.htm" TARGET="preview"><img src="images/96862jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/39b.htm" TARGET="preview"><img src="images/96860jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/41b.htm" TARGET="preview"><img src="images/56586jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a> <a href="http://64.70.151.74/42b.htm" TARGET="preview"><img src="images/56584jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/43b.htm" TARGET="preview"><img src="images/55463jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/44b.htm" TARGET="preview"><img src="images/96856jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg"></a><a href="http://64.70.151.74/45b.htm" TARGET="preview"><img src="images/96888jpg.jpg" border="3"></a><a TARGET="preview"><img src="images/image.jpg" border="1"></a></nobr>'


var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
righttime=setTimeout("moveright()",50)
}

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="3">')
write('<td valign="middle"><a href=#B4B1C2" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><br><img src="pointer2.gif"'+goleftimage+'"border=3></a> </td>')
write('<td valign="abstop">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+';">')
write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#B4B1C2" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<br><img src="pointer.gif"'+gorightimage+'"border=3></a>')
write('</td></table>')
}
}
</script>
     <table width="333" border="0" cellspacing="0" cellpadding="0" height="1" align="center" bgcolor="#B4B1C2">
       <tr>
         <td>&nbsp;</td>
       </tr>
     </table>
   </td>
 </tr>
</table>
</body>
</html>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 8051409
Try this:

<HTML>
<HEAD>
<title>PortfolioThumbs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#766c8f" leftmargin="4" topmargin="1" link="#B4B1C2" vlink="#B4B1C2" alink="#7B699A">
<table width="360" border="1" cellspacing="0" cellpadding="1" height="60" bgcolor="#B4B1C2" bordercolor="#FFFFFF"

align="left">
 <tr>
    <td bgcolor="#B4B1C2" bordercolor="#B4B1C2" align="left" height="60">
      <script language="JavaScript1.2">

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width
var menuwidth=360
//configure menu height
var menuheight=60
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//configure background color:
var slidebgcolor="#766c8f"
//specify menu content
spacerImage="images/image.jpg";
var menuItems=new Array();
//                 Link, Image, Target
menuItems[menuItems.length]=["http://64.70.151.74/1test.htm", "images/96887jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/2b.htm",    "images/55465jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/3b.htm",    "images/56556jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/4b.htm",    "images/56554jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/5b.htm",    "images/56555jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/6b.htm",    "images/56576jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/7b.htm",    "images/55462jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/8b.htm",    "images/55461jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/9b.htm",    "images/55460jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/10b.htm",   "images/96858jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/11b.htm",   "images/56581jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/12b.htm",   "images/56582jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/13b.htm",   "images/56583jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/14b.htm",   "images/96885jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/15b.htm",   "images/56577jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/16b.htm",   "images/56578jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/17b.htm",   "images/56579jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/18b.htm",   "images/96857jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/19b.htm",   "images/96863jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/20b.htm",   "images/96864jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/21b.htm",   "images/96889jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/22b.htm",   "images/56558jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/23b.htm",   "images/56557jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/24b.htm",   "images/56559jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/25b.htm",   "images/56587jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/27b.htm",   "images/56563jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/28b.htm",   "images/56561jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/29acd.htm", "images/56562jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/29b.htm",   "images/56564jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/30b.htm",   "images/56569jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/31b.htm",   "images/65237jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/32b.htm",   "images/96866jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/33b.htm",   "images/56571jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/35b.htm",   "images/56570jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/36acd.htm", "images/56580jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/36b.htm",   "images/96865jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/37b.htm",   "images/96861jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/38b.htm",   "images/96862jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/39b.htm",   "images/96860jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/41b.htm",   "images/56586jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/42b.htm",   "images/56584jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/43b.htm",   "images/55463jpg.jpg", "preview"];
menuItems[menuItems.length2]=["http://64.70.151.74/44b.htm",  "images/96856jpg.jpg", "preview"];
menuItems[menuItems.length3]=["http://64.70.151.74/45b.htm",  "images/96888jpg.jpg", "preview"];
menucontents='<nobr>\n';
for(i=0;i<menuItems.length;i++){
  theLink=menuItems[i][0];
  theImage=menuItems[i][1];
  theTarget=menuItems[i][2];
  if(theTarget!="")theTarget='TARGET="'+theTarget+'" ';
  menucontents+='<img src="'+spacerImage+'">'+
    '<a href="'+theLink+'" '+theTarget+' >'+
    '<img name=img'+i+' src="'+theImage+'" onClick="makeActive(this.name)"></a>\n';
}
menucontents+='</nobr>'
//alert(menucontents);
lastImage = null;
function makeActive(thisImage){
 if (lastImage != null)
   document.images[lastImage].border = 0;
 document.images[thisImage].border = 4;
 document.images[thisImage].style.bgcolor = 'red';
 lastImage = thisImage;
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
makeActive('img0')
loadedyes=1
}
window.onload=fillup

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
righttime=setTimeout("moveright()",50)
}

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="3">')
write('<td valign="middle"><a onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><br><img

src="pointer2.gif"'+goleftimage+'"border=3></a> </td>')
write('<td valign="abstop">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+';">')
write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<br><img src="pointer.gif"'+gorightimage+'"border=3></a>')
write('</td></table>')
}
}
</script>
      <table width="333" border="0" cellspacing="0" cellpadding="0" height="1" align="center" bgcolor="#B4B1C2">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>


Good luck,
Zvonko

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 8051420
Oh, extend this makeActive() function like this:

lastImage = null;
function makeActive(thisImage){
 if (lastImage != null)
   document.images[lastImage].border = 0;
 document.images[thisImage].border = 4;
 document.images[thisImage].parentNode.focus();
 lastImage = thisImage;
}

Cheers,
Zvonko

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 8053226
Because of the amendment and two typos in upper page here the complete page again:

<HTML>
<HEAD>
<title>PortfolioThumbs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#766c8f" leftmargin="4" topmargin="1" link="#B4B1C2" vlink="#B4B1C2" alink="#7B699A">
<table width="360" border="1" cellspacing="0" cellpadding="1" height="60" bgcolor="#B4B1C2" bordercolor="#FFFFFF" align="left">
 <tr>
    <td bgcolor="#B4B1C2" bordercolor="#B4B1C2" align="left" height="60">
      <script language="JavaScript1.2">

/*
Scrollable Menu Links- By Dynamicdrive.com
For full source, TOS, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width
var menuwidth=360
//configure menu height
var menuheight=60
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//configure background color:
var slidebgcolor="#766c8f"
//specify menu content
spacerImage="images/image.jpg";
var menuItems=new Array();
//                 Link, Image, Target
menuItems[menuItems.length]=["http://64.70.151.74/1test.htm", "images/96887jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/2b.htm",    "images/55465jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/3b.htm",    "images/56556jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/4b.htm",    "images/56554jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/5b.htm",    "images/56555jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/6b.htm",    "images/56576jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/7b.htm",    "images/55462jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/8b.htm",    "images/55461jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/9b.htm",    "images/55460jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/10b.htm",   "images/96858jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/11b.htm",   "images/56581jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/12b.htm",   "images/56582jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/13b.htm",   "images/56583jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/14b.htm",   "images/96885jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/15b.htm",   "images/56577jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/16b.htm",   "images/56578jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/17b.htm",   "images/56579jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/18b.htm",   "images/96857jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/19b.htm",   "images/96863jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/20b.htm",   "images/96864jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/21b.htm",   "images/96889jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/22b.htm",   "images/56558jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/23b.htm",   "images/56557jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/24b.htm",   "images/56559jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/25b.htm",   "images/56587jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/27b.htm",   "images/56563jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/28b.htm",   "images/56561jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/29acd.htm", "images/56562jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/29b.htm",   "images/56564jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/30b.htm",   "images/56569jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/31b.htm",   "images/65237jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/32b.htm",   "images/96866jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/33b.htm",   "images/56571jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/35b.htm",   "images/56570jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/36acd.htm", "images/56580jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/36b.htm",   "images/96865jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/37b.htm",   "images/96861jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/38b.htm",   "images/96862jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/39b.htm",   "images/96860jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/41b.htm",   "images/56586jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/42b.htm",   "images/56584jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/43b.htm",   "images/55463jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/44b.htm",   "images/96856jpg.jpg", "preview"];
menuItems[menuItems.length]=["http://64.70.151.74/45b.htm",   "images/96888jpg.jpg", "preview"];
menucontents='<nobr>\n';
for(i=0;i<menuItems.length;i++){
  theLink=menuItems[i][0];
  theImage=menuItems[i][1];
  theTarget=menuItems[i][2];
  if(theTarget!="")theTarget='TARGET="'+theTarget+'" ';
  menucontents+='<img src="'+spacerImage+'">'+
    '<a href="'+theLink+'" '+theTarget+'>'+
    '<img name=img'+i+' src="'+theImage+'" onClick="makeActive(this.name)"></a>\n';
}
menucontents+='</nobr>'
//alert(menucontents);
lastImage = null;
function makeActive(thisImage){
 if (lastImage != null)
   document.images[lastImage].border = 0;
 document.images[thisImage].border = 4;
 document.images[thisImage].parentNode.focus();
 lastImage = thisImage;
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
makeActive('img0')
loadedyes=1
}
window.onload=fillup

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
righttime=setTimeout("moveright()",50)
}

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="3">')
write('<td valign="middle"><a onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><br><img src="pointer2.gif"'+goleftimage+'"border=3></a> </td>')
write('<td valign="abstop">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+';">')
write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write('<br><img src="pointer.gif"'+gorightimage+'"border=3></a>')
write('</td></table>')
}
}
</script>
      <table width="333" border="0" cellspacing="0" cellpadding="0" height="1" align="center" bgcolor="#B4B1C2">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Please be aware also of the fact that your URLs can omit the server part when the target URL is on same server.
That mean, instead of this:
menuItems[menuItems.length]=["http://64.70.151.74/1test.htm", "images/96887jpg.jpg", "preview"];

you can write this:
menuItems[menuItems.length]=["/1test.htm", "images/96887jpg.jpg", "preview"];

This help your code to be better maintained and moved to new locations.

Good luck,
Zvonko


0
 

Author Comment

by:perplexedone
ID: 8054736
Thank you SO much !!! you rock.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 8055565
Oh, you are welcome :-)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question