Problem with a multiple affect mouseover script

[A__jay]

Well, I recently found this awesome script, that I wanted:

Plcae this part inside your head tags change your image source in this part. (including width and height)
==============================================================

<script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers

window.onerror = null;

var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code


if (netscape || goodIE) {

pic1 = new Image(150,100);
pic1.src = "default.gif";
pic2 = new Image(150,100);
pic2.src = "firstswap.gif";
pic3 = new Image(150,100);
pic3.src = "secondswap.gif";

a1 = new Image(100,50);
a1.src = "upbutton1.gif";
a2 = new Image(100,50);
a2.src = "downbutton1.gif";
b1 = new Image(100,50);
b1.src = "upbutton2.gif";
b2 = new Image(100,50);
b2.src = "downbutton2.gif";
}

function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");

}}

//end hiding -->
</script>

====================================================
place these parts where you want your images to show
=====================================================
big image
----------------------------------------
<img SRC="default.gif" NAME="pic" ALT="Default Image" height=100 width=150>
----------------------------------------
buttons
----------------------------------------
<a href="your-page.html" onMouseOver="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;" onMouseOut="hiLite('pic','pic1','a','a1'); window.status='';return true;" onclick="window.focus()"><img SRC="upbutton1.gif" NAME="a" ALT="Button 1" BORDER=0 height=50 width=100></a>
<a href="your-page.html" onMouseOver="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;" onMouseOut="hiLite('pic','pic1','b','b1'); window.status='';return true;" onclick="window.focus()"><img SRC="upbutton2.gif" NAME="b" ALT="Button 2" BORDER=0 height=50 width=100></a>

so, anyways, the code works fine, but what my problem is this: I want to position the buttons, have them somewehre else, I have tried a number of things, but im not a god in javascript...yet ;) Anyways I tired using CSS into it, didnt work :P

So i was wondering, can someone give the the string of code that will allow me to postion the buttons anywhere i want them :D

I would be willing to pay you back, with some form of graphics:

examples of my work:
http://i3.photobucket.com/albums/y77/ajissad/gubanner.jpg
http://i3.photobucket.com/albums/y77/ajissad/bannerv2.jpg
http://i3.photobucket.com/albums/y77/ajissad/banner.jpg

so yeah :)


-A_jay'' <3333

[videotoys]

so whats it doing? changing an image on rollover? I didnt have to many problems positioning my rollover script Ill give you an example of what mine looks like:

javascript in head or external, your choice:

<script>
function changeImage(image,newImage)
{
document.getElementById(image).src= newImage;
}
</script>

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img5 = new Image();
img6 = new Image();
img7 = new Image();
img8 = new Image();
img9 = new Image();

img1.src = "about.jpg";
img2.src = "custom.jpg"
img3.src = "free.jpg"
img4.src = "lapel.jpg"
img5.src = "off.jpg"
img6.src = "order.jpg"
img7.src = "small.jpg"
img8.src = "wall.jpg"
img9.src = "show.jpg"
}
</SCRIPT>

body scripts:

<a href="free.html" onmouseover="changeImage('image2','free.jpg')" id="image1" onmouseout="changeImage('image2','off.jpg')" id="image1">Freestanding- 1000 Series</a>
<br />
<br />
<a href="small.html" onmouseover="changeImage('image2','small.jpg')" id="image1" onmouseout="changeImage('image2','off.jpg')" id="image1">Small Desktop - 2000 Series</a>


and the last image that is the one that gets changed on mouse over is this one:

<div align="center" style="position:absolute; top:10; left:250;">
<img src="ani.gif" width="225" height="50"><br>
<img src="off.jpg" id="image2" width="225" height="300">
</div>


I didnt have any problems with positioning maybe you typed something in wrong or your trying to position an element within a element thats already being positioned, sometimes you gotta watch out for that because it may not give you the desired results. well good luck.

[videotoys]

oh for an example of what that script looks like you can visit the site I made a few years ago that I referenced:

http://www.haertling.com/ youll see on the main page that when you rollover the links the main image changes out with a different one.