Disjointed Rollover

JavaScript
1

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

Hi, Welcome to Sitepoint :slight_smile:

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
4

<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

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.


#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.