Mouseover Image Effect Thumbnail to Large Image Different Location on Page

[dlebowski]

I have gotten my script to do exactly what I want it to do with one exception.  I have some thumbnail images that people can mouse over and the actual image is 100px by 75px.  That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg.  I have the large version of the image that resides in www.website.com/images/image1.jpg.  Its actual size is 640px by 480.  When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead?  Let me know if you need ellaboration.  Any help would be great!  Thank you.

 

Javascript:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

 

HTML LARGER IMAGE:

<div><img src="" id="BigOne"></div>

[abazoskib]

Well, I hope you havent assigned 'BigOne' to more than one element. I would assign dynamic 'BigOne's if that is the case. 'BigOne_xxx' for example, then pass that along to your function as well.

[dlebowski]

Hey abazoskib.  Thanks for the reply.  I do not have it assigned to more than one element.  For example, I have 6 thumbnails.  When I mouseover them, the <div> called "BigOne" changes.  I just basically don't want to have to use the full size images shrunk down as thumbnails.  Can you give me an example of how to do this?

[abazoskib]

well if its a DIV you are trying to modify you need to use innerHTML, not src. If you were altering an anchor i.e.<a href....></a> you would use src