Jump to content

funky_rus

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by funky_rus

  1. Visual Studio from MS comes with "mini server" and is best for learning C# or VB on asp .netget Visual Web Developer 2005 here: microsoft.com
  2. Hi all. After couple of days I finally did it =) and I learned a lot doing that, so if you'd like to have a look the way I did it, welcome: <asp:Image ID="imgSite" runat="server" Height="151px" Width="222px" AlternateText="Site Image" /><asp:DataList ID="dlSiteImages" runat="server" RepeatDirection="Horizontal" Visible="False" OnItemDataBound="dlSiteImages_ItemDatabound"> imgSite is the one I want to change on mouse over of the images in DataList. Note, there's event OnItemDataBound="dlSiteImages_ItemDatabound" which follows in C#: protected void dlSiteImages_ItemDatabound(object sender, DataListItemEventArgs e) { Image HoveredImage = (Image)e.Item.FindControl("imgSiteSmallImg"); string url = HoveredImage.ImageUrl.ToString(); string OriginalURL = imgSite.ImageUrl.ToString(); url = url.Replace("~", "."); OriginalURL = OriginalURL.Replace("~", "."); HoveredImage.Attributes.Add("onmouseover", "mouseOver('" + url + "')"); HoveredImage.Attributes.Add("onmouseout", "mouseOut('" + OriginalURL + "')"); } Basically, on DataList databound this function adds Attributes onmouseover and onmouseout, passing the edited (~ in URL replaced with . so JavaScript could understand it) image URL.And here comes simple java script: function mouseOver(SmallImgURL){var LargeImage = document.getElementById('ctl00_ContentPlaceHolder1_imgSite');LargeImage.src = SmallImgURL;}function mouseOut(OriginalURL){var LargeImage = document.getElementById('ctl00_ContentPlaceHolder1_imgSite');LargeImage.src = OriginalURL;} Note: I had a problem, using getElementById it returned null when I tried to find images using their IDs I set in asp code, because they were changed after compiling, so you run the code and simply View Source to find the generated ID. In my case, "imgSite" was changed to 'ctl00_ContentPlaceHolder1_imgSite'.That's it!Good like in coding
  3. Hi.I have a main large image on my page and a data list with small kinda thumnail images (simply resized to lower size, their actual size is the same as large image size).And I would like to change that large image to the one the user rolls the cursor on (mouseover in other words) and change back to the original image file on mouseout.Please, see what i mean in the example on ebayer.com (scroll down to Image Gallery)I'm coding on asp .net , using C# as code behind and Visual Studio 2005 as an editor.Please share your ideas.
×
×
  • Create New...