How to enlarge image on mouseover in gridview

40 New Member

hi;

Im using a gridview to display images in 1 of the column...but the size of the images is very small.is there anyway to enlarge the image on mouseover or even without mouseover by adjusting the column width or something.i would prefer doing it by mouseover.can anybody help me...my code is below

Expand|Select|Wrap|Line Numbers

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="news_evnts.aspx.cs" Inherits="news_evnts" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Prison Department, Goa</title>

    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
 
    <script language="javascript" type="text/javascript">

    function txtChk(){txtChanged('u'); txtChanged('p');}

        function txtChanged(s){if(s=='u'){if(document.getElementById("txtEmail").value=="" || document.getElementById("txtEmail").value=="Login Id"){document.getElementById("txtEmail").value="Login Id";    document.getElementById("txtEmail").style.color="#aca899";}}

        else if (s=='p') {if(document.getElementById("txtPass").value=="" || document.getElementById("txtPass").value=="Password"){document.getElementById("txtPass").value="Password";document.getElementById("txtPass").style.color="#aca899";}}}

        function txtClick(s){if(s=='u'){if(document.getElementById("txtEmail").value=="Login Id"){    document.getElementById("txtEmail").value="";document.getElementById("txtEmail").style.color="#000000";    }}

        else if(s=='p'){if(document.getElementById("txtPass").value=="Password"){    document.getElementById("txtPass").value="";document.getElementById("txtPass").style.color="#808080";}}}
 
            var lastColorUsed, colUsed;
 
            function dg_changeBackColor(row, highlight)

            {

                if (highlight)

                {

                    lastColorUsed = row.style.backgroundColor;

                    colUsed =  row.style.color;
 
                    row.style.backgroundColor ='DimGray';//"#F7F7F7";// 'papayawhip';

                    row.style.color = 'Blue';

                    row.style.cursor='hand';

                }

                else

                {            

                    row.style.backgroundColor = lastColorUsed;

                    row.style.color = colUsed;

                }

            }
 
            function stopPost()

            {

                return false;

            }
 
    </script>
 
    <script language="JavaScript" type="text/javascript">

            var newBg;

            function changeHl(strId)

            {

               newBg = "images/HlImg/"+strId+".jpg";

               document.getElementById("imgHL").src = newBg;          

            }

            function setURL()

            {

           var param = "height="+screen.height+",width="+screen.width+",resizable=yes,status=yes,toolbar=no,menubar=no,screenX=0,screenY=0,left=0,top=0";

               var s =  document.getElementById("ctl00_txtFilePath").value ;    

              window.open(s,"citizenchart",param);
 
            }

    </script>
 
</head>

<body>

    <form id="mst" runat="server">

        <div id="wrapper">

            <div id="header">

                <div style="color: #FFFFFF; font-family: 'Maiandra GD', 'Trebuchet MS', Tahoma, Verdana;">

                    <table id="tbl" width="100%">

                        <tr>

                            <td align="center" style="width: 145px">

                                <img src="images/bg_charity1.jpg" alt="gov" style="width: 76px; height: 84px" /></td>

                            <td>

                                <div style="font-size: 24px;">

                                    Inspector General of Prisons</div>

                                <div style="font-size: 16px;">

                                    Government of Goa</div>

                            </td>

                        </tr>

                    </table>

                </div>

                <div id="navlist">

                    <ul id="Ul1">

                        <li><a id="hm" runat="server" href="index.aspx">Home</a></li>

                        <%--<li><a id="hm" href="index.html">Home</a></li>--%>

                        <li><a id="au" runat="server" href="AboutUs.aspx">About Us</a></li>

                        <li><a id="am" runat="server" href="Amenities.aspx">Amenities</a></li>

                        <li><a id="ne" runat="server" href="news_evnts.aspx">News & Events</a></li>

                        <li><a id="pr" runat="server" href="jailproducts.aspx">Products</a></li>

                        <li><a id="rti" runat="server" href="rghtoinfrmtn.aspx">R. T. I.</a></li>

                        <li><a id="cc" runat="server" href="remission.aspx">Remission</a></li>

                        <li><a id="fb" runat="server" href="Default2.aspx">Feedback</a></li>

                        <li><a id="cu" runat="server" href="contact.aspx">Contact Us</a></li>

                    </ul>

                </div>

            </div>

            <div id="headline">

                <div id="photo">

                    <div>

                        <img src="images/igp.gif" width="618" height="250" alt="Pic 1" />

                    </div>

                </div>

                <div id="search-news" style="height: 248px">

                    <h2 class="downcast">

                        Quick Links</h2>

                    <br />

                    <div id="plussbullets">

                        <asp:HiddenField ID="txtFilePath" runat="server" />

                        <%--    <asp:TextBox ID="txtFilePath" runat="server" Width="71px"  ></asp:TextBox>--%>

                        <ul>

                            <%--  <li> <asp:LinkButton ID="lbStats" runat="server" OnClick="stats_Click" >Prison Statistics</asp:LinkButton></li>--%>

                            <%--<li><asp:HyperLink ID="HyperLink1" runat="server"  OnClick="stats_Click">Prison Statistics</asp:HyperLink></li>--%>

                            <%-- <li><a href="" onclick="stats_Click">

                              Prison Statistics  </a></li>--%>

                            <li><a id="A1" href="" runat="server" onclick="setURL();" target="_blank">Prison Statistics</a></li>

                            <li><a href="rightsandduties.aspx">Rights & Duties of Prisoners</a></li>

                            <li><a href="reformation.aspx">Jail Reformation</a></li>

                            <li><a href="Citizen_new.pdf" target="_blank">Citizen's Charter</a></li>

                            <li><a href="listaddoff.aspx">List of area wise offices and Judicial Lock-Ups</a></li>

                            <li><a href="orgchart.aspx">Organisational Setup</a></li>

                        </ul>

                    </div>

                </div>

                <div class="clear">

                </div>

            </div>

            <div id="body">

                <div class="info">

                    News and Events</div>

                <br />

                <div id="body-left">

                    <div style="height: 270px; width: 163px; overflow: Auto">

                        <asp:DataList ID="dlEvents" runat="server" Width="90%" GridLines="both" CellPadding="5"

                            OnItemCommand="getSelected" DataKeyField="prison_event_title">

                            <%--OnItemDataBound="ItemDataBound"OnSelectedIndexChanged="SelectedIndexChanged"--%>

                            <HeaderStyle BackColor="#5C5C5C" BorderColor="#859D31" BorderStyle="solid" BorderWidth="1px"

                                Font-Names="Tahoma, Verdana, sans-serif" Font-Bold="true" Font-Size="11px" ForeColor="white" />

                            <SelectedItemStyle BackColor="white" ForeColor="#99A866" />

                            <HeaderTemplate>

                                Titles

                            </HeaderTemplate>

                            <ItemTemplate>

                                <asp:LinkButton ID="Linkbutton1" runat="server" CommandName="select" Text='<%# Bind("prison_event_title") %>' />

                            </ItemTemplate>

                            <ItemStyle BackColor="white" ForeColor="#99A866" />

                        </asp:DataList>

                    </div>

                </div>

                <div id="body-right" style="width: 351px">

                    <%-- <asp:DataList ID="dlEvntImages" runat="server" Visible="false">
 
                        <ItemTemplate>

                    <asp:Image runat="server" ID="evntImage">

                        </asp:Image>
 
                            <asp:Label ID="lblMsg" runat="server"  Text='<%# Bind("prison_eventDtl_description") %>'></asp:Label>

                               <asp:Label ID="lblId" runat="server" Visible="false" Text='<%# Bind("prison_event_id") %>'></asp:Label>

                                  <asp:Label ID="lblKey" runat="server" Visible="false" Text='<%# Bind("prison_eventDtl_srno") %>'></asp:Label>

                    </ItemTemplate>

                    </asp:DataList>--%>

                    <table id="tblEvntDetails" runat="server" border="1" visible="false">

                        <tr>

                            <td>

                            </td>

                            <td>

                                <div style="height: 200px; overflow: auto;">

                                    <asp:GridView ID="gvDocuments" runat="server" HorizontalAlign="Left" Width="98%"

                                        EmptyDataText="No records found" AutoGenerateColumns="False" BackColor="White"

                                        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="1" ForeColor="Black"

                                        Height="18px">

                                        <Columns>

                                            <asp:TemplateField HeaderText="Event Id" Visible="False">

                                                <ItemTemplate>

                                                    <asp:Label ID="gvLblId" runat="server" Text='<%# Bind("prison_event_id") %>'></asp:Label>

                                                </ItemTemplate>

                                            </asp:TemplateField>

                                            <asp:TemplateField HeaderText="Image Id" Visible="False">

                                                <ItemTemplate>

                                                    <asp:Label ID="gvLblSrNo" runat="server" Text='<%# Bind("prison_eventDtl_srno") %>'></asp:Label>

                                                </ItemTemplate>

                                            </asp:TemplateField>

                                            <asp:TemplateField HeaderText="Image">

                                                <ItemTemplate>

                                                    <asp:Image ID="Image1" Height="40" Width="40" runat="server" ImageUrl='<%# "~/ASHX/ImageHandler.ashx?__KEY="+ Eval("prison_event_id")+"&__imgId="+Eval("prison_eventDtl_srno") %>' />

                                                </ItemTemplate>

                                                <HeaderStyle HorizontalAlign="Center" />

                                                <ItemStyle Height="200px" Width="200px" />

                                            </asp:TemplateField>

                                            <asp:TemplateField HeaderText="Description">

                                                <ItemTemplate>

                                                    <asp:Label ID="lblDesc" runat="server" Text='<%# Bind("prison_eventDtl_description") %>'

                                                        Width="200px"></asp:Label>

                                                </ItemTemplate>

                                                <HeaderStyle HorizontalAlign="Center" />

                                                <ItemStyle Height="200px" Width="400px" />

                                            </asp:TemplateField>

                                        </Columns>

                                        <FooterStyle BackColor="#CCCC99" ForeColor="Black" />

                                        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />

                                        <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />

                                        <AlternatingRowStyle BackColor="White" />

                                        <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />

                                    </asp:GridView>

                                </div>

                            </td>

                        </tr>

                        <tr>

                            <td colspan="1">

                                <asp:Label ID="lblTitle" runat="server" Text="Title" Visible="false" Font-Bold="true"></asp:Label></td>

                            <td colspan="3">

                                <asp:Label ID="lblEvntTitle" runat="server" Text='<%# Eval("prison_event_title") %>'

                                    Visible="false"></asp:Label></td>

                        </tr>

                        <tr>

                            <td>

                                <asp:Label ID="lblEvntId" runat="server" Text='<%# Eval("prison_event_id") %>' Visible="false"></asp:Label></td>

                        </tr>

                        <tr>

                            <td colspan="1">

                                <asp:Label ID="lblDate" runat="server" Text="Date" Visible="false" Font-Bold="true"></asp:Label></td>

                            <td colspan="4">

                                <asp:Label ID="lblEvntDate" runat="server" Text='<%# Eval("prison_event_date") %>'

                                    Visible="false"></asp:Label></td>

                        </tr>

                        <tr>

                            <td colspan="1">

                                <asp:Label ID="lblVenue" runat="server" Text="Venue" Visible="false" Font-Bold="true"></asp:Label></td>

                            <td colspan="4">

                                <asp:Label ID="lblEvntVenue" runat="server" Text='<%# Eval("prison_event_venue") %>'

                                    Visible="false"></asp:Label></td>

                        </tr>

                        <tr>

                            <td colspan="1">

                                <asp:Label ID="lblDesc" runat="server" Text="Description" Visible="false" Font-Bold="true"></asp:Label></td>

                            <td colspan="4">

                                <div style="height: 50px; overflow: auto;">

                                    <asp:Label ID="lblEvntDesc" runat="server" Text='<%# Eval("prison_event_description") %>'></asp:Label>

                                    <%--<asp:TextBox ID="txtEvntDesc" runat="server" Text='<%# Eval("prison_event_description") %>'

                                    ReadOnly="true" Visible="false"></asp:TextBox>--%>

                                </div>

                            </td>

                        </tr>

                    </table>

                </div>

            </div>

            &nbsp;

            <p>

            </p>

            <div class="clear">

            </div>

        </div>

        <div id="footer">

            <p>

                &copy; 2009 all rights reserved.</p>

            <p>

                Developed &amp; Maintained by Goa Electronics Limited

            </p>

            <p>

                www.goaelectronics.co.in</p>

        </div>

    </form>

</body>

</html>

May 24 '10 #1

Subscribe Reply

4663

Frinavale

9,735

Recognized Expert Moderator Expert

No where in your code (that I can see) do you have any JavaScript that handles the mouseover event. You need to implement a method that does so.

If you don't want the image resize to have an effect on your column width then, in the method that handles the mouseover event for the image, set the image's position to "absolute". This will remove the image from the natural flow of the page so that when you resize it, the column will not be affected.

-Frinny

May 27 '10 #2

Similar topics

13457

Image: MouseOver - MouseOut - OnClick problem

by: John | last post by:

Imagine this: I have a gif-image with text, coloured green. When MouseOver occurs the gif will swap to another gif with red colourded text. On MouseOut the gif turns back to the green text. -----------------This is my code: <a href="nextpage.html" onMouseOver="document.green.src='red.gif'" onMouseOut="document.green.src='green.gif'">

HTML / CSS

38797

image mouseover->hover

by: PhilM | last post by:

Having googled myself silly, I now ask, if only to confirm my conclusions Is it possible to emulate the <javascript>mouseover in css, to replace link images with an alternate? Having asked, I now return to google, in case I missed heaps. ;) Regards, PhilM

HTML / CSS

5888

Display image in GridView

by: Tan | last post by:

Hi I am desperate for any help with display image in Gridview I have a gridview contain surname , forename ..... and image. I could not display image as my database store the column image as image not text. I have tried all sort of things like converting the columns image to tempate so on and still could display image

ASP.NET

3649

Exporting Image and GridView to Word/Excel is Impossible!

by: manmit.walia | last post by:

Hello Fellow Developers, I have a small problem that you might be able to help me with. The method that I am trying to create is the ability to export a GridView and a image to word or excel. I know that some people have already post about this topic but could not find a reliable answer. To my knowledge, I have the code down right. The GridView writes to the word document perfectly just not the image. All I get is a red 'x' image...

ASP.NET

8197

Background image in GridView header

by: staeri | last post by:

I want to display a background image in the header of my GridView but when I do that by setting HeaderImageUrl="..." the HeaderText isn't visible. It seems to me that either I can show the HeaderText and no background image or vice versa. Is there a solution? Regards,

ASP.NET

1773

Image mouseover/mouseout attributes and Theme/Skin question

by: =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post by:

Hi all, I am building a web site with theme support, under each theme's folder there are some images. Some of my images need to be skinned, I know I can build a skin file with line like <asp:Image runat="server" ImageUrl="images/email.gif" skinid="Email" BorderWidth="0" /> Then in my master page or web page I can call this skin like

ASP.NET

1466

Problem Displaying Image in gridview

by: aSoundMind | last post by:

Hello Guys, I am not sure is this a common problem. I can't display image which in a gridview to excel or word. I have not try on pdf or web but surely this annoy me. I tried to google it and the best I can found is this code which mentioned something tat it is due to excel limitation and so we need to use absolute path.

ASP.NET

1783

image mouseover problem

by: ericjiii | last post by:

Hi. A friend of mine asked me if I could look at one of his java scripts in order to get it working. Unfortunately I am stumped and was wondeirng if somebody with a bit more experience than myself can look it over and help me identify what is wrong . <script LANGUAGE="JavaScript"> <!-- Begin image10 = new Image(); var imageDir = "http://2005.rock103.com/pages/bod/thong/"; var d = new Date()

Javascript

3543

code to make enlarge image

by: sourapple77 | last post by:

hi, I'm using flash button like "zoom in" to enlarge an image from html using javaScript. How can I do this? ex. I have flash media inserted within html document and once the button inside the flash is pressed viewers can view the enlarged image from their page. thank you in advance.

Javascript

9540

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10250

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10222

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10026

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9068

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7564

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5585

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4139

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2938

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General