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.