simple for most probably, css alignment help please

**dougshreff** · 09-28-2014, 07:29 PM

This is my first post, hello everyone.

I have tried three other posts to place a request and seems my account does not have permission I hope it does here.

so,

I have a simple for the moment, slide show code.

here is the page http://dougshrefflerthenextpresident.com/aaaDougtest5.html
I am here after finding this post http://www.dynamicdrive.com/forums/s...mage-slideshow

and tried to reply to it without success, so I hope I can start this new thread. I will ask the qs one at a time,
I have several to get it close to what I need.

so,

I would like the large picture inside the frame above on mouseover.
I would like manual left and right scrolling on the big top img and the small imgs below it, there will be many more.
The imgs of the bird are just to get started the actual imgs will be campaign related, for now I am coding my own site
till a committee starts next year and im a very low income, grassroots guy. So, can someone kindly write this part for me? It has taken a week of trying for me, I am great as a g4 classified"waiting on pension", but hey, my coding sometimes needs help.

Besides the large picture placement, and the manual scroll bars top and bottom,
can it be automated like this code? I isolated it, trying to learn more, seems they have the
coding items for style sheets within their panel not avail. here is one similar to what I want http://dougshrefflerthenextpresident.com/AolPhotoSlideShowA1.html and like the one above mentioned

http://neileverosborne.com/portfolios/blackturtle.html

here is the simple code I have.

after this gets right, I also need the same code to add video in the slideshow type im trying to create, if someone is that great at coding!! both are needed, slideshow is most impt now..video slideshow will be too, thanks

oh, btw, the little// things are for my nots so I can find things, not you pros, I know you all know where this stuff is, they are there so I know where things are...

Code:

<html>
<head>
<style>
#img_container
{
 position:absolute;
 display:media;
 background:#fff;
 }
</style>
<script>
var largeImages = new Array("Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5281.JPG" , "Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5282.JPG", "Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5283.JPG", "Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5284.JPG");
 
// In the show() function, 
// obj is the ID of the div element that contains the large image element,
// obj1 is the small image element,
// obj2 is the ID of the large image element that's in the large image div element.
// img is the position of the large image in the largeImages array.
// left_pos and top_pos are the left and top position adjustments for the large image div element.
 
function show(obj,obj1,obj2,img,left_pos,top_pos)
{
 document.getElementById(obj).style.display="block";
 document.getElementById(obj2).src=largeImages[img];
 var x_coords=findPosX(obj1);
 var y_coords=findPosY(obj1);
 document.getElementById(obj).style.left=x_coords+left_pos;
 document.getElementById(obj).style.top=y_coords+top_pos;
 }
 
function hide(id)
{
 document.getElementById(id).style.display="none";
 }
 
function findPosX(obj)
{
 var curleft = 0;
 if (document.getElementById || document.all)
 {
  while (obj.offsetParent)
  {
   curleft += obj.offsetLeft
   obj = obj.offsetParent;
  }
 }
 else if (document.layers)
  curleft += obj.x;
 return curleft;
}
 
function findPosY(obj)
{
 var curtop = 0;
 if (document.getElementById || document.all)
 {
  while (obj.offsetParent)
  {
   curtop += obj.offsetTop
   obj = obj.offsetParent;
  }
 }
 else if (document.layers)
  curtop += obj.y;
 return curtop;
}
</script>
</head>
<body bgcolor="black">
<table border="10" bordercolor="01fcef"><tr><td><center>
    <table width="700" height="400" border="5" bordercolor="96dcfb"><tr><td>
    </tr></td></table>


<div>
 <img id="img1" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5281.JPG" onmouseover="show('img_container',this,'large_img',0,0,0);">
 <img id="img2" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5282.JPG" onmouseover="show('img_container',this,'large_img',1,0,0);">
 <img id="img3" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5283.JPG" onmouseover="show('img_container',this,'large_img',2,0,0);">
 <img id="img4" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5284.JPG" onmouseover="show('img_container',this,'large_img',3,0,0);">


 <img id="img1" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5285.JPG" onmouseover="show('img_container',this,'large_img',0,0,0);">
 <img id="img2" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5286.JPG" onmouseover="show('img_container',this,'large_img',1,0,0);">
 <img id="img3" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5287.JPG" onmouseover="show('img_container',this,'large_img',2,0,0);">
 <img id="img4" height="100" width="150" src="Sorted/CaBirds/CedarWaxwings9-19-14EdwardsCmarillo/IMGP5288.JPG" onmouseover="show('img_container',this,'large_img',3,0,0);">
</div>
<div id="img_container" onmouseout="hide(this.id);"><img id="large_img" src="" height="400" width="700" valign="top"/></div>

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