Logo Hardware.com.br
hevertonhlt
hevertonhlt Membro Senior Registrado
349 Mensagens 0 Curtidas

mudando imagem por comando css.

#1 Por hevertonhlt 28/07/2006 - 11:57
Olá,
estou com um pequeno problema,
gostaria de saber como que faço para resolver esse problema em meu menu.
Gostaria de mudar a imagem do menu quando passo o mouse por cima (a imagem é uma link).

/* CSS Document */
#bt_menu a {
background-image: url(img/img_r4_c8.jpg);
left: 254px;
top: 60px;
}
#bt_menu a:hover {
background-image: url(img/img_r4_c8_2.jpg);

}

/* ASPX Document */

...



...










...

A imagem deveria aparecer.. mas ela não aparece e muito menos mostra a imagem mudando quando passo o mouse por cima!

Oq devo fazer?

Grato por sua atenção!
problema imagem link comando mudando menu css imgr4c8 backgroundimage
Responder
hutygoo
hutygoo Novo Membro Registrado
22 Mensagens 0 Curtidas
#2 Por hutygoo
28/07/2006 - 12:40
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
border: 5px solid #959D5D;
background: #170000;
width: 220px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 220px;
height: 800px;
}


#menu{
width:160px;
_width:169px; /* hack para IE */
background:#999999;
padding:1px;
border:1px inset #cccccc;
}
#menu ul{
widht:110px;
padding:6px;
margin:0;
background: #000;
border:3px outset #ffffff;
}
#menu li {
list-style: none;
padding:3px 5px;
background:#170000;
margin-bottom:2px;
font: 12px verdana, arial, helvetiva, sans-serif;
}
#menu li a {
display:block;
color: #ffffff;
text-decoration: none;
}
#menu li a:visited {
color: #ffffcc;
}
#menu li a:hover {
color: #000;
background-color:#fff;
}





  • ->MENU




    Tenta esse aqui-> Espero ter ajudado. 8)
Valeu :->
DCNunes
DCNunes General de Pijama Registrado
1.8K Mensagens 404 Curtidas
#4 Por DCNunes
29/07/2006 - 02:25
hevertonhlt, a âncora (não vou falar link pra não dar confusão) é um elemento inline, ou seja, o tamanho dele vai depender do texto que está dentro dele. Coloque algum texto aí que a imagem deve aparecer.

Mas parece que o que você está querendo na verdade é fazer uma âncora que só tenha uma imagem, e não um texto dentro, certo? Então veja o tamanho das suas imagens (vou usar 32x32 pixels no meu exemplo) e acrescente o que está de negrito:

#bt_menu a {
background-image: url(img/img_r4_c8.jpg);
left: 254px;
top: 60px;
display: block;
width: 32px;
height: 32px;
}

Não precisa acrescentar isso no #bt_menu a:hover.
observe.png Fat chance: Fructose 2.0 observe.png
david.rj.2k
david.rj.2k Membro Senior Registrado
416 Mensagens 8 Curtidas
#5 Por david.rj.2k
29/07/2006 - 04:24
Seguinte, vc terá q usar onMouseOver e onMouseOut
assim
primeiro o CSS
style.css



.classA {background: url('./img_a.png'); width:150px; height:15px; vertical-align:middle; cursor:hand;}

.classB {background: url('./img_b.png'); width:150px; height:15px; vertical-align:middle; cursor:hand;}


dps o menu
index.aspx



<td height="10" valign="top"> 

 <div id="bt_menu" onMouseOver="this.className='classA'" onMouseOut="this.className='classB'"> 

  <ul> 

   <li>

    Botão do Menu

   </li> 

  </ul> 

 </div> 

</td>


Flws! Espero ter ajudado!
Flash Websites
Desenvolvimento de sites profissionais em PHP/JS [incluído AJAX]
Parcelamos em até 3x
DCNunes
DCNunes General de Pijama Registrado
1.8K Mensagens 404 Curtidas
#6 Por DCNunes
30/07/2006 - 13:44
Não precisa de script pra isso não. smile.png Lembrei que é bom colocar o no-repeat também. Uma página completa para testar:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>



<head>

<meta http-equiv="Content-Type" content="text/html">



<style type="text/css">

.container {width: 30px}

.container a {

  display: block;

  height: 15px;

  width: 15px;

  background: url(http://forumgdh.net/images/smiles/icon_smile.gif) no-repeat;

}

.container a:hover {

  background: url(http://forumgdh.net/images/smiles/icon_biggrin.gif) no-repeat;

}

</style>

</head>



<body>

<div class="container">

<a href="https://www.hardware.com.br"></a>

<a href="http://www.opera.com"></a>

<a href="http://www.theinquirer.net"></a>

</div>

</body>

</html>
observe.png Fat chance: Fructose 2.0 observe.png
david.rj.2k
david.rj.2k Membro Senior Registrado
416 Mensagens 8 Curtidas
#7 Por david.rj.2k
31/07/2006 - 02:24
É, só que ai eu n sei c ele qr num ou c ele qr diretamente no MENU, pra clikar no MENU e pronto, dai eu n sei... enton... é só com ele pra saber XD
É bom q assim tem vários exemplos pra q c alguem buscar pode achar em vários modos de fazer, bom, um dos exemplos ele vai usar, mas talvez entre outras pessoas e usem os outros "pra n ter feito atoa".
XD

FLWS!
Flash Websites
Desenvolvimento de sites profissionais em PHP/JS [incluído AJAX]
Parcelamos em até 3x
hevertonhlt
hevertonhlt Membro Senior Registrado
349 Mensagens 0 Curtidas
#8 Por hevertonhlt
02/08/2006 - 11:46
mto obrigado pela ajuda...
mas como estava com mta pressa tive q usar javascript..

mas pelo menos agora sei como fazer em css wink.png

Em java fica assim,


<script>

<!--

function newImage(arg) {

	if (document.images) {

		rslt = new Image();

		rslt.src = arg;

		return rslt;

	}

}

userAgent = window.navigator.userAgent;

browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/&quot+1),10);

mustInitImg = true;

function initImgID() {di = document.images; if (mustInitImg && di) { for (var i=0; i<di.length; i++) { if (!di[i].id) di[i].id=di[i].name; } mustInitImg = false;}}

function findElement(n,ly) {

	d = document;

	if (browserVers < 4)		return d[n];

	if ((browserVers >= 6) && (d.getElementById)) {initImgID; return(d.getElementById(n))}; 

	var cd = ly ? ly.document : d;

	var elem = cd[n];

	if (!elem) {

		for (var i=0;i<cd.layers.length;i++) {

			elem = findElement(n,cd.layers[i]);

			if (elem) return elem;

		}

	}

	return elem;

}

function changeImages() {

	d = document;

	if (d.images) {

		var img;

		for (var i=0; i<changeImages.arguments.length; i+=2) {

			img = null;

			if (d.layers) {img = findElement(changeImages.arguments[i],0);}

			else {img = d.images[changeImages.arguments[i]];}

			if (img) {img.src = changeImages.arguments[i+1];}

		}

	}

}



// -->

</script>






<script>

<!--

var preloadFlag = false;

function preloadImages() {

	if (document.images) {

		over_principal = newImage(/*URL*/'../img/img_r4_c8_2.jpg');

		over_candidatos = newImage(/*URL*/'../img/img_r4_c12.jpg');

		over_partidos = newImage(/*URL*/'../img/img_r4_c18.jpg');

		over_eventos = newImage(/*URL*/'../img/img_r6_c8.jpg');

		over_contato = newImage(/*URL*/'../img/img_r6_c12.jpg');

		//over_contato = newImage(/*URL*/'../img/img_r6_c18.jpg');

		preloadFlag = true;

	}

}



// -->

</script>


para ativar o link: 



<a onmouseover="changeImages(/*CMP*/'candidatos',/*URL*/'img/img_r4_c12_2.jpg');return true" onmouseout="changeImages(/*CMP*/'candidatos',/*URL*/'img/img_r4_c12.jpg');return true" href="#"><img src="img/img_r4_c12.jpg" name="candidatos" border="0" height="22" width="116"></a>


abraços e mais uma vez mto obrigado!
nome: hevertoN l. tassinarI
mail: [email]hevertonhlt@gmail.com[/email]
msn: [email]hevertonhlt@hotmail.com[/email]

Ps: Não respondo MP, Somente para ADM.
Responder Tópico
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal