Ir para o conteúdo

Foto:

Alterar imagem do mouse

Criado por Renato_Programador, 03/08

  • Por favor, faça o login para responder
19 respostas neste tópico

#1 Renato_Programador

Renato_Programador
  • Renato_Programador
  • 59 posts

Postado 03 agosto 2007 - 10:46

Ola pessoal.....

Existe a possibilidade de alterar a imagem do mouse de "seta" para o "dedo indicador" sem usar o <a href> ao passar por cima de um texto?????

Valeu pela atencao

Abraço


Renato

#2 vagner.net

vagner.net
  • vagner.net
  • Urban Legio Omnia Vincit
  • 802 posts

Postado 03 agosto 2007 - 11:05

É só alterar o style do cursor via CSS, assim:
<html>
	<head>
		<title>Ponteiro do Mouse</title>
	</head>
	<body>
		<div id="area" style="cursor:pointer; border:solid 2px #000000">
			<p>AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>			
		</div>
	</body>
</html>

OK..!!?? T+...

Movido: Javascript/DHTML :seta: Webstandards: CSS / XML / XHTML/ HTML

#3 Leonardo P

Leonardo P
  • Leonardo P
  • 344 posts

Postado 03 agosto 2007 - 11:27

lembrando que declaração de estilos in-line não é o ideal, mas a solução para alterar o cursor é essa mesmo.

#4 Renato_Programador

Renato_Programador
  • Renato_Programador
  • 59 posts

Postado 03 agosto 2007 - 12:06

isso ai pessoal!!!!!!!!!!

Muito obrigado!!!!!!!!!!!!!!!

Abraço

Renato

#5 vitor_prado

vitor_prado
  • vitor_prado
  • 8 posts

Postado 04 agosto 2007 - 02:43

Olá gente,

Permita-me a intromissão, mas, o certo não seria:

<html>
	<head>
		<title>Ponteiro do Mouse</title>
	</head>
	<body>
		<div id="area" style="border:solid 2px #000000">
			<p style="cursor:pointer;">AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
			<p style="cursor:pointer;">AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
		   <p style="cursor:pointer;">AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
			<p style="cursor:pointer;">AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
			 <p style="cursor:pointer;">AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
			 <p style="cursor:pointer;">AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>		  
		</div>
	</body>
</html>


Ou melhor:

<html>
	<head>
	<style type="text/css">
	#area  {
		border:2px solid #000000;
	}
	#area p {
		cursor:pointer;
	}
	</style>
		<title>Ponteiro do Mouse</title>
	</head>
	<body>
		<div id="area">
			<p>AQUI O PONTEIRO DO MOUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>
			<p>AQUI O PONTEIRO DO MAUSE SERÁ TROCADO</p>			
		</div>
	</body>
</html>

Assim o ponteiro só apareceria mesmo quando o mouse passasse por cima das tags <p> dentro do div com id = area.

Abraços gente....

#6 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Desenvolvedor Web(standards)
  • 2.329 posts

Postado 04 agosto 2007 - 07:08

Olá gente,

Permita-me a intromissão, mas, o certo não seria: (...)

O certo na verdade seria não alterar o ponteiro do mouse nessa situação... Mas por que Paulo? Oras, o ponteiro do mouse quando vira "mãozinha" indica que aquilo ali tem uma ligação com algum outro elemento, seja na mesma página (âncoras) ou externa... Qual a finalidade de se alterar esse ponteiro se o objeto não será "clicável"? Estará induzindo os internautas a clicarem onde não há nada clicável...

Mas tudo bem, como sempre digo: se foi feita uma pergunta, a(s) resposta(s) está(ão) acima, mas fica aqui meu comentário a respeito...

Abraço!

#7 Renato_Programador

Renato_Programador
  • Renato_Programador
  • 59 posts

Postado 04 agosto 2007 - 11:24

Ola Paulo...

A intensao dessa pergunta seria para usar o evento onclik em uma <tr> inteira e nao o <a href>, onde ao clicar em qualquer parte da <tr> ira para um outro link.

Referente ao evento onclik já tinha resolvido o problema, mas o usuario passava com o mouse na <tr> e nao sabia que ali era um link, pois o mouse nao virava "pointer"


Abraço

Renato

#8 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Desenvolvedor Web(standards)
  • 2.329 posts

Postado 04 agosto 2007 - 11:50

Mas meu caro Renato_Programador, se será clicável, qual o real motivo por não querer utilizar a tag <a>, já que ela existe justamente para isso? :mellow:

Entendi que você quer que a célula inteira seja clicável (sim, é a célula, porque linha de tabela (<tr> = table row) deve conter uma célula antes de ter um link... Isso entra mais em questão da hierarquia, por exemplo: quando usamos a tag <table>, qual é a próxima? <tr>! E depois da <tr>, qual é a tag que vem? <td>! Aí dentro de uma <td> podemos colocar um link, uma imagem, um parágrafo... Compreende?

Você também disse:

(...) mas o usuario passava com o mouse na <tr> e nao sabia que ali era um link, pois o mouse nao virava "pointer"

Mas é lógico que ele não sabia que ali era um link, porque você não colocou um link ali! Mais uma vez reforço a questão da semântica: links devem ser feitos com uso da tag <a>. Ponto final! O que você quer fazer é "simular" um link... Mas até agora nõ entendi o porque disso...

Agora, se você quer que uma célula inteira seja clicável, procure saber mais sobre a propriedade display: block juntamente com width e height que você consegue fazer com que qualquer região da sua célula seja clicável...

Abraço!

#9 leonardonobre

leonardonobre
  • leonardonobre
  • 352 posts

Postado 04 agosto 2007 - 16:46

Caro Renato_programador,
só continuando o que o Paulo de Tarso falou, para se utilizar o display:block é simples. Eles usam uma lista não numerada com estilo para não aparecer os pontos de marcação de uma lista. Veja abaixo:


.menu ul
{
list-style:none;
}

.menu
{
margin:0px;
padding:0px;
}

.menu li a:link
{
 /*Aqui você faz a formatação do 'li' na lista não numerada.*/
display:block;
text-decoration:underline;
}

.menu li a:hover
{
display:block;
text-decoration:underline;
}
[/doce]


[code]
<table width=150 class=menu>
<tr><td>	
<ul>   
<li> <a href='link_externo.html'> Este é o primeiro link</a> &nbsp;&nbsp;&nbsp;
   <li> <a href='link_externo.html'> Este é o segundo link</a> &nbsp;&nbsp;&nbsp;
<ul>
</td></tr></table>

#10 Renato_Programador

Renato_Programador
  • Renato_Programador
  • 59 posts

Postado 04 agosto 2007 - 18:22

ola Leonardo e Paulo!!!!!

Primeiramente agradeco por me explicarem o uso <a>.... com certeza estarei usando isso em meus projetos!!!!

O problema é o seguinte, vou tentar explicar o motivo pelo qual nao posso usar o <a href>, afinal posso estar equivocado:

Tenho uma pagina que cria barra re rolagem vertical, e no final da pagina tem um menu, até ai sem problemas.

Esse menu abri uma DIV via ajax de baixo da linha de onde foi clicado.

Se eu usar o a funcao AJAX dentro do <a href> ele volta a pagina para o topo, parecendo que dei um submit

Sendo que se eu nao usar o <a href> e colocar a funcao ajax dentro do evento onclick da <tr> ele abre a DIV sem a pagina voltar para o topo.

Nao coloco o evento o onclick nas <td> pois sao varias colunas e teria que repetir o codigos onclick em cada uma delas.

Não sei se estou certo, mas pelo menos desse jeito a minha pagina ficou melhor, pois quando o usario passa por cima da <tr > sabe que ali tem um link pois o mouse vira "pointer", quando ele clica na <tr> abre a DIV sem a tela ir para o topo, e nao repeti a funcao em AJAX aque abre a DIV em todas as <td>.

Espero ter sido claro, e mais uma vez agradeco o interesse de vcs.

Se possivel gostaria de saber se a minha logica está certa

abraço


Renato

#11 leonardonobre

leonardonobre
  • leonardonobre
  • 352 posts

Postado 06 agosto 2007 - 10:11

Caro Renato_Programador,
um palhativo seria você criar uma ancora junto do link, junto com o seu onclick, para o link não fazer o usuário subir até o topo da página.

<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>

<a href='' name='ancora'></a>
<a href='#ancora' OnClick='funcao();'>Meu link</a>

Tenta isso.
Abraços,
Léo

#12 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Desenvolvedor Web(standards)
  • 2.329 posts

Postado 06 agosto 2007 - 10:58

Um monte de <br>? Ainda acham que isso é uma solução? Não acredito nisso... <_<

#13 Renato_Programador

Renato_Programador
  • Renato_Programador
  • 59 posts

Postado 07 agosto 2007 - 10:09

Ola pessoal.....

Realmente um monte de <br> nao é solucao mais adequada.

Mas vejo outra forma de clicar na pagina e essa nao subir ao topo, nao sendo como descrevi acima

Abraço


Renato

#14 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Desenvolvedor Web(standards)
  • 2.329 posts

Postado 07 agosto 2007 - 10:57

Mas vejo outra forma de clicar na pagina e essa nao subir ao topo, nao sendo como descrevi acima

Ah é Renato_Programador? E como seria isso? Poderia nos dizer? :assobiando:

#15 Renato_Programador

Renato_Programador
  • Renato_Programador
  • 59 posts

Postado 07 agosto 2007 - 11:09

Desculpa Paulo de Tarso F. M.,

me expressei errado....

retificando a minha msg anterior:
Mas NAO vejo outra forma de clicar na pagina e essa nao subir ao topo, nao sendo como descrevi acima

Abraço

Renato

#16 tygo

tygo
  • tygo
  • Tigo Di / Tiago Dias
  • 274 posts

Postado 08 agosto 2007 - 00:24

Tendo a âncora por perto ( como o leonardonobre mostrou mas sem br's é claro ) ou no próprio elemento "a" a página não irá para o topo:

<a href="#id-desse-link"  onclick="sua_funcao()"  id="id-desse-link" ></a>

// a âncora pode ser feita para atributo id ou name: http://www.w3.org/TR...anchors-with-id

#17 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Desenvolvedor Web(standards)
  • 2.329 posts

Postado 08 agosto 2007 - 09:45

Mas vale lembrar que a página irá se "deslocar" até a âncora... Imagine que se sua âncora está bem no meio da página no sentido vertical, mesmo que o link esteja da mesma forma que nosso amigo tygo citou, ao clicar, a página irá se deslocar até a âncora, ficando esta posicionada no topo do browser...

Compreende? Ou ficou meio esquisito? :assobiando:

Veja esse exemplo que fiz rapidinho...

#18 leonardonobre

leonardonobre
  • leonardonobre
  • 352 posts

Postado 10 agosto 2007 - 09:38

Caros,
a tag <br>, foi somente para mostrar a distância para mostrar a ancora, não que alguns <br> seja solução de alguma coisa. Por favor nê gente, cabeça não é só p/ colocar chapeu. Isso foi o que achei para tentar mostrar uma possível solução da questão.

Abraços,
Léo

#19 Paulo de Tarso F. M.

Paulo de Tarso F. M.
  • Paulo de Tarso F. M.
  • Desenvolvedor Web(standards)
  • 2.329 posts

Postado 10 agosto 2007 - 10:57

Mas a questão meu caro leonardonobre é que muitas pessoas não conhecem as Webstandards e "estão chegando" agora, então, para evitar que essas pessoas aprendam da maneira errada, mesmo que sejam apenas exemplos, devemos sempre colocar exemplos válidos... Oras, se você já desenvolve da maneira correta, por que não desenvolver o exemplo também da maneira correta?

Por isso levantamos essa questão, estamos visando um público alvo em geral, que consiste desde pessoas bem experientes na área e também aqueles que aprenderam ontem como se constrói um site utilizando uma linguagem de marcação que foi apresentado a eles como HTML e ele resolveu digitar no Google essa tal palavra para encontrar apostilas e tutoriais, no qual acabou encontrando o link do site do Fórum do iMasters e resolveu "fuçar" um pouco...

Compreende a complexidade do sistema? :assobiando:

Abraço!

#20 Allan Oliveira

Allan Oliveira
  • Allan Oliveira
  • 1 posts

Postado 13 agosto 2007 - 16:06

O Renato ta certo, usa DHTML e esquece essa coisa de <a> se tratando de menus o DHTML é melhor de se usar do que links, âncoras, <br>'s e etc... vcs só estão confundindo mais ainda as coisas...
Voltar para CSS / XML / XHTML / HTML


1 usuário(s) está(ão) lendo este tópico

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Últimas Notícias no Portal iMasters

Para IBM, 1,5 bilhão de pessoas usa redes sociais regularmente

Relatório da empresa prevê que, nos próximos dois anos, aproximadamente 70% das organizações irão aumentar os investimentos em tecnologias móveis.

Ver mais notícias