on MouseOver & document.getElementById IE Compatibility

Question

sa1support 0 Newbie Poster

14 Years Ago

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?

.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 & 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>

<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"> </td>
<td valign="top"> </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"> </td>
<td valign="top"> </td>
<td>
</tr>
<tr>
<td valign="top"><h1>Digital Services </h1></td>
<td valign="top"><h1>Boxed Solutions</h1></td>
<td> <h1> </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>

javascript

2 Contributors
2 Replies
139 Views
10 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by sa1support

All 2 Replies

Airshow 416 WiFi Lounge Lizard

14 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sa1support 0 Newbie Poster · Answer 1 · 2010-04-08T04:29:15+00:00

Works Great Thank You