poner efecto a las imagenes con link

Hola

Chicos alguien me podria ayudar, resulta que genere un menu superior basicamente hecho de imagenes y les quiero dar algun efecto en el momento de seleccionarlo.

Me pueden ayudar con eso no se que codigos debo darle, he intentado con
a {color:white ; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:black ; text-decoration:zoom; background-color:none;}
a:active {}
[:(]
y con
a {color:white ; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:black ; image-decoration:zoom; background-color:none;}
a:active {}
[:(]
Gracias

Hola, revisa este enlace y dinos si es algo así lo que quieres lograr. Según lo que veo, debería cambiar el color de las letras de blanco a negro al momento de pasar el puntero (del ratón) sobre los enlaces.

Saludos.

hola, mira este es el codigo que utilizo para la div de navegacion.

<div id="navegacion">
<ul><li><a href="plantilla.html"><img alt="Quienes somos" src="objetos/fondo-li-q.png" height="23" width="130" /></a></li>
<li><a href="objetivos/objetivos.html"><img alt="Objetivos Corporativos" src="objetos/fondo-li-o.png" height="23" width="190" /></a></li>
<li><a href="pyv/pyv.html"><img alt="Principio y valores" src="objetos/fondo-li-p.png" height="23" width="160" /></a></li>
<li><a href="myv/myv.html"><img alt="Mision y vision" src="objetos/fondo-li-m.png" height="23" width="130" /></a></li>
<li><a href="actividades/actividades.html"><img alt="Actividades Generales" src="objetos/fondo-li-a.png" height="23" width="190" /></a></li>
<li><a href="experiencia/experiencia.html"><img alt="Experiencia Tecnica" src="objetos/fondo-li-e.png" height="23" width="170" /></a></li>
</ul></div>

como veras cada <li> esta generado con una imagen lo que me gustaria seria que esas imagenes se iluminaran o se asercaran, no se que tuvieran un efecto cualquiera, el caso es q se vea bn jejejejeje

Gracias

Lo mejor para eso es que en vez de colocar la imagen directamente la pongas como bg en el div de cada boton. En la imagen por ejemplo si quieres que un boton sea de 100px de ancho y 30 de alto deberaspor ejemplo hacer una imagen de 100px de ancho y 60px de alto. En esa imagen pones el estado por defecto del boton arriba y justo debajo, pegadito el estado de pasar el raton por encima. En los estilos simplemente pones que al pasar el raton por encima del enlace con este div le haces un background-position a 30 px pabajo.
Asi es como se suele hacer.

=0 jejeje creo q no entendi bn lo q me dices o bueno si entendi pero no se de que forma hacerlo jejejejeje me podrias explicar no se con plastilinita jejejejejeje

Gracias

Pues como dije creas el boton normal y el boton cuando se pasa cursor sobre el. Los dos deben tener el mismo tamano. En una misma imagen pones los 2 botones. De este modo tiene los 2 botones (uno en estado normal y el otro cuando le pasas cursor por encima) en una misma imagen que de alto tendria el doble de pixeles que 1 boton solo.
Despues en vez de poner <img> pones un div y en css le das el ancho y el alto que desees que tenga y le pones como fondo al div la imagen esa que lleva los 2 estados del boton. Despues en el mismo css pones que cuando este el raton por encima background-position: bottom;

Espero que ya te haya quedado claro.

haver me voy pasito a pasito y me dices.

Creo que entendi lo de la imagen creo una imagen que tenga las dos modalidades arriba el boton normal y abajo el que me va aparecer cuando ponga el puntero sobre elvoy bn????

bueno eso esta claro pero como hago que solo me aparesca la parte que necesito que me muestre?????? y no me muestre la imagen con los dos botones??????

disculpa mi ignorancia y gracias por la ayuda, estoy muy apenado :S

Por ejemplo, a un estado le dices background-position:bottom y al otro estado background-position:top

El primero significa que coloque el fondo alineando la parte inferior de la imagen con la parte inferior del elemento. De este modo la parte superior de la imagen no se ve, no cabe en el elemento, que da fuera (por encima) oculto.

Con el segundo estado, lo contrario, se alinea la parte superior de la imagen de fondo con la parte superior del elemento y se ve solo la mitad de arriba de la imagen.

Lo pillas?

si es lo mismo q hicimos apara el menu lateral pero como hago para que IE me muestre solo la mitad de la imag y no me habra el sector completo? y en donde debo poner el el background-position:top para q se vea el cambio, yo se el el background-position:bottom va en el estilos-general.css en el div donde pongo la imag pero el otro ni idea?

En la misma hoja de estilos has de poner ambos background-position. Uno a un estado de enlace y el otro a otro estado. Por ejemplo, uno de los background-position se lo pones al estado a:hover y el otro a los otros tres estados, link, visited y active.

Otro modo es colocarle uno de los background a la etiqueta "a" (para que sea el estado predeterminado) y el otro solo al hover.

Lo pillas?

si ahora si lo entendi muchas gracias han sido de mucha ayuda

y me gustaria molestarlos ahun mas sq quiero poner unas imagenes en mi pag pero quiero q me aparescan como en lista y q al hacer click me aparesca grande tipo google como le hago para eso?????

Disculpen la molestia

aunq entendi ahun no me funciona el priblema es q yo nos defini las imagenes como background sino como imagen normal asi q no me da q codigo debo usar?, aparte de eso el internet explorer me muestra el tamaño completo de la imagen sin importar q le diga q el div tiene un tamaño de 23px como soluciono eso?

podrias darnos la url de tu web????
asi veremos que deseas hacer, y cual es el error

saludos

sq no se como subir la pag xq no conosco dominios ni hostings gratuitos pero aqui les dejo el codigo completo q uso:

Codigo HTML
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Civilambiente S.A.S</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

</head>
<body>

<div id="global">
<!-- Inicio codigo de cabecera -->
<div id="cabecera">
<div id="logotipo"><a href="plantilla.html"><img src="objetos/logo.bmp" width="300" height="70"
alt="Civilambiente" ></a>
</div>
<div id="publicidad">Civilambiente S.A.S</div>
</div>
<div id="navegacion">
<ul><li><a href="plantilla.html"><img alt="Quienes somos" src="objetos/fondo-li-q.png" height="46" width="136" position="bottom" /></a></li><li><a href="objetivos/objetivos.html"><img alt="Objetivos Corporativos" src="objetos/fondo-li-o.png" height="23" width="136" /></a></li><li><a href="pyv/pyv.html"><img alt="Principio y valores" src="objetos/fondo-li-p.png" height="23" width="136" /></a></li><li><a href="myv/myv.html"><img alt="Mision y vision" src="objetos/fondo-li-m.png" height="23" width="136" /></a></li><li><a href="actividades/actividades.html"><img alt="Actividades Generales" src="objetos/fondo-li-a.png" height="23" width="136" /></a></li><li><a href="experiencia/experiencia.html"><img alt="Experiencia Tecnica" src="objetos/fondo-li-e.png" height="23" width="136" /></a></li>
</ul></div>
<!-- Fin del codigo de cabecera -->
<div id="contenido">
<p></p>
<h1><img src="objetos/quienes-somos.png"></h1>
<p></p>
<p>CIVILAMBIENTE S.A.S. es una organización que desarrolla actividades encaminadas a la ingeniería, buscando procesos efectivos y sostenibles en la buena ejecución de lo relacionado con la construcción de infraestructura civil y ambiental, a través del desarrollo de procesos que puedan ser de crecimiento para nuestros clientes que incluyan la evolución empresarial en todos los ámbitos, que vayan en pro de la sostenibilidad.
En este orden de ideas, realizamos actividades tales como: obras de ingeniería especialmente del área civil y ambiental, consultorías y gestión de maquinaria y equipos dentro del sector económico de la construcción.
Estamos dispuestos, a celebrar con usted, persona jurídica o natural, contratos del orden público o privado, que se encuentren dentro del régimen legal vigente, y que permitan obtener beneficios económicos, sociales y ambientales.
Cumpliendo con nuestros valores corporativos, y políticas de gestión, que están regidas bajo los conceptos de la honestidad y responsabilidad, y el buen gobierno empresarial.
</P>
</div>
<!-- Inicio codigo pie de pagina -->
<div id="pie">
<div id="pieuno">
</div>
<div id="piedos">
<ul><li><p>Derechos recervados Civilambiente S.A.S</p></li><p>Pagina Realizada Por Erick Stiven Muñoz</p></li><p>Civilambiente S.A.S</p></li></li></ul>
</div>
<div id="pietres"><a href="mailto:[correo eliminado]"><img alt="Contactanos" src="objetos/buzon.gif" height="32" width="32" ><p></p>contactanos</p></a></li>
</div>
</div>
<!-- fin codigo pie de pagina -->

</body>

Coidigo CSS
*{margin:0px; padding:0px; border:0px;}
body {background-color: #EE4000; background-image:url(objetos/fondo.png); background-repeat:repeat-Y; background-position: 264px 6px;}
p {text-align:justify; font-weight:times; margin-top:25px; margin-bottom:25px; margin-left:15px; margin-right:15px;font-face:verdana;}
h1 {font-size:1.2em; color:orange; font-weight:time-new-roman; text-decoration:none; text-align:center;}
h2 {font.size:1.1em; color:green; font-weight:bold; text-decoration:none; text-align:left; margin-top:100px; margin-left: 15px}
body{text-aling:center;}
#global {width:800px; margin:4px auto;}

#cabecera {margin-left: 262px; width:825px; height:20px;}
#logotipo {width: 280px; float:left; margin-left: 35px;}
#publicidad {width: 480px; float:right; margin-top:25px; text-align: center;}
#navegacion {Margin-left: 264px; background-color:white; width:821px; height: 23px;}
#navegacion li {float:left; list-style:none; img-position:bottom; li-position:bottom; height: 23px;}
#navegacion ul {}

#contenido {margin-left: 262px; width:auto; width:825px;}
#contenido p {padding:5px 10px 5px 10pxtext-indent:15px; margin-left: 15px; margin-right: 15px;}


#menu {width:150px; float:left; Text-align:left; margin:3px 10px 3px 10px; background-image: url(objetos/menu-curva-inferior.gif); background-position:bottom; padding-bottom:5px;}
#menu li {list-style:none; margin: 4px 8px 4px 8px;}
#menu h1 {width:150px;text-decoration:none; font-size:12px; background-image: url(objetos/menu-curva-superior.gif); padding-top:12px;}

#pie {background-image: url(objetos/forma-inferior.png); background-repeat:no-repeat; background-position:bottom; margin-left: 262px;text-align:center; height: 65px ; width: 825px;}
#pie li {list-style:none; font-size:12px;}
#pie p {text-align:left}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:565px;}
#pietres {float:left; width:80px; margin-top:30px}


a {color:white ; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:black ; text-decoration:none; background-color:none;}
a:active {}

#menu a {color:green ; text-decoration:none; display:block;}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color:green ; text-decoration:none; background-color:orange;}
#menu a:active {}

#pie a {color:black; text-decoration:none; display:block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:none; background-color:none;}
#pie a:active {color:blue}