Neste artigo irei mostrar como visualizar uma imagem e um texto quando o mouse passar por cima de um link, dessa forma você poderá estar melhorando sua página web, a figura 1 e figura 2  mostra um exemplo de imagem e a figura 3 mostra a de um texto. No entanto tentaremos fazer um exemplo similar onde o segredo vai ser o uso de Cascading Style Sheets (ou simplesmente CSS).

 

Figura 1: Quando passa por cima do link a imagem aparece


Figura 2: Quando passa por cima do link a imagem aparece


Figura 3: Quando passa por cima do link o texto aparece


Antes de colocar a mão na massa vou explicar o que será feito quanto ao exemplo, a figura 4 mostrar a página pronta, perceba que será feito um formulário para cadastrar as informações. Quando o mouse passar por cima de qualquer seqproduto vai aparecer à foto do produto, como mostra a figura 5, agora gostaria de saber mais informações desse produto, quando passar por cima do nome produto vai aparecer um resumo, conforme a figura 6, bem interessante.


Figura 4: Cadastro de Produtos


Figura 5: Mostra foto produto


Figura 6: Mostra descrição do produto


As ferramentas utilizadas são: a Microsoft Visual Studio 2008 e SQL Server Management Studio Express, agora vamos começar, executando o script da listagem 1 que cria a tabela Produto na DataBase loja conforme figura 7, isso no SQL Server Management Studio Express.


Figura 7: DataBase Loja contendo a tabela produto


Listagem 1:

 

USE [loja]

GO

/****** Object:  Table [dbo].[Produto]    Script Date: 09/15/2009 22:13:41 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[Produto](

            [SeqProduto] [bigint] IDENTITY(1,1) NOT NULL,

            [Nome] [varchar](100) COLLATE Latin1_General_CI_AS NULL,

            [InformacaoTecnica] [varchar](max) COLLATE Latin1_General_CI_AS NULL,

            [Image] [varbinary](max) NULL,

            [Categoria] [varchar](50) COLLATE Latin1_General_CI_AS NULL,

            [Quantidade] [int] NULL,

 CONSTRAINT [PK_Produto] PRIMARY KEY CLUSTERED

(

            [SeqProduto] ASC

)WITH (PAD_INDEX  = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY]

) ON [PRIMARY]

 

GO

SET ANSI_PADDING OFF


Agora com o Microsoft Visual Studio 2008 aberto crie um projeto com o nome loja depois dentro desse projeto será montado à estrutura desse exemplo que pode ser visualizada de acordo com a figura 8.



Figura 8: Os arquivos do Solution


Bem pessoal esse projeto vai ficar disponível para download através do link..., a classe BaseAccess.cs é o arquivo que apresenta métodos que fazem a conexão com o banco e executam instruções em SQL como consulta, insert, update e delete a listagem 2 mostra com detalhes.


Listagem 2:

 

using System;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

 

 

            public class BaseAccess

    {

        SqlCommand dataCommand = new SqlCommand();

        private bool handleErrors = false;

        private string strLastError = "";

 

 

        public BaseAccess()

                        {

            SqlConnection dataConnection = new SqlConnection();

            dataConnection.ConnectionString = "Password=suasenha;Persist Security Info=True;User ID=seuusuario;Initial Catalog=loja;Data Source=DESENV\\SQLEXPRESS";

 

            dataCommand.Connection = dataConnection;

            dataCommand.CommandType = CommandType.Text;

        }

 

        public int ExecuteNonQuery()

        {

            int i = -1;

            try

            {

                Open();

                i = dataCommand.ExecuteNonQuery();

                Close();

            }

            catch (Exception ex)

            {

                if (handleErrors)

                    strLastError = ex.Message;

                else

                    throw;

            }

 

 

            return i;

        }

 

        public int ExecuteNonQuery(string commandtext)

        {

            int i = -1;

            try

            {

                dataCommand.CommandText = commandtext;

                i = ExecuteNonQuery();

            }

            catch (Exception ex)

            {

                if (handleErrors)

                    strLastError = ex.Message;

                else

                    throw;

            }

 

            return i;

        }

 

        public DataSet ExecuteDataSet()

        {

            SqlDataAdapter da = null;

            DataSet ds = null;

            try

            {

                da = new SqlDataAdapter();

                da.SelectCommand = (SqlCommand)dataCommand;

                ds = new DataSet();

                da.Fill(ds);

            }

            catch (Exception ex)

            {

                if (handleErrors)

                    strLastError = ex.Message;

                else

                    throw;

            }

 

 

            return ds;

        }

 

        public DataSet ExecuteDataSet(string commandtext)

        {

            DataSet ds = null;

            try

            {

                dataCommand.CommandText = commandtext;

                ds = ExecuteDataSet();

            }

            catch (Exception ex)

            {

                if (handleErrors)

                    strLastError = ex.Message;

                else

                    throw;

            }

 

            return ds;

        }

 

            public void AddParameter(string paramname,object paramvalue)

                        {

                                   SqlParameter param=new SqlParameter(paramname,paramvalue);

            dataCommand.Parameters.Add(param);

                        }

 

        private void Open()

        {

            dataCommand.Connection.Open();

        }

 

        private void Close()

        {

            dataCommand.Connection.Close();

        }

 

        public void Dispose()

        {

            dataCommand.Dispose();

        }

 

        public bool HandleExceptions

        {

            get

            {

                return handleErrors;

            }

            set

            {

                handleErrors = value;

            }

        }

 

        public string LastError

        {

            get

            {

                return strLastError;

            }

        }

 

        public string CommandText

        {

            get

            {

                return dataCommand.CommandText;

            }

            set

            {

                dataCommand.CommandText = value;

                dataCommand.Parameters.Clear();

            }

        }

            }


Dentro da pasta Skin vamos criar um arquivo com o nome StyleSheet.css que é o  Cascading Style Sheets – CSS que é definido pelo site da Wikipédia como: “Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.”

Então o CSS da listagem 3 vai nos auxiliar, mostrar a imagem e o texto na caixa com cantos arredondados.


Listagem 3:

 

/*-------------------------------------------------------------------------------------------

Basic Style Sheet

 

version:          1.1

author:                        seu nome

email:             seu e-mail

 

-------------------------------------------------------------------------------------------*/

 

body, form, h1, h2, h3, h4, h5, table, tr, td, p, q, div, span, fieldset, legend, label, input, select, textarea

{

            margin:0; padding:0;

}

 

/* mostra caixa com texto*/

 

a.tooltip

{

    position: relative;

}

a.tooltip div

{

    display: none;

}

a.tooltip:hover

{

    font-size: 100%; /* Fixes bug in IE5.x/Win */

}

 

 

a.tooltip:hover div

{

    display: block;

    position: absolute;

    width: 430px;

}

 

/*-------*/

 

h2 {

  font-size: 2.2em;

  font-weight: normal;

  line-height: 1;

  color: #94b767;

  margin: 0;

}

 

 

 

/* rounded corner box

================================== */

 

.box {

  width: 424px;

  background: url(images/tile2.gif) repeat-y;

}

 

.box h2 {

  background: url(images/top2.gif) no-repeat left top;

  padding-top: 20px;

}

 

.box .last {

  background: url(images/bottom2.gif) no-repeat left bottom;

  padding-bottom: 20px;

}

 

.box h2, .box p {

  padding-left: 20px;

  padding-right: 20px;

}

 

 

 

/* mostra div com imagem */

 

a.tooltip

{

    position: relative;

}

a.tooltip img

{

    display: none;

}

a.tooltip:hover

{

    font-size: 100%; /* Fixes bug in IE5.x/Win */

}

a.tooltip:hover img

{

    display: block;

    position: absolute;

    width: 100px;

    height: 120px;

    border: 1px solid #1D599E;

    color: #000;

}

 

/* --- */

 

.row:hover

{

 

}

 

/* --- */

 

/* formulário */

 

 

.clear {

  clear: both;

}

 

/*form {

  font-siz0: 1.4em;

            width: 40em;

}*/

 

 

/* fieldset styling */

fieldset {

            margin: 1em 0; /*  space out the fieldsets a little*/

            padding: 1em;

            border : 1px solid #ccc;

            background-color:#F5F5F5

}

 

/* legend styling */

legend {

            font-weight: bold;

}

 

/* style for  labels */

label {

            float: left;

            width: 10em;

}

 

 

/*#favoriteColor p {

            margin: 0.3em 0;

}*/



Agora dentro da pasta Forms criar uma página .aspx com o nome Default.aspx que vai apresentar a parte visual da página com os TextBox, label, Button e GridView e que é acompanhado com o Default.aspx.cs onde conterá o código da página. A listagem 4 mostra como vai ficar a parte visual e a listagem 5 mostra a lógica da página.

Listagem 4:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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 runat="server">
    <title>Loja</title>
    <link href="../Skin/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset>
            <legend>Cadastro de Produto </legend>
            <p>
                <label for="txtNome">
                    Nome:</label>
                <asp:TextBox ID="txtNome" CssClass="input" runat="server"></asp:TextBox>
            </p>
            <p>
                <label for="txtInformacaoTecnica">
                    Informação Técnica:</label>
                <asp:TextBox ID="txtInformacaoTecnica" TextMode="MultiLine" CssClass="input" runat="server"></asp:TextBox><br />
            </p>
            <p>
                <label for="txtCategoria">
                    Categoria:</label>
                <asp:TextBox ID="txtCategoria" CssClass="input" runat="server"></asp:TextBox><br />
            </p>
            <p>
                <label for="txtQuantidade">
                    Quantidade:</label>
                <asp:TextBox ID="txtQuantidade" CssClass="input" runat="server"></asp:TextBox><br />
            </p>
            <p>
                <label for="upImage">
                    Selecione o Produto:</label>
                <asp:FileUpload ID="upImage" runat="server" />
                <asp:Label ID="UploadStatusLabel" CssClass="input" runat="server"></asp:Label>
            </p>
        </fieldset>
        <asp:Button ID="btnSave" CssClass="submit" runat="server" Text="Salvar" OnClick="btnSave_Click" />
        <asp:GridView ID="gvProdutos" runat="server" Width="100%"
            AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333"
            GridLines="None">
           
            <Columns>
                <asp:TemplateField HeaderText="SeqProduto">
                    <ItemTemplate>
                        <a target="_blank" class="tooltip">
                            <asp:Literal ID="ltSeqProduto" Text='<%# Bind("SeqProduto") %>' runat="server"></asp:Literal>
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# "Handler.ashx?SeqProduto=" + Eval("SeqProduto") %>' /><br />
                        </a>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Nome Produto">
                    <ItemTemplate>
                        <a class="tooltip">
                            <asp:Literal ID="ltNome" Text='<%# Bind("Nome") %>' runat="server"></asp:Literal>
                            <span>
                                <div class="box">
                                    <h2></h2>
                                    <p class="last">
                                        <asp:Label ID="lblInformacaoTecnica" runat="server" Text='<%# Bind("InformacaoTecnica") %>'></asp:Label>
                                        <p>
                                </div>
                            </span></a>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Categoria">
                    <ItemTemplate>
                        <table cellpadding="3" cellspacing="2">
                            <tr>
                                <td>
                                    <asp:Label ID="lblCategoria" runat="server" Text='<%# Eval("Categoria") %>'></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    </form>
</body>
</html>
 
Listagem 5:
 
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
 
    #region Object
 
    DataSet ds = new DataSet();
    BaseAccess db = new BaseAccess();
 
            #endregion
 
    #region Private Methods
 
    private void CarregaGrid()
    {
        db.CommandText = "Select * from produto";
 
        ds = db.ExecuteDataSet(db.CommandText);
 
        gvProdutos.DataSource = ds;
        gvProdutos.DataBind();
 
    }
 
    #endregion
 
    #region Event Handlers
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.CarregaGrid();
        }
    }
 
    protected void btnSave_Click(object sender, EventArgs e)
    {
        FileUpload upload = (FileUpload)btnSave.FindControl("upImage");
 
        if (upload.HasFile)
        {
            db.CommandText = " INSERT PRODUTO (Nome, InformacaoTecnica, Image, Categoria, Quantidade) ";
            db.CommandText += " VALUES (@Nome, @InformacaoTecnica, ";
            db.CommandText += " @Image, @Categoria, @Quantidade) ";
 
            db.AddParameter("@Nome", txtNome.Text);
            db.AddParameter("@InformacaoTecnica", txtInformacaoTecnica.Text);
            db.AddParameter("@Image", upload.FileBytes);
            db.AddParameter("@Categoria", txtCategoria.Text);
            db.AddParameter("@Quantidade", txtQuantidade.Text);
        }
        else
        {
            db.CommandText = " INSERT PRODUTO (Nome, InformacaoTecnica, Categoria, Quantidade) ";
            db.CommandText += " VALUES (@Nome, @InformacaoTecnica, ";
            db.CommandText += " @Categoria, @Quantidade) ";
 
            db.AddParameter("@Nome", txtNome.Text);
            db.AddParameter("@InformacaoTecnica", txtInformacaoTecnica.Text);
            db.AddParameter("@Categoria", txtCategoria.Text);
            db.AddParameter("@Quantidade", txtQuantidade.Text);
        }
 
        db.ExecuteNonQuery(db.CommandText);
 
        this.CarregaGrid();
 
    }
 
    #endregion
 
 
}
 

Perceba que a imagem ou o texto não aparecem, pois foi definido no css display: none para o elemento img e div significa que os elementos img e div não sejam, renderizados no HTML e só quando o mouse passar por cima do link a imagem ou texto vai aparecer, pois é definido nesse momento através a.tooltip:hover div para o texto e a.tooltip:hover img para mostrar a imagem do produto com o uso do display: block onde permite que os elementos img e div sejam renderizados no HTML, permitindo que sejam vistos as imagens e o texto.

Recomendo a leitura do livro Criando Páginas web com CSS, pois este livro foi onde me inspirei para fazer esse exemplo.

 
A listagem 6 consulta a imagem para ser mostrar na página default.aspx código da página Handler.ashx
 
Listagem 6:
<%@ WebHandler Language="C#" Class="Handler" %>
 
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.IO;
 
 
public class Handler : IHttpHandler {
   
   
   
    public byte[] myfoto;
 
    BaseAccess db = new BaseAccess();
   
    public void ProcessRequest (HttpContext context)
    {
        myfoto = new byte[1];
 
        Int32 pSeqProduto = Convert.ToInt32(context.Request.QueryString["SeqProduto"].ToString());
 
        DataSet ds = null;
        //Recupera a imagem do produto através do seqproduto
        db.CommandText = "Select Image from produto where seqproduto = @seqproduto";
       
        db.AddParameter("@seqproduto",pSeqProduto);
       
        ds = db.ExecuteDataSet(db.CommandText);
       
       
        foreach (DataRow ors in ds.Tables[0].Rows)
        {
            if (ds.Tables[0].Rows[0]["Image"].ToString().Trim() != string.Empty)
                myfoto = (byte[])ors[0];
        }
 
        //Caso o produto não tenha foto é atribuído uma imagem
        //com o texto "Foto não disponível"
        if (ds.Tables[0].Rows[0]["Image"].ToString() == string.Empty)
        {
 
            //Colocar i caminho da imagem
            string FinalPath = @"C:\inetpub\wwwroot\loja\Skin\images\fotonaodisponiel.gif";
 
            FileStream stream = new FileStream(FinalPath, FileMode.Open, FileAccess.Read);
            BinaryReader reader = new BinaryReader(stream);
 
            myfoto = reader.ReadBytes((int)stream.Length);
 
        }
 
        context.Response.ContentType = "Image/JPG";
        context.Response.BinaryWrite(myfoto);
          
       
       
       
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}
 
 
Um grande abraço!