Image!

[ZeroShade]

I have an ajax function that will change the big image with the little images. But I need the big image to be set to the first image on page load... I've tried but I keep failing. Any ideas?

<script type="text/javascript" language="javascript">		var xmlHttpRequestObject = false;				try		{			// Firefox, Opera 8.0+, Safari			xmlHttpRequestObject = new XMLHttpRequest();		}		catch (e)		{			// Internet Explorer			try			{				xmlHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP");			}			catch (e)			{				try				{					xmlHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");				}				catch (e)				{					alert("Your browser does not support AJAX!");					window.location="Default.aspx";				}			}		}					function changeImage(img) 		{			if (xmlHttpRequestObject)			{				var obj = document.getElementById("ViewImage");								xmlHttpRequestObject.open("GET", img);								xmlHttpRequestObject.onreadystatechange = function()				{					if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200)					{						// The state is complete and the status is successful.					}				}								obj.src = "album/" + img;			}			else			{				alert("Your browser does not support AJAX!");				window.location="Default.aspx";			}		}	</script>	<div style="background-image:url('img/Header.png'); background-repeat:no-repeat; height:50px; 		font-family:Verdana; text-align:center; font-size:medium; font-weight:bold; ">		<br />Photos	</div>	<center>		<asp:Panel ID="ImageViewPanel" runat="server" Height="400px" Width="600px" BorderColor="white" BorderWidth="5px">			<img src="" id="ViewImage" alt="" height="100%" width="100%" />		</asp:Panel>		<asp:DataList ID="ImageDataList" RepeatDirection="Horizontal" RepeatColumns="5" runat="server" DataKeyField="ImageId" DataSourceID="ImageObjectDataSource">			<ItemTemplate>				<div style="padding:20px;">					<img src='album/<%# Eval("ImageName") %>' onclick="changeImage('<%# Eval("ImageName") %>')" alt="" height="60px" width="80px" />				</div>			</ItemTemplate>			<AlternatingItemTemplate>				<div style="padding:20px;">					<img src='album/<%# Eval("ImageName") %>' onclick="changeImage('<%# Eval("ImageName") %>')" alt="" height="60px" width="80px" />				</div>			</AlternatingItemTemplate>		</asp:DataList>	</center>

[jesh]

I can't remember how the asp:DataList renders out into HTML, but you could either set the big image on the server by just setting the source of it to be the first element of the collection you are using to bind to the DataList, or you could run some javascript like this:

function init(){	// Get a reference to the container that is the DataList.  You might	// have to fiddle with this depending on how .NET renders the ID for	// this control (i.e. "MyForm$ctl1$ImageDataList")	var datalist = document.getElementById("ImageDataList");	// then get the first image in that container	var image = datalist.getElementsByTagName("img")[0];	// and call the changeImage function with that image's src	changeImage(image.src);}window.onload = init;

However, you're probably going to be better off having .NET set the source for that ViewImage image on the server before it's sent to the browser.

[ZeroShade]

However, you're probably going to be better off having .NET set the source for that ViewImage image on the server before it's sent to the browser.

If I were to change my <img> to an <asp:Image>, how can I use the codebehind to still call the onclick button to run my javascript functions? If I did this, then I'd be able to do it through .net.

[jesh]

You don't need to use the ASP.NET web controls (System.Web.UI.WebControls), you can use the regular HTML controls (System.Web.UI.HtmlControls).In the ASPX:

<img id="ViewImage" runat="server" />

In the code-behind:

ViewImage.src = "someimage.jpg";

Or, if your data is in a datatable

ViewImage.src = MyTable.Rows[0]["MyImagePath"].ToString();

Otherwise, if you want to use a web control - like asp:Image - you can set up non-ASP.NET attributes on the server like so:

ViewImage.Attributes.Add("onclick", "somefunction()");

[ZeroShade]

I didn't know you can do that. Whats the big difference between <img> and <asp:Image>?

[jesh]

For just displaying an image on the page, the only difference really is that asp:Image *has* to be run at server. I haven't really played around much with the asp:Image control but, like all the other .NET web controls, there are a bunch of additional features that are available - like attaching event handlers to various events (e.g. PreRender) or using a DataSource to bind the data to the control.I typically use the HtmlControls for most of my pages. I feel that I have better control over how the element is rendered this way. I know, for example, that "<img src="something.jpg />" will be sent to the browser as "<img src="something.jpg" />". I don't have that trust when using "<asp:Image ... />".The only web control that I use regularly in place of html controls is the "asp:LinkButton" because of the ability to have it fire the OnClick event on the server. I don't know that you can do that with a simple "<a>" element.

[ZeroShade]

I've been working with .net web controls for 4 months now... its almost like its taken over! I use asp everything compared to html. But I understand where your coming from with better control with html.