Your 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=utf-8" />
<title>DropDown on Click</title>
<script type="text/javascript">
_uacct = "UA-1928984-2";
urchinTracker();
function onMouseOverFn(sid, tid)
{
sid.style.cursor = tid;
}
function onMouseOutFn(sid)
{
sid.style.cursor = 'default';
}
function showEM(obj)
{
if(document.getElementById('EM').style.display == 'none' || document.getElementById('EM').style.display == '' )
{
document.getElementById('EM').style.display="inline";
document.getElementById('imgem').src="new_images/bullet_02-down.gif";
document.getElementById('imgem').width = 9;
document.getElementById('imgem').height= 9;
}
else
{
document.getElementById('imgem').src="new_images/enable_icon.gif"
document.getElementById('EM').style.display = 'none'
document.getElementById('imgem').width = 9;
document.getElementById('imgem').height= 9;
}
}
</script>
<style type="text/css">
.testing{
display: none;
}
</style>
</head>
<body>
<div><label onclick="showEM(this)" onmouseover="onMouseOverFn(this,'hand');" onmouseout="onMouseOutFn(this);" id="imgem"><!--<img id="imgem" src="new_images/enable_icon.gif" width="9" height="9"/> -->Mustang V6</label></div>
<div id="EM" class="testing"><img src="angelina_jolie_13.jpg" width="400" /></div>
</body>
</html>
1. The images you linked to are on your own computer, nothing shows up for anyone else in the world.
2. I (deliberately) don't have IE installed on this machine, or any other Windows machine I own.
3. The element "#imgem" is a <label> tag, yet, you're trying to alter it's src attribute, which it doesn't possess.
4. The <label> tag itself is not a self-sustaining tag, it's supposed to be used in conjunction with another element using it's for attribute.
5. The code <!--<img id="imgem" src="new_images/enable_icon.gif" width="9" height="9"/> --> is in HTML comment tags, and therefore will not do anything within the page and cannot be modified using Javascript.
6. When working with heights and widths, you should specify units. Your .width = 9; should read .width = '9px';. Note the encapsulated string here, as the CSS will read that as nine pixels, rather than an arbitrary 9, which can cause different results in different browsers.
7. There's no need to add a .txt attachment and give instructions to change filenames, just place the source code within
or
tags depending on what language you are using.
8. You should always try to make your code as cross-browser compatible as possible. Simply saying "it works in IE, use that" is neither helpful, nor productive.
9. Javaman still hasn't given a full description of what he is after. My working example can either act as a starting block or he can say yes or no to whether that is the kind of thing he is after.
10. My example may not work for you if you are using it offline. I've used the preferred protocol-less method for attaching the JQuery script. To make it work offline:
FIND:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
REPLACE WITH:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>