Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 144
  • Last Modified:

How to put border around current image selected ?

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
perplexedone
Asked:
perplexedone
  • 4
  • 2
1 Solution
 
perplexedoneAuthor Commented:
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
 
ZvonkoSystems architectCommented:
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
 
ZvonkoSystems architectCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
ZvonkoSystems architectCommented:
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
 
perplexedoneAuthor Commented:
Thank you SO much !!! you rock.
0
 
ZvonkoSystems architectCommented:
Oh, you are welcome :-)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now