Opacidad en imagen

flashmax · #1 (**permalink**) 02/08/2012, 19:42

Hola tengo un

Código:

<div class="menu_left_imag"></div>

que contiene una imagen la cual quiero que cuando paso el mause sobre el siguiente link oscuresca la imagen, ¿como puedo realizarlo en css con opacity?

Código:

<div  align="center" class="container">
            <ul  id="menu">
                <li>
                    <a href="link.html">
                       <span class="title">link</span>
                    </a>
                </li>
</ul>
</div>

wlinker · #2 (**permalink**) 04/08/2012, 09:53

date una vuelta por acá para que comprendas mejor lo que ocupas y puedas personalizar a tu gusto (esto por parte de css):

[URL="http://www.impressivewebs.com/css-opacity-reference/"]http://www.impressivewebs.com/css-opacity-reference/[/URL]

Y para poder controlar la parte del div con tu imagen, creo que no será únicamente con css, podrías utilizar jQuery para ese proposito:

te cargo acá el ejemplo, haber si es lo que ocupas (lo seccione para que vieras el resaltado de sintaxis de javascript, pero va todo junto en realidad, en la página se ve el trabajo:

[URL="http://daw.com.mx/fdw/hlp1-opacity/"]http://daw.com.mx/fdw/hlp1-opacity/[/URL]

Y te publico el source:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="googlebot" content="noarchive,nofollow">
<!-- Mando llamar la librería jQuery de google, puedes bajar una copia a tu server o mantener ésta: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<script type="text/javascript">

Código Javascript:

Ver original/*  Iniciaremos las propidades haste que la página 
    haya sido cargada completamente, asi evitamos problemas 
*/
$(document).ready(function () {
/*  Estoy utilizando dos links, "link_fire" y "link_unfire", son ID's ambos
    con: e.preventDefault(); deshabilito la carga de tu página "link.html"
    despues localizo tu div "menu_left_imag" y le aplico la propiedad 
    correspondiente, en este caso la opacidad va de: 0, 0.1, 0.2, etc.. 
    hasta un máx. de 1 (100%)
*/
$("#link_fire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 0.5 }); });
$("#link_unfire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 1 }); });
});

Código HTML:

Ver original</script>
</head>
<body>
<div class="menu_left_imag">
    <!-- utilizé un doodle de google para el ejemplo-->
    <img src="http://www.google.com/logos/2012/jaakonpaiva-12-hp.jpg" />
</div>
 
<div align="center" class="container">
<!-- agregue un vinculo más aparte del tuyo para ver como se puede jugar con las propiedades -->
            <ul  id="menu">
                <li>
                    <a id="link_fire" href="link.html">
                       <span class="title">link to opacity</span>
                    </a>
                </li>
                <li>
                    <a id="link_unfire" href="link.html">
                       <span class="title">link to reset opacity</span>
                    </a>
                </li>
            </ul>
</div>
</body>
</html>

flashmax · #3 (**permalink**) 04/08/2012, 12:02

Cita:

Iniciado por wlinker

date una vuelta por acá para que comprendas mejor lo que ocupas y puedas personalizar a tu gusto (esto por parte de css):

[URL="http://www.impressivewebs.com/css-opacity-reference/"]http://www.impressivewebs.com/css-opacity-reference/[/URL]

Y para poder controlar la parte del div con tu imagen, creo que no será únicamente con css, podrías utilizar jQuery para ese proposito:

te cargo acá el ejemplo, haber si es lo que ocupas (lo seccione para que vieras el resaltado de sintaxis de javascript, pero va todo junto en realidad, en la página se ve el trabajo:

[URL="http://daw.com.mx/fdw/hlp1-opacity/"]http://daw.com.mx/fdw/hlp1-opacity/[/URL]

Y te publico el source:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="googlebot" content="noarchive,nofollow">
<!-- Mando llamar la librería jQuery de google, puedes bajar una copia a tu server o mantener ésta: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<script type="text/javascript">

Código Javascript:

Ver original/*  Iniciaremos las propidades haste que la página 
    haya sido cargada completamente, asi evitamos problemas 
*/
$(document).ready(function () {
/*  Estoy utilizando dos links, "link_fire" y "link_unfire", son ID's ambos
    con: e.preventDefault(); deshabilito la carga de tu página "link.html"
    despues localizo tu div "menu_left_imag" y le aplico la propiedad 
    correspondiente, en este caso la opacidad va de: 0, 0.1, 0.2, etc.. 
    hasta un máx. de 1 (100%)
*/
$("#link_fire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 0.5 }); });
$("#link_unfire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 1 }); });
});

Código HTML:

Ver original</script>
</head>
<body>
<div class="menu_left_imag">
    <!-- utilizé un doodle de google para el ejemplo-->
    <img src="http://www.google.com/logos/2012/jaakonpaiva-12-hp.jpg" />
</div>
 
<div align="center" class="container">
<!-- agregue un vinculo más aparte del tuyo para ver como se puede jugar con las propiedades -->
            <ul  id="menu">
                <li>
                    <a id="link_fire" href="link.html">
                       <span class="title">link to opacity</span>
                    </a>
                </li>
                <li>
                    <a id="link_unfire" href="link.html">
                       <span class="title">link to reset opacity</span>
                    </a>
                </li>
            </ul>
</div>
</body>
</html>

hola . funciona bien pero yo necesito la función rollover y rollout no click . se podra hacer? saludos!

wlinker · #4 (**permalink**) 04/08/2012, 12:10

claro que se puede, reemplaza:

Código CSS:

Ver original$("#link_fire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 0.5 }); });
$("#link_unfire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 1 }); });

Por:

Código Javascript:

Ver original$("#link_fire").on('mouseenter',function(){  $(".menu_left_imag").css({ opacity: 0.5 }); });
$("#link_fire").on('mouseleave',function(){  $(".menu_left_imag").css({ opacity: 1 });  });

y eliminas el segundo li:

Código HTML:

Ver original<li>
                    <a id="link_unfire" href="link.html">
                       <span class="title">link to reset opacity</span>
                    </a>
                </li>

y si deseas que el cambio de imagen sea dinámico, osea una imagen distinta segun el link en el qe te posiciones, ocuparás modificar el script y tener algo como lo publicado acá, obviamente con algunas adaptaciones:

http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/

flashmax · #5 (**permalink**) 04/08/2012, 12:27

Gracias ahora si es lo que quería.
Una pregunta antes de finalizar para que se utiliza el e.preventDefault();

wlinker · #6 (**permalink**) 04/08/2012, 13:48

Cita:

Iniciado por flashmax

Gracias ahora si es lo que quería.
Una pregunta antes de finalizar para que se utiliza el e.preventDefault();

Evita que se cargue la url del "href" en el vínculo :) digamoslo así.. cancelas el "click" :)

¿para que sirve eso?

suele ser útil para que los buscadores indexen tus contenidos, que si no sirve bien el javascript del cliente, sea capaz de ver los contenidos, ya que... no funcionará tu efecto, tampoco cancelara ese click, entonces aunque "mal" pero será capaz de mostrarte el contenido de un vinculo.

es más o menos la razón, si te interesa deberías profundizar más en el asunto :)

saludos!