Gallery type action script?

**Shorte85** · 05-28-2009, 09:39 AM

I believe what I'm trying to modify is a action script, but I could be wrong. If so, I'm sorry.

I've been working on this since yesterday. I'm trying to get one particular thing to move over and I can't seem to get it to well move over.

You'll see that I've attached an image. The scroll bar outlined in red is perfect, doesn't need to be moved. Got that where I want it. However, the stuff outlined in blue I want in the orange outline.

I've tried fixing the code with margin, padding it didn't work. Here's the piece of code I'm trying to fix:

Code:

<table border="0"><tr>
<th>
<img id="BigFrogs" height="400" width="400" src="treefrog.jpg" alt="Red Eyed Tree Frog" >
<br><span id="BigFrogsCaption">Red Eyed Tree Frog</span>
<br>
</th>
<td style="width:100">&nbsp;</td>
<td>

  <div style="height:400;width:330;overflow:auto;">
   <script type="text/javascript">InitFrogs()</script>
  </div>
</td>

Here's everything other than just that code so you can see everything.

Code:

<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<title>World of Frogs - Home</title>

<script type="text/javascript">
var Frogs = [
  ['treefrog.jpg','Red Eyed Tree Frog'],
  ['treefrog.jpg','Image description'],
  ['image2.jpg','Image description'],
  ['image2.jpg','Image description'],
  ['image2.jpg','Image description'],
  // Note: no comma 
];

function SetImage(IDS,imgPtr) {
  var ids = '';
  var ImageList = new Array();
  if (IDS.indexOf('F') == 0) { ImageList = Frogs; ids = 'BigFrogs'; }
  document.getElementById(ids).src=ImageList[imgPtr][0];
  document.getElementById(ids).alt=ImageList[imgPtr][0];
  document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
}
function InitFrogs() {
  for (var i=0; i<Frogs.length; i++) {
    document.write('<img id="FC'+i+'" src="'+Frogs[i][0]+'" alt="'+Frogs[i][0]+'"' 
    + ' height="100" width="100" onMouseOver="SetImage(this.id,'+i+')"><p>');
  }
}
</script>

</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="left_container">
<div align="center">
<div class="left_top_bar"><b>NAVIGATION</b></div>
Home
<div class="gradient"></div>
Recent Discoveries
<div class="gradient"></div>
Frog Facts
<div class="gradient"></div>
Image Gallery
<div class="gradient"></div>
Contact/FAQ

<div class="left_top_bar"><b>MORE LINKS</b></div>
Outside Link 1
<div class="gradient"></div>
Outside Link 2
<div class="gradient"></div>
Outside Link 3
<div class="gradient"></div>
Outside Link 4
<div class="gradient"></div>
Outside Link 5
</div>
</div>

<div id="content_container">
<div class="content_top_bar">Welcome to World of Frogs</div>
<div style="margin-left: 8px; margin-right: 5px; margin-top: 5px">

<table border="0"><tr>
<th>
<img id="BigFrogs" height="400" width="400" src="treefrog.jpg" alt="Red Eyed Tree Frog" >
<br><span id="BigFrogsCaption">Red Eyed Tree Frog</span>
<br>
</th>
<td style="width:100">&nbsp;</td>
<td>

  <div style="height:400;width:330;overflow:auto;">
   <script type="text/javascript">InitFrogs()</script>
  </div>
</td>
</tr></table>

</div>
</div>

<div id="right_container">
<div align="center">
<div class="right_top_bar"><b>THUMBS</b></div>
Scroll over Thumbnails
</div>
</div>

<div id="footer"></div>
<div align="center">
Frog Abstract v1.0.0 - Design by CJ Bond &copy; 2009<br />
Red Eyed Tree Frog Image (Part of banner) &copy; <a href="http://animals.howstuffworks.com/amphibians/amphibian-pictures8.htm" alt="Image Gallery">Don Farrall</a>
</div> 

</body>
</html></tr></table>

Any ideas? How do I get the thumbs (as I call it) to the right where I want it?