Switch onmouseover code

[METOOTECH]

Hi, I have set up a product viewer and have been able to switch product photos with an inline javascript event handler, but cannot figure out how to switch the onmouseover content with each product. Basically what I'm doing here is using a product viewer to show product photos when the product name is click on. The viewer starts out with a full size logo and hidden blank thumbnailx below. When a product name is clicked on, the product viewer changes images from the full sized logo to the photo of the product with a few thumbnail below showing different views of the product. Not a problem here making this happen with inline javascript event handlers... onmouseover, onmouseout and onclick.... A mouseover the thumbnail changes the large view in the product viewer, to show the large view of the thumbnail. I'm using a img tag and an imput tag to do this. The problem is when I try to change products, I cannot change the onmouseover that's in each thumbnail for changing the larger view above it in the product viewer. May somebody could help me with this, maybe it can't be done using inline script. I use inline script because it small, easy and a lot of time I do not have access to the head tag as on an eVay auction description. Below is a sample of the code, dealing here with just one product and only one thumbnail for simplicity purpose. I would appreciate any help. I really am not looking for some complex code for this, inline or very short script that doesn't have to go in the head statement. the code thats not working is the onClick="ip11.p11.src='A350R7.jpg'" I try to configure this every way possible and have been on hundreds of websites and can't find anything near this... thanks, metootech....<img id="p11" src="GIZMO1.jpg" width=350 height=263><br><input id="ip11" type="image" src="BLACKTHUMB.jpg" hspace="0" vspace="5" onmouseover="p11.src='GIZMO1.jpg'" ><a style="cursor:hand; background-color: #ffffff;" onClick="p11.src='A350R7.jpg'; ip11.src='A60R7.jpg'" onclick="ip11.p11.src='A350R7.jpg'" onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#00ff00'"> <br><font style="font-family: Arial; font-size: 16px; color: #000000"; onclick="this.style.color='#ffffff'"><b>Amp Tactical</b></font></a></font>

[scott100]

Why do you have a second onclick? Also, in your second onclick you are trying to change 2 id's at once which is why you are getting an error.<a style="cursor:hand; background-color: #ffffff;" onClick="p11.src='A350R7.jpg'; ip11.src='A60R7.jpg'" onclick="ip11.p11.src='A350R7.jpg'"Just remove the second onclick, the first one should be fine.<a style="cursor:pointer; background-color: #ffffff;" onClick="p11.src='A350R7.jpg'; ip11.src='A60R7.jpg'"also, cursor:hand is ie only, change to cursor:pointer

[METOOTECH]

Why do you have a second onclick? Also, in your second onclick you are trying to change 2 id's at once which is why you are getting an error.Very hard to expain what I'm trying to do here. I shortened the code to post here, but basically I have a product viewer, and 3 thumbnails below it, to show 3 views of the product and 100 products on the page. On page load the viewer is set to the GIZMO-LOGO in the viewer with 3 black blanks thumbnails below, which all point to the GIZMO-LOGO when onmousedovered after page load.When you click on one of the 100 products name in a list displayed beside the viewer, it directs the viewer to display a large photo of that product, with three thumbnails below for other views of the product, of which the first thumbnail is the original view. This works fine until you try to mouseover the newly loaded product thumbnails, which still point to the GIZMO-LOGO. My problem here is getting the thumbnail onmouseovers to point to the new larger views of the product, instead of the GIZMO-LOGO. I have expaned the code (see below) that I displayed above to help clarify what I'm trying to do here. This code has the viewer, 3 thumbnails, and only one product to click on to save space here. Fill in the pics with some of you own, and see if you can make it work. Any help is appreciated. METOOTECH<img id="pic1" src="GIZMO-LOGO1.jpg" width=350 height=263><br> THIS IS THE PRODUCT VIEWER <input id="ip1" type="image" src="BLACKTHUMB.jpg" hspace="0" vspace="5" onmouseover="pic1.src='GIZMO-LOGO1.jpg'" ><input id="ip2" type="image" src="BLACKTHUMB.jpg" hspace="0" vspace="5" onmouseover="pic1.src='GIZMO-LOGO1.jpg'" ><input id="ip3" type="image" src="BLACKTHUMB.jpg" hspace="0" vspace="5" onmouseover="pic1.src='GIZMO-LOGO1.jpg'" > THESE ARE THE 3 THUMBNAILS BELOW THE VIEWER<a style="cursor:hand; cursor: pointer; background-color: #ffffff;" onClick="pic1.src='A350R7.jpg'; ip1.src='A60R7.jpg'; ip1.pic1.src='A350R7.jpg';ip2.src='B60R7.jpg'; ip1.pic1.src='B350R7.jpg'; ip2.pic1.src='B350R7.jpg';ip3.src='B60R7.jpg'; ip1.pic1.src='B350R7.jpg'; ip3.pic1.src='C350R7.jpg';" onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#00ff00'"><br><font style="font-family: Arial; font-size: 16px; color: #000000"; onclick="this.style.color='#ffffff'"><b>Amp Tactical</b></font></a></font> THIS IS ONE PRODUCT IN THE LIST TO CLICK ON TO CHANGE THE VIEWER DISPLAY.... THE ip1.pic1.src='A350R7.jpg'; AND ip2.pic1.src='B350R7.jpg'; AND ip3.pic1.src='C350R7.jpg'; STATEMENTS DON'T WORK.

[scott100]

Fill in the pics with some of you own, and see if you can make it work. Any help is appreciated. METOOTECH

ok i've done that, try this code and let me know if i'm getting warmer

<head><style>input{width:40px;height:40px}</style></head><body><input id="ip1" type="image" src="http://www.tribalcog.com/learn/oval.gif" hspace="0" vspace="5" onmouseover="pic1.src=this.src" ><input id="ip2" type="image" src="http://www.tribalcog.com/learn/oval.gif" hspace="0" vspace="5" onmouseover="pic1.src=this.src" ><input id="ip3" type="image" src="http://www.tribalcog.com/learn/oval.gif" hspace="0" vspace="5" onmouseover="pic1.src=this.src" ><a style="cursor:hand; cursor: pointer; background-color: #ffffff;" onClick="ip1.src='http://www.google.com/intl/en/images/logo.gif';ip2.src='http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif';ip3.src='http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif'" onmouseover="this.style.backgroundColor='#ff0000'" onmouseout="this.style.backgroundColor='#00ff00'"><br><font style="font-family: Arial; font-size: 16px; color: #000000"; onclick="this.style.color='#ffffff'"><b>Amp Tactical</b></font></a></font><p><img src="http://www.cloistersdesign.co.uk/images/white%20square.gif" id="pic1" /></p></body>

[METOOTECH]

It works perfect, you're a genius! I filled in my pics, made 2 small modifications.... had to take the style statement out of the head area because I don't always have access to the head area such as on eBay ads and About Me page... and put in another onclick code for loading the large front view in the product viewer when the thumbnails load instead of keeping the LOGO there once the product name is clicked. Now I'll add more products and see it works still... it was so simple just just size down the large photos to small thumbnails on the page load instead of making seperate thumbnail photos and a src=this.src in the imput statements.... YOU'RE A GENIUS GUY!!!!

[METOOTECH]

It works perfect, you're a genius! I filled in my pics, made 2 small modifications.... had to take the style statement out of the head area because I don't always have access to the head area such as on eBay ads and About Me page... and put in another onclick code for loading the large product front view, in the product viewer when the thumbnails load, instead of keeping the LOGO there once the product name is clicked. Now I'll add more products and see it works still... it was so simple... just size down the large photos to small thumbnails on the page load instead of making seperate thumbnail photos and a src=this.src in the imput statements.... YOU'RE A GENIUS GUY!!!! A BIG THANKS! .... METOOTECH