PDA

View Full Version : Double mouseover script problem

A__jay
03-09-2006, 09:59 PM
well, i got this awesome script from a1scripts.com. It was this script that lets me do mouseover buttons that will change on mouseover, and will aslo affect another image, somewhere else, and it worked fine. But the script came with only two buttons, and I needed more, so i went ahead and copy and pasted some parts, edited it a bit, ran into a lot of problems, solved them all, except this one:

The two buttons at the bottom, whenever i mouseover them, they dont change, but the two above them do, also, the seperate image. I know its a bit confusing, so heres a link to the code in action:
http://www.freewebs.com/ajay91/index.htm

here is the code:
<html>
<head>
<script language="javascript">

<!-- 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(200,200);
pic1.src = "http://i44.photobucket.com/albums/f32/A__jay/topandbottomtest.jpg";
pic2 = new Image(200,200);
pic2.src = "http://i44.photobucket.com/albums/f32/A__jay/middleareatest.jpg";
pic3 = new Image(200,200);
pic3.src = "http://i44.photobucket.com/albums/f32/A__jay/Ajays-Sample-Sites--Begi-07.gif";


pic4 = new Image(200,200);
pic4.src = "http://i3.photobucket.com/albums/y77/ajissad/topper500x900.jpg";
pic5 = new Image(200,200);
pic5.src = "http://i3.photobucket.com/albums/y77/ajissad/guides4.jpg";

a1 = new Image();
a1.src = "http://i44.photobucket.com/albums/f32/A__jay/HOME.jpg";
a2 = new Image();
a2.src = "http://i44.photobucket.com/albums/f32/A__jay/HOMEMO.jpg";
b1 = new Image();
b1.src = "http://i44.photobucket.com/albums/f32/A__jay/generalinfo.jpg";
b2 = new Image();
b2.src = "http://i44.photobucket.com/albums/f32/A__jay/generalinfoMO.jpg"

c1 = new Image();
c1.src = "http://i44.photobucket.com/albums/f32/A__jay/pc.jpg";
c2= new Image();
c2.src = "http://i44.photobucket.com/albums/f32/A__jay/pcMO.jpg";
d1 = new Image();
d1.src = "http://i44.photobucket.com/albums/f32/A__jay/admin.jpg";
d2 = new Image();
d2.src = "http://i44.photobucket.com/albums/f32/A__jay/adminMO.jpg";

}

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>


<img SRC="http://i3.photobucket.com/albums/y77/ajissad/SCREEnies.gif" NAME="pic" ALT="Default Image" height=200 width=200>

<div align="center" style="position:absolute; top:208; left:8;">


<a href="" 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="http://i44.photobucket.com/albums/f32/A__jay/HOME.jpg" NAME="a" ALT="Button 1" BORDER=1 height= width=></a><br>

<a href="" 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="http://i44.photobucket.com/albums/f32/A__jay/generalinfo.jpg" NAME="b" ALT="Button 2" BORDER=1 height= width=></a><br>

<a href="" onMouseOver="hiLite('pic','pic2','a','a2'); window.status='Button 3';return true;" onMouseOut="hiLite('pic','pic1','c','c1'); window.status='';return true;" onclick="window.focus()"><img SRC="http://i44.photobucket.com/albums/f32/A__jay/pc.jpg" NAME="a" ALT="Button 1" BORDER=1 height= width=></a><br>

<a href="" onMouseOver="hiLite('pic','pic3','b','b2'); window.status='Button 4';return true;" onMouseOut="hiLite('pic','pic1','d','d1'); window.status='';return true;" onclick="window.focus()"><img SRC="http://i44.photobucket.com/albums/f32/A__jay/admin.jpg" NAME="b" ALT="Button 2" BORDER=1 height= width=></a>

</div>




so like, i know some of the solution, actually; info that will help you help me;D):
in all these parts, i tried to fix it, and it just got messed up xD
well, i copied this part a few times, so the problem might be here, specfically in the "'pic','pic3','b','b2')" part

<a href="" onMouseOver="hiLite('pic','pic3','b','b2'); window.status='Button 4';return true;" onMouseOut="hiLite('pic','pic1','d','d1'); window.status='';return true;" onclick="window.focus()"><img SRC="http://i44.photobucket.com/albums/f32/A__jay/admin.jpg" NAME="b" ALT="Button 2" BORDER=1 height= width=></a>


it might be in this area
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
or soemwhere here, but i doubt it:

c1 = new Image();
c1.src = "http://i44.photobucket.com/albums/f32/A__jay/pc.jpg";
c2= new Image();
c2.src = "http://i44.photobucket.com/albums/f32/A__jay/pcMO.jpg";
d1 = new Image();
d1.src = "http://i44.photobucket.com/albums/f32/A__jay/admin.jpg";
d2 = new Image();
d2.src = "http://i44.photobucket.com/albums/f32/A__jay/adminMO.jpg";

any, and all help will be very much apprecitiated :D
and if u want payment back, ill make graphics for you:
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

thanks alot :D
-ajayyy <33333
coothead
03-10-2006, 05:17 AM
Hi there A__jay,

try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://i44.photobucket.com/albums/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#image_container {
text-align:center;
}
#button_container {
line-height:0;
font-size:0;
position:absolute;
top:10px;
left:10px;
width:152px;
}
#pic {
width:200px;
height:200px;
border:3px double #000;
}
#a,#b,#c,#d {
width:150px;
height:75px;
border:1px solid #000;
}
-->
</style>

<script type="text/javascript">
<!--
var pic=new Array();
pic[0]='f32/A__jay/topandbottomtest.jpg';
pic[1]='f32/A__jay/middleareatest.jpg';
pic[2]='f32/A__jay/Ajays-Sample-Sites--Begi-07.gif';
pic[3]='y77/ajissad/topper500x900.jpg';
pic[4]='y77/ajissad/guides4.jpg';
pic[5]='f32/A__jay/HOME.jpg';
pic[6]='f32/A__jay/HOMEMO.jpg';
pic[7]='f32/A__jay/generalinfo.jpg';
pic[8]='f32/A__jay/generalinfoMO.jpg';
pic[9]='f32/A__jay/pc.jpg';
pic[10]='f32/A__jay/pcMO.jpg';
pic[11]='f32/A__jay/admin.jpg';
pic[12]='f32/A__jay/adminMO.jpg';

function hiLite(id,num,id1,num1) {
document.getElementById(id).src=preloads[num].src;
document.getElementById(id1).src=preloads[num1].src;
}
var preloads=[];

function preload(){
for(i=0;i<arguments.length;i++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[i];
}
}
preload(pic[0],pic[1],pic[2],pic[3],pic[4],pic[5],pic[6],pic[7],pic[8],pic[9],pic[10],pic[11],pic[12]);
// -->
</script>

</head>
<body>

<div id="image_container">
<img id="pic" src="y77/ajissad/SCREEnies.gif" alt="Default Image"/>
</div>

<div id="button_container">
<a href="#" onmouseover="hiLite('pic',0,'a',6)" onmouseout="hiLite('pic',1,'a',5)">
<img id="a" src="f32/A__jay/HOME.jpg" alt="Button 1"/></a>
<a href="#" onmouseover="hiLite('pic',2,'b',8)" onmouseout="hiLite('pic',1,'b',7)">
<img id="b" src="f32/A__jay/generalinfo.jpg" alt="Button 2"/></a>
<a href="#" onmouseover="hiLite('pic',3,'c',10)" onmouseout="hiLite('pic',1,'c',9)">
<img id="c" src="f32/A__jay/pc.jpg" alt="Button 1"/></a>
<a href="#" onmouseover="hiLite('pic',4,'d',12)" onmouseout="hiLite('pic',1,'d',11)">
<img id="d" src="f32/A__jay/admin.jpg" alt="Button 2"/></a>
</div>

</body>
</html>

...I have added a preload function to smooth out the mouseovers. :loopy:
A__jay
03-10-2006, 06:12 PM
oh my damn:D
thanks so much<33333

so, do you want me to do soemthing for you?