Second IMG not swapping

Falconwing13 · Falconwing13

Okay, I already have the layer floating properly that contains the two boxes
and the first box is swapping the pictures properly. However, for some reason,
the second box refuses to swap pictures.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Equipment Catalog-Belts</title>
<link href="//.ItemCatalog" rel="stylesheet" type="text/css" />
<style type="text/css">
.style213 {font-family: "Monotype Corsiva"; font-size: 20px;}
.style214 {color: #FFFFFF}
</style>

<SCRIPT LANGUAGE="JavaScript">
Image1= new Image(75,50)
Image1.src = "/images/FloatBoxStart.jpg"
Image2 = new Image(75,50)
Image2.src = "/images/Belts/Belt of Ogre Strength2.jpg"
Image3 = new Image(75,50)
Image3.src = "/images/Belts/Belt of the Mighty2.jpg"
Image4 = new Image(75,50)
Image4.src = "/images/Belts/Azure Silk Belt2.jpg"
Image5 = new Image(75,50)
Image5.src = "/images/Belts/Supply Runner Belt2.jpg"
Image6 = new Image(75,50)
Image6.src = "/images/Belts/Black Belt2.jpg"
Image7 = new Image(75,50)
Image7.src = "/images/Belts/Glowing Belt2.jpg"
Image8 = new Image(75,50)
Image8.src = "/images/Belts/Mushroom Skinned Belt2.jpg"
Image9 = new Image(75,50)
Image9.src = "/images/Belts/Goldweave Belt2.jpg"
Image10 = new Image(75,50)
Image10.src = "/images/Belts/Small Silk Sash2.jpg"
Image11 = new Image(75,50)
Image11.src = "/images/Belts/Wide Silk Sash2.jpg"

function SwapBack1(){document.InfoBox1.src = Image1.src; return true;}
function ItemInfo1(){document.InfoBox1.src = Image2.src; return true;}
function ItemInfo2(){document.InfoBox1.src = Image3.src; return true;}
function ItemInfo3(){document.InfoBox1.src = Image4.src; return true;}
function ItemInfo4(){document.InfoBox1.src = Image5.src; return true;}
function ItemInfo5(){document.InfoBox1.src = Image6.src; return true;}
function ItemInfo6(){document.InfoBox1.src = Image7.src; return true;}
function ItemInfo7(){document.InfoBox1.src = Image8.src; return true;}
function ItemInfo8(){document.InfoBox1.src = Image9.src; return true;}
function ItemInfo9(){document.InfoBox1.src = Image10.src; return true;}
function ItemInfo10(){document.InfoBox1.src = Image11.src; return true;}

function SwapBack2(){document.InfoBox2.src = Image1.src; return true;}
function ItemInfo1_2(){document.InfoBox2.src = Image2.src; return true;}
function ItemInfo2_2(){document.InfoBox2.src = Image3.src; return true;}
function ItemInfo3_2(){document.InfoBox2.src = Image4.src; return true;}
function ItemInfo4_2(){document.InfoBox2.src = Image5.src; return true;}
function ItemInfo5_2(){document.InfoBox2.src = Image6.src; return true;}
function ItemInfo6_2(){document.InfoBox2.src = Image7.src; return true;}
function ItemInfo7_2(){document.InfoBox2.src = Image8.src; return true;}
function ItemInfo8_2(){document.InfoBox2.src = Image9.src; return true;}
function ItemInfo9_2(){document.InfoBox2.src = Image10.src; return true;}
function ItemInfo10_2(){document.InfoBox2.src = Image11.src; return true;}
</SCRIPT>
</head>

<body background="/images/Background.jpg">
<div id="InfoBoxLayer" STYLE="position:absolute; visibility:visible; left:
660px; width: 220px; height: 340px; top: 230;">
<IMG id="InfoBox1" name="InfoBox1" src="/images/FloatBoxStart.jpg"
width=260 height=150 border="2" onClick="SwapBack1()">

<IMG id="InfoBox2" name="InfoBox2" src="/images/FloatBoxStart.jpg"
width=260 height=150 border="2" onClick="SwapBack2()">
</div>

<script language="JavaScript" type="text/javascript">
var Layer1='<layer id="InfoBoxLayer" src="/images/FloatBoxStart.jpg"
width="260px" height="150px" scrolling="no" style="position: absolute; left:
-500px; top: -500px;">'
var left="660px"
var top="230px"

var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement :
document.body

if (ie)
document.write(Layer1)

function positionit(){obj=document.getElementById("InfoBoxL ayer")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var width=obj.width
height=obj.height
obj.style.left=(left=="right")? window_width-width-20 : left
setInterval("repositionit()", 300)}

function repositionit(){if (ie){dsoctop=ie? iebody.scrollTop : pageYOffset
obj.style.top=(top=="bottom")? window_height-height-14+dsoctop :
parseInt(top)+dsoctop}}

if (window.attachEvent)
window.attachEvent("onload", positionit)
</script>

<a href="/index.html"><img src="/images/AE%20HQ%20Title%20Banner.png" alt="Go
Back to the Main Portal" name="TitleBanner" width="641" height="73" border="0"
id="TitleBanner" /></a>
<table width="640" border="2" cellpadding="1" cellspacing="1" id="ItemList">
<tr><th colspan="9" scope="col"><center class="style213">EQUIPMENT CATALOG - Ashen Empires </center></th></tr>
<tr>
<th width="200" scope="col">Belts</th>
<th width="80" scope="col">Crafted</th>
<th width="150" scope="col">DEV
& GM Only </th>
<th width="80" scope="col">Drop</th>
<th width="100" scope="col">Quest
Item </th>
</tr>
<tr>
<th scope="col">Belt of Ogre Strength</th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img src="/images/Belts/Belt of Ogre Strength1.jpg"
onClick="ItemInfo1()" onmouseover="ItemInfo1_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Belt of the Mighty </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image2" src="/images/Belts/Belt of the
Mighty1.jpg" onClick="ItemInfo2()" onmouseover="ItemInfo2_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Azure Silk Belt </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image3" src="/images/Belts/Azure Silk Belt1.jpg"
onClick="ItemInfo3()" ondblclick="ItemInfo3_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Supply Runner Belt </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image4" src="/images/Belts/Supply Runner
Belt1.jpg" onClick="ItemInfo4()" ondblclick="ItemInfo4_2"/></th>
</tr>
<tr>
<th scope="col">Black Belt </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image5" src="/images/Belts/Black Belt1.jpg"
onClick="ItemInfo5()" ondblclick="ItemInfo5_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Glowing Belt </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image6" src="/images/Belts/Glowing Belt1.jpg"
onClick="ItemInfo6()" ondblclick="ItemInfo6_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Mushroom Skinned Belt </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image7" src="/images/Belts/Mushroom Skinned
Belt1.jpg" onClick="ItemInfo7()" ondblclick="ItemInfo7_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Goldweave Belt </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image8" src="/images/Belts/Goldweave Belt1.jpg"
onClick="ItemInfo8()" ondblclick="ItemInfo8_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Small Silk Sash </th>
<th scope="col"><img id="image9" src="/images/Belts/Small Silk Sash1.jpg"
onClick="ItemInfo9()" ondblclick="ItemInfo9_2"/></th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Wide Silk Sash </th>
<th scope="col"><img id="image10" src="/images/Belts/Wide Silk Sash1.jpg"
onClick="ItemInfo10()" ondblclick="ItemInfo10_2"/></th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="

Falconwing13 · Falconwing13

Any ideas on how to resolve this issue?

Falconwing13 · Falconwing13

Alright, I found something intriguing about how the code is working. When I
change the second image's event commands to the following:

<tr>
<th scope="col">Belt of Ogre Strength</th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img src="/images/Belts/Belt of Ogre Strength1.jpg"
onClick="ItemInfo1()" onmouseover="ItemInfo1_2"/></th>
<th scope="col">X</th>
</tr>
<tr>
<th scope="col">Belt of the Mighty </th>
<th scope="col">X</th>
<th scope="col">X</th>
<th scope="col"><img id="image2" src="/images/Belts/Belt of the Mighty1.jpg"
onClick="ItemInfo2_1()" onmouseover="ItemInfo2_2"/></th>
<th scope="col">X</th>
</tr>

I am able to make the second image put it's information picture into the
second box with the onClick event and the first image is able to put its
information picture into the first box using the onClick event.

So it appears that for some reason, the second event command is not being
allowed to work.

Any suggestions on how to fix this?

Falconwing13 · Falconwing13

Okay, finally found the problem (and a silly one at that!). I was missing the parens on the second function calls. Problem fixed by myself :D

Second IMG not swapping

Thread Tools

Display

Second IMG not swapping

Similar Questions and Discussions

need help with image swapping.

swapping images

image swapping in php

Swapping images?

swapping swf

Re: Second IMG not swapping

Re: Second IMG not swapping

Re: Second IMG not swapping

Posting Permissions