SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disjointed Rollover

    hi....
    i have 5 link buttons and write the code for display an image on mouse over of a link button. but it is displaying over the link button. i want to display the images on right side of my webpage on mouse over. how can i do this??? in asp.net C# 4.0

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi, Welcome to Sitepoint

    You'll need to post some code or a link to the problem to get further help I'm afraid as the question is a bit too vague to answer at the moment.

    This old example shows a rollover effect so view source to see how its done as the code is in the head.

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi, Welcome to Sitepoint

    You'll need to post some code or a link to the problem to get further help I'm afraid as the question is a bit too vague to answer at the moment.

    This old example shows a rollover effect so view source to see how its done as the code is in the head.

  4. #4
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script language="javascript " type="text/javascript">
    function showImage() {
    document.getElementById("image").style.display = "block";
    document.getElementById("image").src = 'Myimages/aa.jpg';

    }
    function hideImage() {
    document.getElementById("image").style.display = "none";
    document.getElementById("image").src = '';


    <asp:LinkButton ID="LinkButton1" runat="server" style="position:absolute; top: 223px; left: 216px;
    width: 302px" onclick="LinkButton1_Click1" Font-Bold="True"
    Font-Size="Large" ForeColor="#6600FF" Font-Names="Viner Hand ITC" OnMouseOver="showImage();" OnMouseOut="hideImage();">Srinivasa Kalyana Mandapam</asp:LinkButton>
    <img src="" id="image" alt="" width="300px" height="150px" style="display:none;"/>


    sir, i applied this code to all the 5 link buttons,... i got the image on mouse over. but i want to display it on rigth side like the This old example as you posted. please tell me sir.....

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Hopefully someone from the JS forum will help you with that ancient script and give you some better practices.

    As far as CSS goes you can position the image wherever you want (within reason) by adding some styles for it via its id.

    e.g.

    Code:
    #image{
    position:absolute;
    right:0;
    }
    Of course there are about a million variables to consider and as we don't have a complete structure of your page it will be hard to be more specific. You will probably need to add position:relative to the parent of those links so that the absolute image is placed in relation to the parent and not the viewport - but again that does depend on what you need.

    If you want all the images ion the same place then use a class on the image so that they all get put in the same place with the rule above. You will of course need to adjust positions to fit in to where you want.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •