I have 2 images in my page. What i want to do is, when i move the mouse over 2nd image, the first image will change to other image, but something is not working.
Code:
<asp:Image ID="imgProduct" runat="server" ImageUrl="~/Images/1.png" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/2.png" onmouseover="imgProduct.src='Images/2.png';"/>
If i change the ID in onmouseover="imgProduct.src= to any image id in masterpage, that image is changing correctly, but its not working in the default page.
Any suggestions?
On Page_Load event add this line.
Image2.Attributes.Add("onmouseover",imgProduct.ClientID+".src='Images/2.png'");
Try this instead :
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/2.png"
onmouseover="javascript:document.getElementById('imgProduct').src=this.src;" />
Good Luck !!
Related
I have created an image folder in my root project folder
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/" />
I am linking my images here:
if (dropDownList.SelectedItem.Value == "Picture 1")
{
Image1.ImageUrl = "~/images/picture1.jpg"
}
When I visit the web page I get a small img box with an x instead of my image.
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/" />
is setting the url to a directory (folder), not an image. That's why you're getting the small image-box and not an image.
If you want an image to show up when the page loads, set it to a valid image:
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/picture1.jpg" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/" />
This line of code is setting an invalid image url as it only contains the folder path. So in your code you must ensure that you override the Image1's ImageUrl property to valid image file. Based on your requirement here is something you can do.
In aspx page, set the image url to picture1.jpg assuming that option1 is selected by default in the dropdown so picture1.jpg will be displayed on initial page load.
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/picture1.jpg" />
Next, set the AutoPostBack property of your dropdown to true so that image source code can be updated dynamically based on dropdown selected value
<asp:DropDownList
ID="DropDownList1"
runat="server"
AutoPostBack="true"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
In selectedIndexChanged event handler update image source based on the selectedItem
protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
{
Image1.ImageUrl = "~/images/" + DropDownList1.SelectedItem.Value;
}
Hope this helps
It was displaying the small image box with X as it was not able to find the image at the path specified.
So, Add you images folder in wwwroot folder instead of Project root.
After that you can use <asp:Image ID="Image1" runat="server" ImageUrl="~/images/picture1.jpg" />
for rest you can follow Mohsin's answer
Try to use .Scr instead of ImageUrl.
Boss just gave me a webpage to work with, and I've never done webpages before. When I got it there was an image I need to replace
<div>
<!--<img style="padding-top:5px;" class="featured" src="path/name.jpg" />-->
html text
I had to go in to the .cs file of the .aspx file and a path to the image
Image image = new Image();
image.ImageUrl = path;
and then back where the old image was
<div>
<asp:Image style="padding-top:5px;" class="featured" runat="server" ID="image" />
html text
But I'm not sure how to get the new image to display correctly where the old one was, since I've never worked with asp files before. Any suggestions on what to do?
In the asp code, be certain to give the image element an ID:
<asp:image id="setincode" width="250" runat="server" />
In the code-behind, retrieve the control by the ID, then you can set the url:
Image img = (Image)FindControl("setincode");
img.ImageUrl = "Images/Butterfly.jpg";
As mentioned in my comment you can access the control directy by using it's Id in the C# code or you can provide the ImageUrl in your aspx page.
Providing the ImageUrl in your aspx
<asp:Image runat="server" ID="image" ImageUrl="../Path/SomeImage.png" />
Or if you want to use C#
image.ImageUrl = "../Path/SomeImage.png";
Similar but slightly different:
Mark-up
<img id="Image1" alt="image" runat="server" />
In code behind (VB or C#):
Image1.src = "Images/Butterfly.jpg"
I'm new to ASP.NET and C# and also new to this forum but here is my problem.
I'm trying to create a image gallery with ASP.NET Webforms(requirement) and C#. I'm using a Listview to show the thumbnails and when you click on the small picture the big version should show above in a img tag for example. But I cant find any "OnClick" code for a hyperlink. Do I have to do that with JavaScript?
Thanks for all help.
here is some of the code:
<ItemTemplate>
<asp:HyperLink ID="ImageHyperLink" runat="server" ImageUrl='<%# Eval("Name","~/files/thumbs/{0}") %>' NavigateUrl='<%# Eval("Name","~/files/{0}") %>'></asp:HyperLink>
</ItemTemplate>
Try taking a look at LinkButton
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.linkbutton(v=vs.110).aspx
<asp:LinkButton runat="server" id="LinkButton1" OnClick="OnClickAction"></asp:LinkButton>
This will allow you to do a server-side method in much the same way an <asp:Button> will do. However will look just like a hyperlink.
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="http://stackoverflow.com/">HyperLink</asp:HyperLink>
You will not get on click event for HyperLink, But for navigating on to the another page.
You will get one property which is NavigateUrl
By using this property you can redirect to any page by giving url.
I get image by image-handler in first page and how to pass into second page
The .aspx page is like
<asp:Image ID="Image1" runat="server" Height="250px" Width="290px"
ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("idnews") %>' />
Just pass the name of the image on the second page and set the same on the second page.
Try this code and implement according to your code
<asp:HyperLink
ID="lnkImage" runat="server"
ImageUrl='<%# Eval("productid","~/Handler.ashx?productid={0}") %>'
NavigateUrl='<%# Eval("productid","ProductLarge.aspx?productid={0}")' />
and markup in ProductLarge.aspx should be,
<img src='Handler.ashx?productid=<%=Request["productid"] %>' alt='Large Image' />
You are fetching image from database, so its not very big deal. You can just pass the Image id via Query string or other method and can display image as u display it on previous page.
I try to add an image banner as a catalog item, but it won't show the image at all. Do I have to wrap it in something or add a custom webpart for this functionality?
When I add the exact same code in an ordinary WebPartZone it shows the image correctly.
<asp:CatalogZone ID="CatalogZone1" runat="server">
<ZoneTemplate>
<asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server" >
<WebPartsTemplate>
<asp:Image ID="Image1" ImageUrl="..." runat="server" />
</WebPartsTemplate>
</asp:DeclarativeCatalogPart>
</ZoneTemplate>
</asp:CatalogZone>