	AllExperts > Experts
	Search

About Anthony Levensalor
Experience
I have been programming in Java and Javascript since 1998. I run a web development company that specializes in Ajax front ends with PHP/MySQL back ends. I am a Sun Certified Java 2 Developer, and have done nothing but web applications for the last two years in my business

Past/Present clients
Monster.com, Compuware Corporation, Flextronics International, Pragmatech Software, Open Travel Software, The Loss Mitigation Institute, Raw Story Media, Page One News Media.

You are here: Experts > Computing/Technology > Focus on JavaScript > Javascript > Mouseover image gallery

Topic: Javascript

Expert: Anthony Levensalor
Date: 9/22/2007
Subject: Mouseover image gallery

Question
QUESTION: I read Randy Taylors thread on the subjecy-- used it to make a page www.grandcaymanvillas.net/thumb.htm for a test--
When the mouse rollsover the the small photos, they appear in the larger space-- only when the mouse rolls over the larger space--the images dissappear-- and the viewer is left with an empty frame-- I used the code below

<html>
<head>
</head>
<body>
<table>
<tr>
  <td>
    <img src="pool120.jpg" onmouseover="setBigIMG('pooltest.jpg')" onmouseout="clearBigIMG()">
  </td>
  <td rowspan="4">
    <img id="bigIMG" src="pooltest.jpg">
  </td>
</tr>
<tr>
  <td>
    <img src="balcony120.jpg" onmouseover="setBigIMG('balconytest.jpg')" onmouseout="clearBigIMG()">
  </td>
</tr>
<tr>
  <td>
    <img src="chaises120.jpg" onmouseover="setBigIMG('chaisetest.jpg')" onmouseout="clearBigIMG()">
  </td>
</tr>
<tr>
  <td>
    <img src="sofa120.jpg" onmouseover="setBigIMG('sofatest.jpg')" onmouseout="clearBigIMG()">
  </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function setBigIMG(newSRC){
  document.getElementById("bigIMG").src = newSRC;
}
function clearBigIMG(){
  document.getElementById("bigIMG").src = "";
}
</script>
<p> </p>
<p> </p>

Thanks very much for any advice to make my website photo galleries more professional appearing-

Jim

ANSWER: What I see is that Firefox 2 is displaying everything ok, but IE7 throws an error on the mouseout. The source for the page when done via view source doesn't match what you've got shown here in the listing. The mouseout event for each element is simply this:

onmouseout="pooltest.jpg"

Which is what is throwing the error in IE. This could be just a typo, because the above listing should work fine. Check out the page you have uploaded, make sure the source is correct. If you still have a problem with it working as expected, let me know and I'll get you sorted out in no time.

All the best,
~A!

---------- FOLLOW-UP ----------

QUESTION: I have replaced with another photo "sofatest.jpg" for the mouseout and www.grandcaymanvillas.net/thumb.htm seems to work alright in IE -- but in "preview" on frontpage I get script errors-- do you see any errors in other browsers?

Answer
The problem is not so much the image you're putting in there as the fact that onmouseout takes a function as an argument, not an image source. The listing you pasted in shows "onmouseout='clearBigIMG()'", which will work, but the source code on the page itself shows "onmouseout='sofatest.jpg'", which is not going to work without error.

Make sure the function is in the onmouseout property and not the image name, and things should go more smoothly for you.

All the best,
~A!

Add to this Answer Ask a Question

About Us | Advertise on This Site | User Agreement | Privacy Policy | Help
Copyright © 2008 About, Inc. About and About.com are registered trademarks of About, Inc. The About logo is a trademark of About, Inc. All rights reserved.