Carregar imagem sem mostrar no navegador

[TaijovuNeji 0]

Graças a ajuda do pessoal aqui do imasters.. eu consegui fazer um menu para o meu site usando onmouseover e onmouseout ...

Só que me deparei com um grande problema.. a imagem mostrada no onmouseover só é mostrada quando passa o mouse por cima da outra imagem (óbivio).. portanto essa segunda imagem soh é carregada quando acontece isso .. fazendo com que o menu trave esperando pelo carregamento da imagem..

 

Tem como eu carregar a imagem no cache do sistema da pessoa que está usando o site e só mostrar ela no onmouseover? Assim o menu não iria travar esperando para carregar as imagens que fazem a animação do menu.. pq elas já estariam carregadas no cache do sistema..

[Matias Rezende 50]

Isto se chama preloader. Pode fazer com javascript. Vou mover para lá.

 

Tópico Movido

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript

[William Bruno 1501]

Pode fazer um preloader mesmo, ou como se trata de um menu, eu indicaria usar CSS sprite:

http://imasters.com.br/artigo/6041/css/css_sprite/

 

o 'preloader', seria algo do tipo:

var img = new Image();
img.src = 'tal.jpg';

[João Vitor Ramos Tonolli 0]

carrega ela normal, e coloca style="display:none;"

é melhor usar o preloader, mas essa também é uma opção.

[TaijovuNeji 0]

Então gente... o grande problema é que eu estou fazendo isso neste menu em php:

 

// the [Home] button
   echo'<a href="http://www.dungeonmakers.com.br/portal" target="_blank"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Portal.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Portal.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Portal.gif\'"></a>';

// the [Forum] button
   echo'<a href="', $scripturl, '"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Forum.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Forum.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Forum.gif\'"></a>';

        // the [Help] button
   echo'<a href="', $scripturl, '?action=help"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Ajuda.gif"  onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Ajuda.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Ajuda.gif\'"></a>';

// Mostrar comando da LOJA.
   if ($context['allow_edit_profile'])
      echo '<a href="', $scripturl, '?action=shop"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Loja.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Loja.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Loja.gif\'"></a>';

// Mostrar comando da Galeria.
   if ($context['user']['is_logged'])
      echo '<a href="http://www.dungeonmakers.com.br/forum/index.php?action=gallery" target="_blank"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Galeria.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Galeria.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Galeria.gif\'"></a>';

// Mostrar botão do Orkut
   echo '<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=55265974" target="_blank"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Orkut.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Orkut.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Orkut.gif\'"></a>';

// the [Search] button
   echo'<a href="', $scripturl, '?action=search"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Pesquisar.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Pesquisar.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Pesquisar.gif\'"></a>';

   // Is the user allowed to administrate at all? ([admin])
   if ($context['allow_admin'])
      echo '<a href="', $scripturl, '?action=admin" ><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Admin.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Admin.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Admin.gif\'"></a>';

   // Edit Profile... [profile]
   if ($context['allow_edit_profile'])
      echo '<a href="', $scripturl, '?action=profile"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Perfil.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Perfil.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Perfil.gif\'"></a>';

   // Go to PM center... [pm]
   if ($context['user']['is_logged'] && $context['allow_pm'])
     echo '<a href="'. $scripturl. '?action=pm">'. (($context['user']['unread_messages'] <= 0) ? '<img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Correio.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Correio.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Correio.gif\'">' : '<img src="http://img403.imageshack.us/img403/5578/correiona9.gif">') . '</a>';

         // the [My Calendar] button
   if ($context['allow_calendar'])
      echo'<a href="', $scripturl, '?action=calendar"><font color="#FFFFFF">' , $txt['calendar24'] , '</font></a>';

   // the [member] list button
   if ($context['allow_memberlist'])
      echo'<a href="', $scripturl, '?action=mlist"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Membros.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Membros.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Membros.gif\'"></a>';

   // If the user is a guest, show [login] button.
   if ($context['user']['is_guest'])
      echo '<a href="', $scripturl, '?action=login"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Login.png"></a>';

   // If the user is a guest, also show [register] button.
   if ($context['user']['is_guest'])
      echo '<a href="', $scripturl, '?action=register"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Registrar.gif"></a>';

   // Otherwise, they might want to [logout]...
   if ($context['user']['is_logged'])
      echo '<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><img src="http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Sair.gif" onmouseover="this.src=\'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Sair.gif\'" onmouseout="this.src=\'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Sair.gif\'"></a>';

Não sei como integrar script java neste menu oO.. e fazer um menu em CSS seria uma boa mas não daria certo.. pq este menu é menu de forum SMF .. eu teria que modificar todo a estrutura da página ia dar muito mais trabalho Oo

 

Será que tem como integrar o preolader no código php que eu postei?

[William Bruno 1501]

Qual que é a dúvida??

var home = new Image();
home.src = 'http://i659.photobucket.com/albums/uu314/marcusroots/Topic%20Organizer%20DM/Portal.gif';
var home_over = new Image();
home_over.src = 'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Portal.gif';

e ai basta fazer para todo o resto.

 

Se você já fez o menu assim, para fazer com CSS Sprite, acho que nem daria tanto trabalho.. pois seria apenas ter que fazer a troca de bg no :hover do elemento, em vez de fazer tudo com Javascript.

[TaijovuNeji 0]

A minha dúvida é como carregar a imagem do onmouseover sem que a pessoa passe o mouse para ativar a imagem mas que ela soh apareça quando o mouse estiver encima da imagem.. pq se eu não fizer isso... o menu trava .. pq demora alguns segundos para carregar as imagens de animação do menu...

 

 

 

E infelizmente bruno... o código que tu falou acima acho que não funciona no menu que eu fiz em php Oo.. não entendi o pq do Matias ter movido o tópico pra cá sendo que o menu que eu estou com problemas é em php XD

[William Bruno 1501]

Como você fez ?

o código que eu postei, é para fazer exatamente oque você pediu, usando Javascript.

 

Isto é um preloader.

php e javascript 'rodam' em momentos diferentes.

 

você pode estar gerando o menu com php, mas é HTML, CSS e imagens que vão para o usuário. E com Javascript/CSS você tem mais controle sobre essa saída, do que com php. Provavelmente o Carlos moveu o tópico para cá, pois não é possível fazer nada semelhante ao que você pediu, usando php.

[TaijovuNeji 0]

Realmente fazer o que eu pedi em php acho impossível..

 

Mas tipo.. tem como tu dah uma olhada pra mim na página onde criei o menu? É essa a página:

http://www.sendspace.com/file/dvdsvv

 

Pq tipo.. eu não to conseguindo usar javascript em php oO

[TaijovuNeji 0]

UP

 

To precisando mesmo de ajuda nisso :(

 

Eu tentei colocar entre <script></script> mas não funcionou :unsure:

[Thiago Retondar 18]

Cara, a melhor maneira e mais fácil é fazer isso com CSS. Siga aquele tutorial de CSS Sprite que o Bruno passou. Se sentir dificuldade em fazer o efeito, olhe este screencast.

 

Se ainda preferir fazer com JavaScript, tente isso:

 

JavaScript

window.onload = function(){
	var background = new Image();
	background.src = 'http://dungeonmakers.com.br/forum/Themes/pirates_final/images/Botoes/Portal.gif';
	
	var ulMenu = document.getElementById("menu");
	var liMenu = ulMenu.getElementsByTagName("li");
	for(var i = 0; i < liMenu.length; i++){
		liMenu[i].onmouseover = function(){
			this.style.background = "url(" + background.src + ")";
		}
		liMenu[i].onmouseout = function(){
			this.style.background = "red";
		}
	}
}

HTML

<ul id="menu">
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>

CSS

ul#menu{
	width: 600px;
	height: 25px;
	background: gray;
	list-style: none;
}
ul#menu li{
	float: left;
	margin: 3px 20px;
	background: red;
}
ul#menu li a{
	color: white;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TaijovuNeji 0]

Então cara se fosse somente animação de texto eu conseguiria fazer em css.. pois para todos seriam a mesma animação... mas o menu é por imagem .. e para cada um eu teria que colocar uma imagem diferente ao passar o mouse.. eu teria que colocar uma id diferente para cada imagem para conseguir fazer isso?

 

:: Edit ::

 

Lendo isso: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

Eu descobri como fazer de cada imagem... mas não consigo integrar isso no php...

 

Cada imagem está dentro de um "echo''" .. se eu coloco uma lista... as imagens do menu ficam um embaixo do outro.. e o menu do meu site é uma imagem do lado da outra... se eu coloco id em um div para poder usar um stilo para cada imagem do menu.. o menu tbm sai fora de ordem Oo..

 

Será que alguém poderia me fazer o grande favor de baixar a página do menu: http://www.sendspace.com/file/dvdsvv

E tentar colocar um menu com preload usando javascript? Por ser php eu não to conseguindo O.o

[Thiago Retondar 18]

Mas o objetivo do CSS Sprite é de não ter várias imagens, e sim só uma! Para fazer o efeito de passar o cursor em cima e tirar, é só usar o background-position do CSS.

 

O que eu te aconselho é treinar. Faça a marcação HTML na mão, ou seja, criando o ul, li, etc. e depois aplique o CSS.

 

Quando terminar, é só fazer o PHP gerar o HTML com as mesmas tags e atributos (id, class, etc.)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif