larger image onmouseover from thumbnail image recordset 1

ringadeal · Jun 28, 2008

url of discussion:

http://www.canchair.com/new_web_product_detail.asp?ProductID=8

As per existing page code shown below, I would like to add these 3 functionalities to my webpage:

1. return to the default largeimage onmouseout

2. In addition to the larger image changing while mousing over the thumbnail images (images.Fields.Item( "url_img" ).Value ), I would like the alt text database field to change according to the thumbnail image being moused-over. (images.Fields.Item("alt_img").Value) as each url_img database record has a corresponding alt_img database field.

3. I created a javascript window to open when the larger image is clicked in order to display an even larger image of the selected thumbnail. I have set the image source on this window as follows: <img src="imagescript.asp?path=<%= Request.QueryString("url_image") %>&Width=600">. The url_image querystring is passing the <%= images.Fields.Item( "url_img" ).Value %> but of course, the picture that displays is the first one in the recordset and not the currently moused over thumbnail image which is what I want.

Head section code:

Code:

<head>
<script type="text/javascript">
function showBigImage( isource ) {
var theImage = document.getElementById( 'largeimage' );
theImage.src = isource;
}
</script>

</head>

Thumbnail image code:

Code:

<td ><%
While ((Repeat1__numRows <> 0) AND (NOT images.EOF))
%>
                         <a href="javascript:;" ><img src="imagescript.asp?path=<%= images.Fields.Item( "url_img" ).Value %>&Width=36" border="0" onmouseover="showBigImage( 'imagescript.asp?path=<%= images.Fields.Item( "url_img" ).Value %>&Width=250' )" /></a>                   <%
Repeat1__index = Repeat1__index + 1
Repeat1__numRows = Repeat1__numRows - 1
images.MoveNext()
Wend
%></td>

ringadeal · Jul 16, 2008

I enabled Javascript errors detection on internet explorer but there doesn't seem to be any:

Then only problem that currently exists is that once you mouse over all the thumbnail images and the alt text changes accordingly (to display as an image caption), the alt text does not display for the initial image only. The only time the alt text for the initial image displays is when the page first loads, before mousing over the other thumbnail images.

You can see the problem clearly at:

http://www.canchair.com/new_web_product_detail.asp?ProductID=198&ProductFamily=1&ProductFamilySub=10

HEAD SECTION CODE:

Code:

 <script type="text/javascript">
<!--
var currentImage;
function showBigImage( isource,bigImage,header ) {
var theImage = document.getElementById( 'largeimage' );
theImage.src = isource;
currentImage = bigImage;
document.getElementById('photoHeader').innerHTML=header;
document.getElementById( 'largeimage' ).alt=header;

}

CODE FOR ALT TEXT TO DISPLAY AS IMAGE CAPTION:

Code:

<td width="250" height=50 valign="top" id="photoHeader"><%=(images.Fields.Item("alt_img").Value)%></td>

With this feature corrected, the code is PERFECT!!!!

ringadeal · Jul 23, 2008

thanks to all your code,the image gallery is looking great.

but still have the problem that the caption text will not display for each first image of the recordset.

You can see the problem persist at these 2 separate product pages:

http://www.canchair.com/new_web_product_detail.asp?ProductID=8&ProductFamily=&ProductFamilySub=

http://www.canchair.com/new_web_product_detail.asp?ProductID=198&ProductFamily=1&ProductFamilySub=10

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

larger image onmouseover from thumbnail image recordset 1

ringadeal

Technical User

ringadeal

Technical User

ringadeal

Technical User

Similar threads

Part and Inventory Search

Sponsor