0

Hi guys

I have created some custom code and implemented it into a article within Joomla. (The HTML editor is turned off)

The code works in all browsers except Internet Explorer Versions. The custom code has Javascript and the "onMouseOver".

The purpose of it is to change a image when your cursor is placed over a link. Ive included the code below

Anyone know the fix?

<style type="text/css">
<!--

.addimg {
width:110px;
height:110px;
display:none;
}
.srvList{
width: 200px;
float:left;
}
.addList {
width: 150px;
float:left;
margin-left:0.5em;
}

li {
text-decoration: none;
list-style:none
}

h2 {
padding-left:1em;
}

-->
</style>

<table border="0" cellpadding="0" width="100%">
<tr>
<td colspan="2" valign="top"><h1>Computer Services</h1></td>
<td>
</tr>
<tr>
<td valign="top">
<h2>I want to setup my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showPCService('pc_1')">PC</a></li>
<li><a href="#" onMouseOver="showPCService('pc_2')">Laptop</a></li>
<li><a href="#" onMouseOver="showPCService('pc_3')">Netbook</a></li>
<li><a href="#" onMouseOver="showPCService('pc_4')">Wireless Router</a></li>
<li><a href="#" onMouseOver="showPCService('pc_5')">Printer</a></li>
<li><a href="#" onMouseOver="showPCService('pc_6')">Scanner</a></li>
<li><a href="#" onMouseOver="showPCService('pc_7')">Portable Hard-drive</a></li>
</ul>
</div>

<div class="addList">
<div class="addimg" id="pc_1" style="display:block"><img src="/images/stories/sas/1.gif" width="" height=""></div>
<div class="addimg" id="pc_2"><img src="/images/stories/sas/25.gif" width="" height=""></div>
<div class="addimg" id="pc_3"><img src="/images/stories/sas/3.gif" width="" height=""></div>
<div class="addimg" id="pc_4"><img src="/images/stories/sas/10.gif" width="" height=""></div>
<div class="addimg" id="pc_5"><img src="/images/stories/sas/38.gif" width="" height=""></div>
<div class="addimg" id="pc_6"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
<div class="addimg" id="pc_7"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
</div>
</td>
<td valign="top">
<h2>Repair &amp; maintain my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showPC2Service('pc2_1')">Computer, its Running Slow</a></li>
<li><a href="#" onMouseOver="showPC2Service('pc2_2')">PC, It Has A Virus</a></li>
<li><a href="#" onMouseOver="showPC2Service('pc2_3')">PC, It Has Spyware</a></li>
<li><a href="#" onMouseOver="showPC2Service('pc2_4')">Laptop, It Has A Problem</a></li>
</ul>
</div>

<div class="addList">
<div class="addimg" id="pc2_1" style="display:block"><img src="/images/stories/sas/21.gif" width="" height=""></div>
<div class="addimg" id="pc2_2"><img src="/images/stories/sas/73.gif" width="" height=""></div>
<div class="addimg" id="pc2_3"><img src="/images/stories/sas/16.gif" width="" height=""></div>
<div class="addimg" id="pc2_4"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
</div>

<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top"><h2>Upgrade or install my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showPC3Service('pc3_1')">PC or Laptop</a></li>
<li><a href="#" onMouseOver="showPC3Service('pc3_2')">My Software</a></li>
<li><a href="#" onMouseOver="showPC3Service('pc3_3')">Windows Operating System</a></li>
<li><a href="#" onMouseOver="showPC3Service('pc3_4')">MAC Operating System</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg" id="pc3_1" style="display:block"><img src="/images/stories/sas/19.gif" width="" height=""></div>
<div class="addimg" id="pc3_2"><img src="/images/stories/sas/20.gif" width="" height=""></div>
<div class="addimg" id="pc3_3"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
<div class="addimg" id="pc3_4"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
</div></td>
<td valign="top"><h2>I need some support over the...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showPC4Service('pc4_1')">Internet, Remotely To My PC</a></li>
<li><a href="#" onMouseOver="showPC4Service('pc4_2')">Phone, From A Uk Call Centre</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg" id="pc4_1" style="display:block"><img src="/images/stories/sas/17.gif" width="" height=""></div>
<div class="addimg" id="pc4_2"><img src="/images/stories/sas/39.gif" width="" height=""></div>
</div>
<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td>
</tr>
<tr>
<td valign="top"><h1>Website Services</h1></td>
<td valign="top"><h1>Business Services</h1></td>
<td>
</tr>
<tr>
<td valign="top"><h2>Im looking for...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showWSService('ws_1')">My Own Internet Address</a></li>
<li><a href="#" onMouseOver="showWSService('ws_2')">My Own Website</a></li>
<li><a href="#" onMouseOver="showWSService('ws_3')">A Personal Email Address</a></li>
<li><a href="#" onMouseOver="showWSService('ws_4')">Hosting For My Website</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg" id="ws_1" style="display:block"><img src="/images/stories/sas/57.gif" width="" height=""></div>
<div class="addimg" id="ws_2"><img src="/images/stories/sas/70.gif" width="" height=""></div>
<div class="addimg" id="ws_3"><img src="/images/stories/sas/59.gif" width="" height=""></div>
<div class="addimg" id="ws_4"><img src="/images/stories/sas/11.gif" width="" height=""></div>
</div></td>
<td valign="top"><h2>Im looking for...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showBusService('bus_1')">PAYG Support</a></li>
<li><a href="#" onMouseOver="showBusService('bus_2')">Managed IT Support</a></li>
<li><a href="#" onMouseOver="showBusService('bus_3')">Telephone Solutions</a></li>
<li><a href="#" onMouseOver="showBusService('bus_4')">A Company Website</a></li>
<li><a href="#" onMouseOver="showBusService('bus_5')">Office Solutions</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg" id="bus_1" style="display:block"><img src="/images/stories/sas/31.gif" width="" height=""></div>
<div class="addimg" id="bus_2"><img src="/images/stories/sas/18.gif" width="" height=""></div>
<div class="addimg" id="bus_3"><img src="/images/stories/sas/35.gif" width="" height=""></div>
<div class="addimg" id="bus_4"><img src="/images/stories/sas/66.gif" width="" height=""></div>
<div class="addimg" id="bus_5"><img src="/images/stories/sas/72.gif" width="" height=""></div>
</div>
<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td>
</tr>
<tr>
<td valign="top"><h1>Digital Services </h1></td>
<td valign="top"><h1>Boxed Solutions</h1></td>
<td> <h1>&nbsp;</h1>
</tr>
<tr>
<td valign="top"><h2>I want to setup my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showDSService('ds_1')">Television</a></li>
<li><a href="#" onMouseOver="showDSService('ds_2')">Game Console</a></li>
<li><a href="#" onMouseOver="showDSService('ds_3')">DVD/Blu-Ray</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg" id="ds_1" style="display:block"><img src="/images/stories/sas/54.gif" width="" height=""></div>
<div class="addimg" id="ds_2"><img src="/images/stories/sas/37.gif" width="" height=""></div>
<div class="addimg" id="ds_3"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
</div></td>
<td valign="top"><h2>I want to save money by buying...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showBSService('bs_1')">Office In A Box</a></li>
<li><a href="#" onMouseOver="showBSService('bs_2')">Site In A Box</a></li>
<li><a href="#" onMouseOver="showBSService('bs_3')">Comms In A Box</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg" id="bs_1" style="display:block"><img src="/images/stories/sas/13.gif" width="" height=""></div>
<div class="addimg" id="bs_2"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
<div class="addimg" id="bs_3"><img src="/images/stories/sas/ai.gif" width="" height=""></div>
</div>
<td>
</tr>
</table>
<script type="text/javascript">
function showPCService(advert) { //v9.0
document.getElementById('pc_1').style.display = 'none';
document.getElementById('pc_2').style.display = 'none';
document.getElementById('pc_3').style.display = 'none';
document.getElementById('pc_4').style.display = 'none';
document.getElementById('pc_5').style.display = 'none';
document.getElementById('pc_6').style.display = 'none';
document.getElementById('pc_7').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};


function showPC2Service(advert) { //v9.0
document.getElementById('pc2_1').style.display = 'none';
document.getElementById('pc2_2').style.display = 'none';
document.getElementById('pc2_3').style.display = 'none';
document.getElementById('pc2_4').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};


function showPC3Service(advert) { //v9.0
document.getElementById('pc3_1').style.display = 'none';
document.getElementById('pc3_2').style.display = 'none';
document.getElementById('pc3_3').style.display = 'none';
document.getElementById('pc3_4').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};


function showPC4Service(advert) { //v9.0
document.getElementById('pc4_1').style.display = 'none';
document.getElementById('pc4_2').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};


function showWSService(advert) { //v9.0
document.getElementById('ws_1').style.display = 'none';
document.getElementById('ws_2').style.display = 'none';
document.getElementById('ws_3').style.display = 'none';
document.getElementById('ws_4').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};

function showBusService(advert) { //v9.0
document.getElementById('bus_1').style.display = 'none';
document.getElementById('bus_2').style.display = 'none';
document.getElementById('bus_3').style.display = 'none';
document.getElementById('bus_4').style.display = 'none';
document.getElementById('bus_5').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};

function showDSService(advert) { //v9.0
document.getElementById('ds_1').style.display = 'none';
document.getElementById('ds_2').style.display = 'none';
document.getElementById('ds_3').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};


function showBSService(advert) { //v9.0
document.getElementById('bs_1').style.display = 'none';
document.getElementById('bs_2').style.display = 'none';
document.getElementById('bs_3').style.display = 'none';
document.getElementById(advert).style.display = 'block';
};

</script>

2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by sa1support
0

sa1,

I'm not sure why it's not working but you can certainly simplify your html and javascript significantly by using image replacement and a single function for all sections, as follows :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.addimg { 
width:110px;
height:110px;
}
.addimg img {
	width: 200px;
	height: 30px;
}
.srvList{
width: 200px;
float:left;
}
.addList {
width: 150px;
float:left;
margin-left:0.5em;
}
li {
text-decoration: none;
list-style:none
}

h2 {
padding-left:1em;
}
</style>

<script type="text/javascript">
function showImage(id, imgName) {
	var pathToImages = '/images/stories/sas/';
	var imgElement = document.getElementById(id);
	if(imgElement) {
		imgElement.src = pathToImages + imgName;
		imgElement.alt = pathToImages + imgName;//for testing purposes
	}
};

</script> 
</head>

<body>
<table border="0" cellpadding="0" width="100%"> 
<tr>
<td colspan="2" valign="top"><h1>Computer Services</h1></td>
<td>
</tr>
<tr>
<td valign="top">
<h2>I want to setup my...</h2>
<div class="srvList">
<ul> 
<li><a href="#" onMouseOver="showImage('pc1', '1.gif')">PC</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '25.gif')">Laptop</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '3.gif')">Netbook</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '10.gif')">Wireless Router</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '38.gif')">Printer</a></li>
<li><a href="#" onMouseOver="showImage('pc1', 'ai.gif')">Scanner</a></li>
<li><a href="#" onMouseOver="showImage('pc1', 'ai.gif')">Portable Hard-drive</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc1" src="/images/stories/sas/1.gif"></div>
</div>
</td>
<td valign="top">
<h2>Repair &amp; maintain my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('pc2', '21.gif')">Computer, its Running Slow</a></li>
<li><a href="#" onMouseOver="showImage('pc2', '73.gif')">PC, It Has A Virus</a></li>
<li><a href="#" onMouseOver="showImage('pc2', '16.gif')">PC, It Has Spyware</a></li>
<li><a href="#" onMouseOver="showImage('pc2', 'ai.gif')">Laptop, It Has A Problem</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc2" src="/images/stories/sas/21.gif"></div>
</div>

<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top"><h2>Upgrade or install my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('pc3', '19.gif')">PC or Laptop</a></li>
<li><a href="#" onMouseOver="showImage('pc3', '20.gif')">My Software</a></li>
<li><a href="#" onMouseOver="showImage('pc3', 'ai.gif')">Windows Operating System</a></li>
<li><a href="#" onMouseOver="showImage('pc3', 'ai.gif')">MAC Operating System</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc3" src="/images/stories/sas/19.gif"></div>
</div></td>
<td valign="top"><h2>I need some support over the...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('pc4', '17.gif')">Internet, Remotely To My PC</a></li>
<li><a href="#" onMouseOver="showImage('pc4', '39.gif')">Phone, From A Uk Call Centre</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc4" src="/images/stories/sas/17.gif"></div>
</div>
<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td> 
</tr>
<tr>
<td valign="top"><h1>Website Services</h1></td>
<td valign="top"><h1>Business Services</h1></td>
<td> 
</tr>
<tr>
<td valign="top"><h2>Im looking for...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('ws', '57.gif')">My Own Internet Address</a></li>
<li><a href="#" onMouseOver="showImage('ws', '70.gif')">My Own Website</a></li>
<li><a href="#" onMouseOver="showImage('ws', '59.gif')">A Personal Email Address</a></li>
<li><a href="#" onMouseOver="showImage('ws', '11.gif')">Hosting For My Website</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="ws" src="/images/stories/sas/57.gif"></div>
</div></td>
<td valign="top"><h2>Im looking for...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('bus', '31.gif')">PAYG Support</a></li>
<li><a href="#" onMouseOver="showImage('bus', '18.gif')">Managed IT Support</a></li>
<li><a href="#" onMouseOver="showImage('bus', '35.gif')">Telephone Solutions</a></li>
<li><a href="#" onMouseOver="showImage('bus', '66.gif')">A Company Website</a></li>
<li><a href="#" onMouseOver="showImage('bus', '72.gif')">Office Solutions</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="bus" src="/images/stories/sas/31.gif"></div>
</div>
<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td> 
</tr>
<tr>
<td valign="top"><h1>Digital Services </h1></td>
<td valign="top"><h1>Boxed Solutions</h1></td>
<td> <h1>&nbsp;</h1> 
</tr>
<tr>
<td valign="top"><h2>I want to setup my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('ds', '54.gif')">Television</a></li>
<li><a href="#" onMouseOver="showImage('ds', '37.gif')">Game Console</a></li>
<li><a href="#" onMouseOver="showImage('ds', 'ai.gif')">DVD/Blu-Ray</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="ds" src="/images/stories/sas/54.gif"></div>
</div></td>
<td valign="top"><h2>I want to save money by buying...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('bs', '13.gif')">Office In A Box</a></li>
<li><a href="#" onMouseOver="showImage('bs', 'ai.gif')">Site In A Box</a></li>
<li><a href="#" onMouseOver="showImage('bs', 'ai.gif')">Comms In A Box</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="bs" src="/images/stories/sas/13.gif"></div>
</div>
<td>
</tr>
</table>

</body>
</html>

NOTE: I styled the images with height and width to make their alt text show.

This may also fix your problem.

Airshow

0

Works Great Thank You

sa1,

I'm not sure why it's not working but you can certainly simplify your html and javascript significantly by using image replacement and a single function for all sections, as follows :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.addimg { 
width:110px;
height:110px;
}
.addimg img {
	width: 200px;
	height: 30px;
}
.srvList{
width: 200px;
float:left;
}
.addList {
width: 150px;
float:left;
margin-left:0.5em;
}
li {
text-decoration: none;
list-style:none
}

h2 {
padding-left:1em;
}
</style>

<script type="text/javascript">
function showImage(id, imgName) {
	var pathToImages = '/images/stories/sas/';
	var imgElement = document.getElementById(id);
	if(imgElement) {
		imgElement.src = pathToImages + imgName;
		imgElement.alt = pathToImages + imgName;//for testing purposes
	}
};

</script> 
</head>

<body>
<table border="0" cellpadding="0" width="100%"> 
<tr>
<td colspan="2" valign="top"><h1>Computer Services</h1></td>
<td>
</tr>
<tr>
<td valign="top">
<h2>I want to setup my...</h2>
<div class="srvList">
<ul> 
<li><a href="#" onMouseOver="showImage('pc1', '1.gif')">PC</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '25.gif')">Laptop</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '3.gif')">Netbook</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '10.gif')">Wireless Router</a></li>
<li><a href="#" onMouseOver="showImage('pc1', '38.gif')">Printer</a></li>
<li><a href="#" onMouseOver="showImage('pc1', 'ai.gif')">Scanner</a></li>
<li><a href="#" onMouseOver="showImage('pc1', 'ai.gif')">Portable Hard-drive</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc1" src="/images/stories/sas/1.gif"></div>
</div>
</td>
<td valign="top">
<h2>Repair &amp; maintain my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('pc2', '21.gif')">Computer, its Running Slow</a></li>
<li><a href="#" onMouseOver="showImage('pc2', '73.gif')">PC, It Has A Virus</a></li>
<li><a href="#" onMouseOver="showImage('pc2', '16.gif')">PC, It Has Spyware</a></li>
<li><a href="#" onMouseOver="showImage('pc2', 'ai.gif')">Laptop, It Has A Problem</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc2" src="/images/stories/sas/21.gif"></div>
</div>

<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top"><h2>Upgrade or install my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('pc3', '19.gif')">PC or Laptop</a></li>
<li><a href="#" onMouseOver="showImage('pc3', '20.gif')">My Software</a></li>
<li><a href="#" onMouseOver="showImage('pc3', 'ai.gif')">Windows Operating System</a></li>
<li><a href="#" onMouseOver="showImage('pc3', 'ai.gif')">MAC Operating System</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc3" src="/images/stories/sas/19.gif"></div>
</div></td>
<td valign="top"><h2>I need some support over the...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('pc4', '17.gif')">Internet, Remotely To My PC</a></li>
<li><a href="#" onMouseOver="showImage('pc4', '39.gif')">Phone, From A Uk Call Centre</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="pc4" src="/images/stories/sas/17.gif"></div>
</div>
<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td> 
</tr>
<tr>
<td valign="top"><h1>Website Services</h1></td>
<td valign="top"><h1>Business Services</h1></td>
<td> 
</tr>
<tr>
<td valign="top"><h2>Im looking for...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('ws', '57.gif')">My Own Internet Address</a></li>
<li><a href="#" onMouseOver="showImage('ws', '70.gif')">My Own Website</a></li>
<li><a href="#" onMouseOver="showImage('ws', '59.gif')">A Personal Email Address</a></li>
<li><a href="#" onMouseOver="showImage('ws', '11.gif')">Hosting For My Website</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="ws" src="/images/stories/sas/57.gif"></div>
</div></td>
<td valign="top"><h2>Im looking for...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('bus', '31.gif')">PAYG Support</a></li>
<li><a href="#" onMouseOver="showImage('bus', '18.gif')">Managed IT Support</a></li>
<li><a href="#" onMouseOver="showImage('bus', '35.gif')">Telephone Solutions</a></li>
<li><a href="#" onMouseOver="showImage('bus', '66.gif')">A Company Website</a></li>
<li><a href="#" onMouseOver="showImage('bus', '72.gif')">Office Solutions</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="bus" src="/images/stories/sas/31.gif"></div>
</div>
<td>
</tr>
</table>
<table border="0" cellpadding="0" width="100%">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td> 
</tr>
<tr>
<td valign="top"><h1>Digital Services </h1></td>
<td valign="top"><h1>Boxed Solutions</h1></td>
<td> <h1>&nbsp;</h1> 
</tr>
<tr>
<td valign="top"><h2>I want to setup my...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('ds', '54.gif')">Television</a></li>
<li><a href="#" onMouseOver="showImage('ds', '37.gif')">Game Console</a></li>
<li><a href="#" onMouseOver="showImage('ds', 'ai.gif')">DVD/Blu-Ray</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="ds" src="/images/stories/sas/54.gif"></div>
</div></td>
<td valign="top"><h2>I want to save money by buying...</h2>
<div class="srvList">
<ul>
<li><a href="#" onMouseOver="showImage('bs', '13.gif')">Office In A Box</a></li>
<li><a href="#" onMouseOver="showImage('bs', 'ai.gif')">Site In A Box</a></li>
<li><a href="#" onMouseOver="showImage('bs', 'ai.gif')">Comms In A Box</a></li>
</ul>
</div>
<div class="addList">
<div class="addimg"><img id="bs" src="/images/stories/sas/13.gif"></div>
</div>
<td>
</tr>
</table>

</body>
</html>

NOTE: I styled the images with height and width to make their alt text show.

This may also fix your problem.

Airshow

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.