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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

larger image onmouseover from thumbnail image recordset 1

Status
Not open for further replies.

ringadeal

Technical User
Jan 16, 2008
67
US
url of discussion:


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>
 
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
 
oh, I still require the functionality listed as item #2 in the original post.
 
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
 
I stuck this alt code as an img tag attribute:
Code:
alt=<%=(images.Fields.Item("alt_img").Value)%>
 
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!
 
this alt text would serve as a description for the current moused over thumbnail.
 
Also, How would I preload the images and does the script for this need to be inside the body tag?
 
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
 
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?
 
...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!!!!
 
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.
 
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
 
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!!
 
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
 
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
 
thanks so much for your reply. I've tried the alt text code but it doesn't seem to work.
 
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top