Joomla Templates Club 406,261 posts

[rhys_daniels Friend rhys_danielsJoin date: November 2008Posts: 218Downloads:0Uploads:60 Thanks: 32 Thanked: 6 times in 1 posts]

#150195

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 & 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”> </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>

[rhys_daniels Friend rhys_danielsJoin date: November 2008Posts: 218Downloads:0Uploads:60 Thanks: 32 Thanked: 6 times in 1 posts]

#339614

Found the solution by posting to Dani Web
http://www.daniweb.com/forums/thread273933.html

File Attached with the code solution

---

Attachments:

1. code.txt

[Author]

Posts