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>

tchatzi · Jun 30, 2008

try it like this and let me know if everything is ok

Code:

<script type="text/javascript">
<!--
[red]var currentImage;[/red]
function showBigImage( isource[red],bigImage[/red] ) {
var theImage = document.getElementById( 'largeimage' );
theImage.src = isource;
[red]currentImage = bigImage;[/red]
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open([red]'/large_image.asp?url_image=' + currentImage[/red],winName,features);
}
//-->
</script>

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'[red],'<%= images.Fields.Item( "url_img" ).Value %>'[/red] )" />
</a>

<%
  Repeat1__index = Repeat1__index + 1
  Repeat1__numRows = Repeat1__numRows - 1
  images.MoveNext()
  Wend
%>

</td>

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

ringadeal · Jun 30, 2008

EXCELLENT!!!! THANKS A MILLION!

ringadeal · Jun 30, 2008

oh, I still require the functionality listed as item #2 in the original post.

tchatzi · Jul 1, 2008

sorry for missing that out...

the alt for each image that you are referring to

is the alt="Image 1" attribute of the <img> tag ? (which is the text that appears before the image loads)

or is it the title="Image 1" attribute of the <img> tag? ( which is the text that appears when you mouseover an image)

or is it something else?

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

ringadeal · Jul 1, 2008

I stuck this alt code as an img tag attribute:

Code:

alt=<%=(images.Fields.Item("alt_img").Value)%>

ringadeal · Jul 1, 2008

but actually, the text I require to change according to current moused over thumbnail image is the alt text residing outside of the img tag:

Code:

 <td ><%=(images.Fields.Item("alt_img").Value)%></td>

each image url database record has a corresponding image tag

thanks!

ringadeal · Jul 1, 2008

this alt text would serve as a description for the current moused over thumbnail.

ringadeal · Jul 1, 2008

Also, How would I preload the images and does the script for this need to be inside the body tag?

tchatzi · Jul 2, 2008

Code:

<script type="text/javascript">
	var currentImage;

	function showBigImage( isource,bigImage,[red]header[/red] ) {
		var theImage = document.getElementById( 'largeimage' );
		theImage.src = isource;
		currentImage = bigImage;
		[red]document.getElementById('photoHeader').innerHTML=header;[/red]
	}

	function MM_openBrWindow(theURL,winName,features) { //v2.0
		window.open('/large_image.asp?url_image=' + currentImage,winName,features);
	}
	[red]function MM_preloadImages() { //v3.0
		var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
		if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
	}[/red]
</script>

use the above MM_preloadImages function and inside your body tag

Code:

<body onLoad="MM_preloadImages('images/1280.jpg','images/portable_stage.jpg',images/black.gif',.........,'images/1280front.jpg')">

to change the image header notice the red collored text added in the showBigImage function and the red collored text below in the td tag and the onmouseover

Code:

	<!--DWLayoutTable-->
		<tr>
			<td colspan="2" height="30" [red]id="photoHeader"[/red]>Model 1280 - Metal Folding Chair - GREY</td>
		</tr>

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','<%= images.Fields.Item( "url_img" ).Value %>' [red],'<%=(images.Fields.Item("alt_img").Value)%>'[/red])" />
</a>

<%
  Repeat1__index = Repeat1__index + 1
  Repeat1__numRows = Repeat1__numRows - 1
  images.MoveNext()
  Wend
%>

</td>

let me know if everything is ok....I also advice you, the td (that holds the image with the onclick="MM_openBrWindow... code ) to have a standard height, because when you mouseover the small thumbnails some photos cause the whole page to move up and down...which is a bit ugly...

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

ringadeal · Jul 2, 2008

thanks so much. All of the functionality is working as intended!

Can I trouble you to assist me with one last functionality of allowing the img tag's alt attribute to equal the alt text of the current moused over thumbnail?

ringadeal · Jul 2, 2008

...and I would really like the first thumbnail image of the recordset to display as the big image when none of the thumbnails are being moused over anymore. thanks!!!!

ringadeal · Jul 2, 2008

with this previous posted feature of the large image displaying the first image of the recordset once again, I suppose we need to also instruct the javascript to select the moused-over thumbnail image "onclick". Otherwise, the user will not be able to ever click on the selected large image in the even larger view of the new javascript window that opens up.

tchatzi · Jul 3, 2008

why would you want to display the first photo when none is moused over? ... sites supposed to be simple and with as less clicks as possible ... I would suggest to leave it as it is ... it works and looks pretty nice and nit.

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

ringadeal · Jul 3, 2008

Can I trouble you to assist me with one last functionality of allowing the img tag's alt attribute to equal the alt text of the current moused over thumbnail?

thanks again for all your help!!

tchatzi · Jul 4, 2008

There is no reason to actually change the alt value of the <img> tag realy, because the alt value appears only while the image loads...which doesn't realy take more than one second...you will not be able to see tha alt text unless you are browsing the web site with a very slow internet connection speed...
but the red marked text bellow shows you how to do it anyway...

Code:

function showBigImage( isource,bigImage,header ) {
        var theImage = document.getElementById( 'largeimage' );
        theImage.src = isource;
        currentImage = bigImage;
        document.getElementById('photoHeader').innerHTML=header;
        [red]document.getElementById( 'largeimage' ).atl=header;[/red]
    }

Code:

<a href="javascript:;" onclick="MM_openBrWindow('/large_image.asp?url_image=images/1280.jpg','imagewindow','width=600,height=600')"><img src="imagescript.asp?path=images/charcoal.gif&amp;Width=250" name="largeimage" id="largeimage" border="0" [red]alt=""[/red] /></a>

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

tchatzi · Jul 4, 2008

my appologies...there is a typo in the last post...

document.getElementById( 'largeimage' ).atl=header;

it is supposed to be

Code:

document.getElementById( 'largeimage' ).[red]alt[/red]=header;

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

ringadeal · Jul 4, 2008

thanks so much for your reply. I've tried the alt text code but it doesn't seem to work.

tchatzi · Jul 9, 2008

open the page with firefox ...open the error console from tools and notice if there is any error coming up

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

ringadeal · Jul 13, 2008

I realize now that the alt image does work on all images except for the first one and I have double checked the database to make sure there is a value for this first image:

http://www.canchair.com/productfamily_processor.asp?ProductID=198

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

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor