Forum Moderators: open
I'm trying to figure out why onClick didn't work. Does onClick generate a click on both the down and up strokes of the mouse button? Maybe the script was getting confused by being sent 2 clicks in quick succession?
onMouseDown will trigger when either the left or right (or middle) is pressed. Similarly, onMouseUp will trigger when any button is released. onMouseDown will trigger even when the mouse is clicked on the object then moved off of it, while onMouseUp will trigger if you click and hold the button elsewhere, then release it above the object.
onClick will only trigger when the left mouse button is pressed and released on the same object. In case you care about order, if the same object has all 3 events set, it's onMouseDown, onMouseUp, then onClick. Each even should only trigger once though.
Chad
tt99
I know that image swapping can work using any of the 3, so if you are still having problems, I would suggest posting some code, and someone might be able to figure out what is going on.
As far as the pop-up blocker, I would guess that the XP/IE blocker decided that opening links onmousedown is more suspicious that onclick. This would make sense to me, because that's the way normal links work: they don't actually go to the next page until you do a full click, mouse down and mouse up, on the same link. Pushing the mouse button, then moving it off the link doesn't take you to the next page, so it shouldn't open up a pop-up window. Just a guess though.
Chad
<head>
<script type="text/javascript">
<!--
if (document.images)
{
image1= new Image(); image1.src="../images/floral/pinkandwhiteroses.jpg";
image2= new Image(); image2.src="../images/floral/greenandwhite.jpg";
image3= new Image(); image3.src="../images/floral/whitelisianthus.jpg";
}
function change(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
//-->
</script>
</head>
<body>
<table id="imageTable">
<tr>
<td rowspan="5"><img src="../images/floral/floral2_2.jpg" name="mainImg" id="mainImg" alt="" width="330" height="330" /></td>
<td colspan="3" class="headerCell"><h3>Floral Still Life </h3></td>
</tr>
<tr>
<td class="thumbnailCell"><a href="javascript:;" onmousedown="change('mainImg','image1')"><img src="../images/floral/pinkandwhiteroses_s.jpg" alt="" width="60" height="60" /></a></td>
<td class="thumbnailCell"><a href="javascript:;" onmousedown="change('mainImg','image2')"><img src="../images/floral/greenandwhite_s.jpg" alt="" width="60" height="60" /></a></td>
<td class="thumbnailCell"><a href="javascript:;" onmousedown="change('mainImg','image3')"><img src="../images/floral/whitelisianthus_s.jpg" alt="" width="60" height="60" /></a></td>
</tr>
</body>
href="javascript:;"It may be a good idea to add something:
href="javascript: [blue]void 0[/blue];"Perhaps even a...
href="javascript: void 0;" onmousedown="change('mainImg','image1'); [blue]return false[/blue];"Better would be to put a path to the intended image in the href so that the image is accessible with JS disabled:
href="../images/floral/pinkandwhiteroses.jpg" onmousedown="change('mainImg','image1'); [blue]return false[/blue];"---------------
Meanwhile, change
imgOn=eval(imgName + ".src");to this
imgOn = window[imgName].srceval is rarely (or never) needed, and this is easier.
