Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need Help debugging my rollover script.

Status
Not open for further replies.
ID10T16

ID10T16

Technical User
Sep 22, 2000
160
US
This is my code.

<html>
<head>
<style><!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:10px;
height:200px;
width:200px;
top:50px;
border:0;
background-color:white;
font:bold 12px Verdana;}
--></style>
<script><!--
var g_images = new Array();
g_images[0] = new Image();
g_images[0].src = &quot;News1.gif&quot;;
g_images[1] = new Image();
g_images[1].src = &quot;News2.gif&quot;;
g_images[2] = new Image();
g_images[2].src = &quot;AdminButton1.gif&quot;;
g_images[3] = new Image();
g_images[3].src = &quot;AdminButton2.gif&quot;;
g_images[4] = new Image();
g_images[4].src = &quot;Links1.gif&quot;;
g_images[5] = new Image();
g_images[5].src = &quot;Links2.gif&quot;;
g_images[6] = new Image();
g_images[6].src = &quot;Home1.gif&quot;;
g_images[7] = new Image();
g_images[7].src = &quot;Home2.gif&quot;;
function imgRotate(nIndex){
if ( g_images[0].complete)
document.images[1].src = g_images[nIndex].src;}
function imgRotate2(nIndex){
if ( g_images[2].complete)
document.images[3].src = g_images[nIndex].src;}
function imgRotate3(nIndex){
if ( g_images[4].complete)
document.images[5].src = g_images[nIndex].src;}
function imgRotate4(nIndex){
if ( g_images[6].complete)
document.images[7].src = g_images[nIndex].src;}
//-->
</script>
</head>
<body>
<script language=&quot;JavaScript1.2&quot;>if (document.all)
document.write('<div id=&quot;slidemenubar2&quot; style=&quot;left:-175&quot; border=&quot;5&quot; onMouseover=&quot;pull()&quot; onMouseout=&quot;draw()&quot;>')
</script>
<layer id=&quot;slidemenubar&quot; style=&quot;left:-185&quot; border=&quot;5&quot; onMouseOver=&quot;pull()&quot; onMouseOut=&quot;draw()&quot;>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate(1)&quot; onMouseUp=&quot;javascript:imgRotate(0)&quot;>
<img src=&quot;News1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate2(3)&quot; onMouseUp=&quot;javascript:imgRotate2(2)&quot;>
<img src=&quot;AdminButton1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate3(5)&quot; onMouseUp=&quot;javascript:imgRotate3(4)&quot;>
<img src=&quot;Links1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate4(7)&quot; onMouseUp=&quot;javascript:imgRotate4(6)&quot;>
<img src=&quot;Home1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a></layer>
<script language=&quot;JavaScript1.2&quot;>function regenerate2(){
if (document.layers)
setTimeout(&quot;window.onresize=regenerate&quot;,400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-175
}
else{
themenu=document.layers.slidemenubar
rightboundary=170
leftboundary=10
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval(&quot;pullengine()&quot;,50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval(&quot;drawengine()&quot;,30)
}
function pullengine(){
if (document.all&amp;&amp;themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=25
else if(document.layers&amp;&amp;themenu.left<rightboundary)
themenu.left+=25
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&amp;&amp;themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&amp;&amp;themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>
</body>
</html>





Now, here is my problem. When someone clicks on the graphical link, the imgRotate function is initiated. The problem is that the function rotates the image for the graphical link sitting under the one clicked. I'm still learning good/bad habits in javascript, so my script is sloppy. There is probably a way to use one function to call each of the images at the time needed. Any insight anyone can give is greatly apprectiated. I hope someone out there can help me.
 
Sort by date Sort by votes
function imgRotate(nIndex){
if ( g_images[0].complete)
document.images[0].src = g_images[nIndex].src;}
function imgRotate2(nIndex){
if ( g_images[2].complete)
document.images[1].src = g_images[nIndex].src;}
function imgRotate3(nIndex){
if ( g_images[4].complete)
document.images[2].src = g_images[nIndex].src;}
function imgRotate4(nIndex){
if ( g_images[6].complete)
document.images[3].src = g_images[nIndex].src;}


this should fix it. adam@aauser.com
 
Upvote 0 Downvote
Ok, that worked, for a little while. I impletened the above script into the main page it was meant for. Here is the code for it.

<html>
<head>
<title>Hardin-Jefferson ISD</title>
<style><!--
#HJ Logo{
position:absolute;
left:10px;
height:250px;
width:320px;
top:50px;
border:0;
font:bold 12px Verdana;}
--></style>
<style><!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:10px;
height:200px;
width:200px;
top:220px;
border:0;
background-color:white;
font:bold 12px Verdana;}
--></style>
<script><!--
var g_images = new Array();
g_images[0] = new Image();
g_images[0].src = &quot;News1.gif&quot;;
g_images[1] = new Image();
g_images[1].src = &quot;News2.gif&quot;;
g_images[2] = new Image();
g_images[2].src = &quot;AdminButton1.gif&quot;;
g_images[3] = new Image();
g_images[3].src = &quot;AdminButton2.gif&quot;;
g_images[4] = new Image();
g_images[4].src = &quot;Links1.gif&quot;;
g_images[5] = new Image();
g_images[5].src = &quot;Links2.gif&quot;;
g_images[6] = new Image();
g_images[6].src = &quot;Home1.gif&quot;;
g_images[7] = new Image();
g_images[7].src = &quot;Home2.gif&quot;;
function imgRotate(nIndex){
if ( g_images[0].complete)
document.images[0].src = g_images[nIndex].src;}
function imgRotate2(nIndex){
if ( g_images[2].complete)
document.images[1].src = g_images[nIndex].src;}
function imgRotate3(nIndex){
if ( g_images[4].complete)
document.images[2].src = g_images[nIndex].src;}
function imgRotate4(nIndex){
if ( g_images[6].complete)
document.images[3].src = g_images[nIndex].src;}

//-->
</script>
</head>
<body>
<div align=&quot;center&quot; id=&quot;HJ Logo&quot; style=&quot;position: absolute; left: 225px; width: 100; x-index: 1&quot;><img src=&quot;HJ.gif&quot; width=&quot;200&quot; height=&quot;280&quot; border=&quot;0&quot;></div>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;left&quot;>
<tr align=&quot;left&quot; valign=&quot;bottom&quot;><td width=&quot;20%&quot; height=&quot;200&quot;><img src=&quot;TL100X200.gif&quot; width=&quot;100&quot; height=&quot;200&quot; border=&quot;0&quot; alt=&quot;&quot;></td>
<td width=&quot;80%&quot; height=&quot;200&quot;><img src=&quot;TR500X200.gif&quot; width=&quot;500&quot; height=&quot;200&quot; border=&quot;0&quot; alt=&quot;&quot;></td></tr>
<tr align=&quot;left&quot; valign=&quot;top&quot;><td width=&quot;100&quot; height=&quot;100&quot; valign=&quot;top&quot;><img src=&quot;ML100X100.gif&quot; width=&quot;100&quot; height=&quot;100&quot; border=&quot;0&quot; alt=&quot;&quot;></td>
<td width=&quot;500&quot; height=&quot;100&quot; rowspan=&quot;3&quot; valign=&quot;top&quot;><center>This is the main page</center></td></tr>
<tr align=&quot;left&quot; valign=&quot;top&quot;><td width=&quot;100&quot; height=&quot;200&quot; background=&quot;LSpace.gif&quot;></td>
<td width=&quot;500&quot; height=&quot;200&quot; rowspan=&quot;3&quot;></td></tr>
<tr align=&quot;left&quot; valign=&quot;top&quot;><td width=&quot;100&quot; height=&quot;50&quot;><img src=&quot;BL100X150.gif&quot; width=&quot;100&quot; height=&quot;50&quot; border=&quot;0&quot; alt=&quot;&quot;></td>
<td width=&quot;500&quot; height=&quot;50&quot; valign=&quot;bottom&quot;></td></tr>
</table>
<script language=&quot;JavaScript1.2&quot;>if (document.all)
document.write('<div id=&quot;slidemenubar2&quot; style=&quot;left:-175&quot; onMouseover=&quot;pull()&quot; onMouseout=&quot;draw()&quot;>')
</script>
<layer id=&quot;slidemenubar&quot; style=&quot;left:-185&quot; onMouseOver=&quot;pull()&quot; onMouseOut=&quot;draw()&quot;>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate(1)&quot; onMouseUp=&quot;javascript:imgRotate(0)&quot;>
<img src=&quot;News1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate2(3)&quot; onMouseUp=&quot;javascript:imgRotate2(2)&quot;>
<img src=&quot;AdminButton1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate3(5)&quot; onMouseUp=&quot;javascript:imgRotate3(4)&quot;>
<img src=&quot;Links1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a>
<a href=&quot;#&quot; onMouseDown=&quot;javascript:imgRotate4(7)&quot; onMouseUp=&quot;javascript:imgRotate4(6)&quot;>
<img src=&quot;Home1.gif&quot; height=&quot;50&quot; width=&quot;200&quot;></a></layer>
<script language=&quot;JavaScript1.2&quot;>function regenerate2(){
if (document.layers)
setTimeout(&quot;window.onresize=regenerate&quot;,400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-175
}
else{
themenu=document.layers.slidemenubar
rightboundary=170
leftboundary=10
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval(&quot;pullengine()&quot;,50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval(&quot;drawengine()&quot;,30)
}
function pullengine(){
if (document.all&amp;&amp;themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=25
else if(document.layers&amp;&amp;themenu.left<rightboundary)
themenu.left+=25
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&amp;&amp;themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&amp;&amp;themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>
</body>
</html>


Here's my new problem. When you click a link, it changes another image on the page other than itself. The News button changes the HJ Logo layer image, the Administrator button changes the Top Right table image, etc. It's actually kinda funny. I do however need this to be fixed. I'll scour the code as best I can, but hopefully someone can pinpoint my problem, cause I'll have quite a time trying to find this one.
 
Upvote 0 Downvote
function imgRotate(nIndex){
if ( g_images[0].complete)
document.images[5].src = g_images[nIndex].src;}
function imgRotate2(nIndex){
if ( g_images[2].complete)
document.images[6].src = g_images[nIndex].src;}
function imgRotate3(nIndex){
if ( g_images[4].complete)
document.images[7].src = g_images[nIndex].src;}
function imgRotate4(nIndex){
if ( g_images[6].complete)
document.images[8].src = g_images[nIndex].src;}

adam@aauser.com
 
Upvote 0 Downvote
function imgRotate(nIndex, obj){
if ( g_images[0].complete)
obj.src = g_images[nIndex].src;}
function imgRotate2(nIndex, obj){
if ( g_images[2].complete)
obj.src = g_images[nIndex].src;}
function imgRotate3(nIndex, obj){
if ( g_images[4].complete)
obj.src = g_images[nIndex].src;}
function imgRotate4(nIndex, obj){
if ( g_images[6].complete)
obj.src = g_images[nIndex].src;}

then call the functions as so, inside the img tag:


onMouseDown=&quot;javascript:imgRotate(1, this)&quot; onMouseUp=&quot;javascript:imgRotate(0, this)


either try that or just name your images, because its such a pain to count them.

adam@aauser.com
 
Upvote 0 Downvote
I implemented the code you have right above here. It keeps the rollovers from messing w/ the other images, although no rollover takes place at all. Any idea what can prohibit that?
 
Upvote 0 Downvote
umm... it should work in ie, but, i'm not sure about netscape. i'm not sure if netscape recognizes onmousedown and on mouseup on imgages... if i were you i would put back your old code, and give the images names... then call them like document.images[&quot;name&quot;].src

adam@aauser.com
 
Upvote 0 Downvote
I left it the same &amp; replaced &quot;this&quot; w/ the name of the image &amp; it works in both IE &amp; NS. Now I just got a few NS bus to work out. The dynamic layer in NS starts of way on the side of the page, really odd, but nothing that I can't work out. Thank you so much for you help. The page will be posted at I should have it posted by the end of today. Tell me what you think.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
394
JScannell
JScannell
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
845
MDGarcia
MDGarcia
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
171
feherke
feherke
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
171
Smurfmania
Smurfmania
JPSeo
  • Locked
  • Question
How to pass var to the shell script
Replies
1
Views
125
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top