MouseOver/Out

Filespit · February 24th, 2011, 10:44 AM

Hi!

I am building an image-function with a mouseover-effect, but I need some help. On my page I have four images, and each image exists in three sizes (large, medium and small). When the page is launched, it shows one image of medium size and three of the small size. What I want to do is the following;

When I put my mouse icon over one of the small images, I want the source of the medium image to change to the selected small image (but it's medium version). When I put my mouse icon away, I want the default medium image to appear again. I also want the medium size image to link to the large size version of the same image, using a hyperlink. When I select one of the small images, I want the hyperlink source of the medium image to change so it links to the large version of the selected small image as well.

Here's what I've got so far:

Default.aspx:

Code:

<asp:HyperLink ID="Medium" runat="server">
    <asp:Image runat="server" ID="imgMedium" />
</asp:HyperLink>
<asp:HyperLink ID="Small1" runat="server">
    <asp:Image runat="server" ID="imgSmall1" />
</asp:HyperLink>
<asp:HyperLink ID="Small2" runat="server">
    <asp:Image runat="server" ID="imgSmall2" />
</asp:HyperLink>
<asp:HyperLink ID="Small3" runat="server">
    <asp:Image runat="server" ID="imgSmall3" />
</asp:HyperLink>

Default.aspx.vb:

Code:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        imgMedium.ImageUrl = "img1medium.jpg"

        imgSmall1.ImageUrl = "img2small.jpg"
        imgSmall1.Attributes.Add("name", imgSmall1.ClientID)

        Small1.NavigateUrl = "img2large.jpg"
        Small1.Attributes.Add("onMouseOver", imgMedium.ClientID & ".src='img2medium.jpg'; window.status='Mouse Over'; return true;")
        Small1.Attributes.Add("onMouseOut", imgMedium.ClientID & ".src='img1medium.jpg'; window status=' '; return true;")

        Select imgMedium.ImageUrl
            Case imgMedium.ImageUrl = "img1medium.jpg"
                Medium.NavigateUrl = "img1large.jpg"
            Case imgMedium.ImageUrl = "img2medium.jpg"
                Medium.NavigateUrl = "img2large.jpg"
        End Select
    End Sub

I believe this is possible but I can't figure it out. Help would be much appreciated! =)

disel2010 · February 26th, 2011, 04:37 AM

Hi,

what you describe should be possible as follows:

Code:

        protected void Page_Load(object sender, EventArgs e)
        {
            Image1.ImageUrl = "/Images/Img1Default.gif";
            HyperLink1.NavigateUrl = "/Images/Img1Large.gif";
            Image2.ImageUrl = "/Images/Img2Small.gif";
            Image3.ImageUrl = "/Images/Img3Small.gif";
            Image4.ImageUrl = "/Images/Img4Small.gif";

            Image2.Attributes.Add("onmouseover", "Image1.src='/Images/Img2Medium.gif';HyperLink1.href='/Images/Img2Large.gif'");
            Image2.Attributes.Add("onmouseout", "Image1.src='/Images/Img1Default.gif';HyperLink1.href='/Images/Img1Large.gif'");
            /* TODO: add same for other images */
        }

But I must be missing something as the link to Img2Large.gif can never be reached in the way you describe it. (It get's washed away onMouseOut). Don't you want to change the hyperlink of the small image you are over?
So like this:

Code:

 Image2.Attributes.Add("onmouseover", "Image1.src='/Images/Img2Medium.gif';HyperLink2.href='/Images/Img2Large.gif'");

Hope this helps.

Filespit · February 26th, 2011, 09:02 AM

Hi, thanks for the answer. I managed to fix it with this code;

Code:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        imgMedium.ImageUrl = "img1medium.jpg"
        
        img1()
    End Sub

    Private Sub img1()
        imgSmall1.ImageUrl = "img2small.jpg"
        imgSmall1.Attributes.Add("name", imgSmall1.ClientID)

        Hyperlink1.NavigateUrl = "img2large.jpg"
        Hyperlink1.Attributes.Add("onMouseOver", imgMedium.ClientID & ".src='img2medium.jpg'; window.status='Mouse Over'; return true;")
    End Sub

I scratched the onmouseout event as I figured it looked better without it. The selected small image now stays in the medium frame. I also do as you said, I link the small images to the large ones instead.

I have a new question though. When I put my mouse over one of the small images, I want to fill a label with a text value. When I put the mouse over another of the small ones, I want the text value to change. How do I do this? Do I need If-else or select case?

disel2010 · February 26th, 2011, 09:24 AM

Hi,

you should be able to just append it to the onMouseOver event.
e.g. in an ie only world you can just use innerHTML :

Code:

Image2.Attributes.Add("onmouseover", "Image1.src='/Images/Img2Medium.gif';lbl1.innerHTML  ='XYZ';HyperLink2.href='/Images/Img2Large.gif'");