Wrox Programmer Forums
|
ASP.NET 3.5 Basics If you are new to ASP or ASP.NET programming with version 3.5, this is the forum to begin asking questions. Please also see the Visual Web Developer 2008 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 3.5 Basics section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 24th, 2011, 10:44 AM
Authorized User
 
Join Date: Apr 2010
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
Default MouseOver/Out

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! =)
 
Old February 26th, 2011, 04:37 AM
Authorized User
 
Join Date: Jan 2011
Posts: 86
Thanks: 1
Thanked 12 Times in 12 Posts
Default

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.
 
Old February 26th, 2011, 09:02 AM
Authorized User
 
Join Date: Apr 2010
Posts: 21
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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?
 
Old February 26th, 2011, 09:24 AM
Authorized User
 
Join Date: Jan 2011
Posts: 86
Thanks: 1
Thanked 12 Times in 12 Posts
Default

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'");





Similar Threads
Thread Thread Starter Forum Replies Last Post
Mouseover in xslt rabs XSLT 3 March 16th, 2009 05:48 AM
Asp with JavaScript - Mouseover snufse ASP.NET 2.0 Basics 7 January 26th, 2009 08:31 PM
ASP:Repeater and Mouseover gbrown ASP.NET 1.0 and 1.1 Basics 1 June 4th, 2007 01:17 AM
mouseover on label msrnivas ASP.NET 1.0 and 1.1 Basics 5 February 8th, 2007 10:27 AM
oPacity Mouseover crmpicco Javascript How-To 3 July 1st, 2005 09:43 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.