Imagen que cambie de gris de normal

Citar

Escrito el 17 Mar 2007 07:35 pm

Hola,

Tengo una imagen a color, y lo que quiero es que salga en blanco y negro y cuando pase el mouse por encima salga en color.

He mirado por muchas webs y no lo encuentro, lo que si he encontrado es esto:

Y luego el boton tiene este formato:

De forma que el boton es 50% opaco y cuando pasas por encima se ve bien. Pero la cuestion seria que apareciera en gris y con 50% de opacidad y cuando pasas el mouse sobre el se pusiera de color normal y sin opacidad.

Tambien encontre el codigo que hace que una imagen pase de color gris a estado normal pero de golpe sin opacidad ni nada:

Asi que tengo el codigo que pasa de gris a normal y el de opacidad pero no se como juntarlo ya lo he intentado de varias formas aemas de buscarlo ya hehco y nada llevo todo el dia

.

A ver si alguein que entienda me puede ayudar, supongo que sera una chorrada...

BOFH - código eliminado, cuando quieras poner código utiliza la etiqueta CODE

Por matriax

11 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 18 Mar 2007 02:03 am

Por lo que dices lo único que necesitas es crear una imágen el doble de larga de lo que sea la original, en la parte superior colocas la imágen en blanco y negro, y en la inferior a color, después le asignas con el css el background normal con esa imágen de fondo en la posición top, y cuando esté en el estado hover, que sea en la posición bottom.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 18 Mar 2007 10:52 am

Código :

A los que me han quitado el codigo, me parece totalmente correcto, pero si se han tomado molestias para editarlo, para eliminarlo hay que seleccionarlo y darle a suprimir... tan dificil era darle al boton "code" en lugar de suprimir cuanto el texto estaba seleccionado?. Hay cosas que nunca entendere de los moderadores.

Bueno Johnny gracias por contestar primero.

Yo solo se html y php, de css lo basico para los links de enlaces, fondos , o estilos de tabla mas alla nada. Asi que lo que dices me suena a chino. Y lo que digo es de hacerlo solo con 1 imagen. Se que se puede porque con anterioridad he visto ese efecto en otras webs, pero como siempre ahora que lo buscas no lo encuentras.

Vuelvo a pegar ahora si con la etiqueta code a lo que me referia:

Este escript lo que hace es que el boton sale coon 50% menos de opacidad y cuando el mouse pasa por encima de el este vuleve a su estado normal, y cuando el mouse se va se desvanece un poco.

Código :

<!-- SCRIPT BOTONES QUE SE DESVANECEN  -->
<script language="JavaScript1.2">
function high(which2)
{
theobject=which2;
highlighting=setInterval("highlightit(theobject)",50);
   
}
function low(which2)
{
clearInterval(highlighting);
which2.filters.alpha.opacity=50;
}
function highlightit(cur2)
{
if(cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if(window.highlighting)
clearInterval(highlighting)
}
</script>
<!-- SCRIPT BOTONES QUE SE DESVANECEN  -->

Formato botones:
<img src="bot_pixels_on.png"  border="0"  id="im" onmouseover="high(this)" onmouseout="low(this)" width="123" height="24">

A continuacion esta el codigo que hace que un boton salga en gris y cuando pases el mouse por encima se vuelva a stado normal(por estado normal me refiero a la imagen grabada en el .png.

Código :

<style>
img
{
filter:gray()
}
</style>

<script type="text/javascript">
function color()
{
myImage.style.filter=false
}

function gray()
{
myImage.style.filter="gray()"
}

</script>

Y a continuacion el codigo del boton:

Código :

<img id="myImage" border="0" src="bot_pixels_on.png" onmouseover="color()" onmouseout="gray()"  />

-------------------------------------------------------------------

Como veis tengo el codigo que desvanece y el de color gris. La pregunta es si habria alguna manera de combinarlos o de si alguien tiene a mano el codigo que ando buscando.

Lo que quiero es eso que el boton este en color grisaceo con 50% de opacidad y cuando el mouse pase por encima recupere su opacidad natural y su color de la misma forma que en el script.

Saludos y gracias!

Por matriax

11 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 18 Mar 2007 01:21 pm

matriax escribió:

Código :

A los que me han quitado el codigo, me parece totalmente correcto, pero si se han tomado molestias para editarlo, para eliminarlo hay que seleccionarlo y darle a suprimir... tan dificil era darle al boton "code" en lugar de suprimir cuanto el texto estaba seleccionado?. Hay cosas que nunca entendere de los moderadores.

No te enfades, lo hacen para que no se te olvide la próxima vez... :wink:

He estado viendo tu código, y se basa en los filtros de Internet Explorer, lo cual no es nada recomendable, ya que no te funcionará en el resto de navegadores, mejor que deseches esa opción y lo hagas con CSS.
Haz la imágen como te dije preferiblemente en PNG, y dale la transparencia en alfa a la misma imágen, así no tienes que hacerlo por scripts.
Una vez que la tengas te correspondería este código:

Código :

ul li a{background:transparent url(tu-imagen.png) no-repeat center top;}
ul li a:hover{background-position:bottom;}

Doy por hecho que es para botones y estarán dentro de un menú, en donde la estructura en XHTML sería así:

Código :

<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
</ul>

El resto de cosas que afectan al menú ya es de CSS básico (poner el menú en vertical o como una barra horizontal, alineados, etc...)
Hay mucho sobre eso en este foro, además tienes los tutoriales de CSS, revisa el de Ramm sobre la creación de menús usando listas, te puede ayudar mucho.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 18 Mar 2007 07:14 pm

Hola,

Lo acabo de probar y no me aclaro. Me sale el boton pequeño, no me hace el fade y no sale gris ni nada. Me sale la imagen en pequeño, lo que ocupa la letra...

Mis botones ya llevan el texto puesto y estan dentro de una tabla, etc..

Código :

<td>
<a href="3d.htm"> <img border="0" src="interfaz/bot_3d_off.png"></a>
</td>

Tengo 2 imagenes el "bot_3d_off.png" en gris y el "bot_3d_on.png" en color normal. En tu codigo tampoco veo nada de que haga eso de color gris y tal.

En fin, me guardare tu opcion por si no lo encuentro porque sigo sin aclararme gracias de todas formas.

Voy a ver si encuentro alguna web con lo mismo, o tutorial de como hacerlo etc...

Saludos!

Por matriax

11 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 18 Mar 2007 08:02 pm

Bueno al decirme lo de CSS pues nada me he puesto a buscar en lugar de cosas de javascript cosas en css y he encontrao algo parecido a lo que quiero:

Código :

<script type="text/javascript">

document.write("<style type='text/css'>#foto1 {visibility:hidden;}</style>");

// Asigna el efecto al ID de la imagen ¿Como hacer que afecte a mas IDS ?
function initImage() {
   imageId = 'foto1';
   image = document.getElementById(imageId);
   setOpacity(image, 0);
   image.style.visibility = "visible";
   fadeIn(imageId,0);
}


//El efecto en cuestion
function fadeIn(objId,opacity) {
   if (document.getElementById) {
      obj = document.getElementById(objId);
      if (opacity <= 100) {
         setOpacity(obj, opacity);
         opacity += 10;
         window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
      }
   }
}

// Esto es para que sirva con cualquier navegador
function setOpacity(obj, opacity) {
   opacity = (opacity == 100)?99.999:opacity;
   // IE/Win
   obj.style.filter = "alpha(opacity:"+opacity+")";
   // Safari<1.2, Konqueror
   obj.style.KHTMLOpacity = opacity/100;
   // Older Mozilla and Firefox
   obj.style.MozOpacity = opacity/100;
   // Safari 1.2, newer Firefox and Mozilla, CSS3
   obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}


</script><style type="text/css">#foto1 {visibility:hidden;}</style></head><body>

<p>
<img border=0 style="opacity: 0.99999; visibility: visible;" src="prueba1_files/ithaka.jpg" id="foto1">
</p>

<p>
<img border=0 style="opacity: 0.99999; visibility: visible;" src="prueba1_files/splinter.bmp" id="foto2">
</p>

</body></html>

Lo que pasa es que con ese codigo hace un fade chulo entre el fondo y la imagen en cuestion valida en cualquier navegador, pero solo afecta a la "foto1" a la foto2 no le hace nada ¿Que falla?.

Esto para los botones no seria igual claro, pero tengo previsto que cuando le des a una seccion, los botones o opcines de esas seccion salgan asi con un fade, creo que quedara bien.

Y bueno a ver si esto se podria adaptar para lo que quiero, imagen en gris con 50%de opacidad y cuando pases el mouse por encima vuelva a su color normal y opacidad original.

EDIT:
Vale lo acabo de conseguir que afecte a mas ids, un poco rebuscao pero de momento funciona:

añadir esto:

Código :

function initImage2() {
   imageId2 = 'foto2';
   image = document.getElementById(imageId2);
   setOpacity(image, 0);
   image.style.visibility = "visible";
   fadeIn(imageId2,0);
}

window.onload = function() {initImage(),initImage2()}

¿Alguna forma mas facil? lo digo por no tner que añadir ese trozo de codigo para cada imagen que ueira poner, no seran muchas maximo 5 supongo pero bueno es por comprimir el codigo, y si no pues nada asi.

Saludos!

Por matriax

11 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 18 Mar 2007 08:34 pm

matriax escribió:

Bueno al decirme lo de CSS pues nada me he puesto a buscar en lugar de cosas de javascript cosas en css y he encontrao algo parecido a lo que quiero:

Código :

// Asigna el efecto al ID de la imagen ¿Como hacer que afecte a mas IDS ?
function initImage() {
   imageId = 'foto1';//por eso por lo que tu imágen segunda no va bien.

Lo que pasa es que con ese codigo hace un fade chulo entre el fondo y la imagen en cuestion valida en cualquier navegador, pero solo afecta a la "foto1" a la foto2 no le hace nada ¿Que falla?.

Esto para los botones no seria igual claro, pero tengo previsto que cuando le des a una seccion, los botones o opcines de esas seccion salgan asi con un fade, creo que quedara bien.

Y bueno a ver si esto se podria adaptar para lo que quiero, imagen en gris con 50%de opacidad y cuando pases el mouse por encima vuelva a su color normal y opacidad original.

Saludos!

Lo que te he puesto en el comentario del código.

Por otro lado, pienso que no has puesto mucho interés en lo que te he comentado, ya que no has utilizado nada de lo que he dicho y te empeñas en seguir metiendo scripts, un área en el que de momento no tengo experiencia para poder ofrecerte una ayuda eficaz, y para hacerlo me llevaría más tiempo de lo que puedo dedicarle. Si lo haces tal cual te he dicho te puede funcionar y no te quedaría mal, pero si lo que quieres es poner un efecto de fade utilizando javascript, es mejor que habras otro hilo y preguntes por ese tema en concreto, yo puedo ayudarte, pero lo que no puedo es hacer ese trabajo por tí.

En el tutorial de ramm que te he comentado antes viene perfectamente explicado, puedes cambiar las tablas por las listas, de hecho te lo recomiendo, el diseño con tablas no es nada profesional, las tablas se usan para datos tabulados y punto. Una vez lo tengas creado ya puedes aplicarle algún efecto de librerías como jQuery o mootools.

Saludos.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 18 Mar 2007 09:25 pm

Lo del imageID lo se por eso para solucionarlo he hecho eso crear otro "function initImage2() {" y bueno de momento solucionado. Creo que no has visto mi Edit.

Sobre lo de que no he puesto mucho empeño en lo que me has dicho, es que no he visto en tu codigo ninguna funcion de grey ni de opacidad, y el codigo lo unico que hacia es que a 1 link le ponia una imagen de fondo y cuando pasaba por encima cambiaba y tal...Cuando he dicho que sabia html y tal era que lo conocia no que fuera ningun experto y demas pero bueno de momento con lo que encuentro por inet y me ayudan me apaño.

Me mirare el tutorial de ramm que dices a ver lo que cuenta y si puedo sacar algo.

Sobre lo del diseño profesional y demas bueno, es una pagina la mar de sencilla con unos links, y en cada pagina unas imagenes que cuando le das se veran en tamaño real etc..

Vamos es un portfolio de mis trabajos asi simple algo de este estilo:
http://ptoing.net/

Claro esta yo lo quiero hacer algo mas vistoso como por ejemplo lo de los botones con ese efecto.

Por matriax

11 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 18 Mar 2007 11:57 pm

matriax escribió:

Sobre lo de que no he puesto mucho empeño en lo que me has dicho, es que no he visto en tu codigo ninguna funcion de grey ni de opacidad, y el codigo lo unico que hacia es que a 1 link le ponia una imagen de fondo y cuando pasaba por encima cambiaba y tal...

Johnny escribió:

He estado viendo tu código, y se basa en los filtros de Internet Explorer, lo cual no es nada recomendable, ya que no te funcionará en el resto de navegadores, mejor que deseches esa opción y lo hagas con CSS.
Haz la imágen como te dije preferiblemente en PNG, y dale la transparencia en alfa a la misma imágen, así no tienes que hacerlo por scripts.

De verdad que has puesto interés?? En serio, lee antes de responder, y si tienes dudas sobre algo, pregunta.

matriax escribió:

Me mirare el tutorial de ramm que dices a ver lo que cuenta y si puedo sacar algo.

Volvemos a lo mismo, deberías haberlo leído antes de responder.

matriax escribió:

Sobre lo del diseño profesional y demas bueno, es una pagina la mar de sencilla con unos links, y en cada pagina unas imagenes que cuando le das se veran en tamaño real etc..

No me refiero al diseño, sino al marcado de los documentos, semántica, etc...

matriax escribió:

Claro esta yo lo quiero hacer algo mas vistoso como por ejemplo lo de los botones con ese efecto.

En este momento me está pareciendo que has visto el efecto del menú y lo quieres adaptar a tu web. Mejor haz a la inversa, agarra un papel y un lápiz, hazte un boceto de la página que quieres crear, qué contenido vas a ofrecer, etc. Una vez lo tengas todo organizado es cuando debes empezar a escribir (x)html. Si lo haces de otra forma lo que obtendrás al final es una mezcla de efectos y "remiendos" de otras páginas sin un sentido específico.
En fin, casi mejor haz borrón y cuenta nueva, leete el tuto, hazlo tranquilito y cuando lo vayas a implementar preguntas las dudas.
Suerte :wink:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 19 Mar 2007 11:49 am

Hola,

Lo de que le he puesto empeño no he dicho que si, he dicho que lo he intentado, he puesto tu codigo etc... y no veo la forma de conseguir lo que quiero con eso.

Aunque estoy viendo cosas y como dices podria poner en background 1 imagen, y luego aplicar este efecto con otra imagen lo voy a probar a ver que sale, ademas de utilizar onmouseover y onmouseout y bueno a ver si funciona el experiemnto.

Lo de que he visto ese efecto y quiero adaptarlo no, ese efecto era de una simple foto que le aplicaban ese efecto.

Y sobre el diseño de la web lo tengo +o- claro.

Lo que busco de efectos son:
Botones que hagan lo que he dicho.

Luego que aparezcan unos botones de esta forma cuando les des a una opcion con el cambio de pagina.

Para las imagenes que se vean en 64x64 y que al pasar sobre ellas ponga una pequeña informacion, y al darle se amplie la imagen a tamaño real. Aunque estaria bien encontrar algo que le puedas indicar 2x 3x.... porque para estos dibujos vienen bien.

Y bueno creo que ya estaria.

Edit: Lo consegui

D hace un FadeIN y un FadeOUT, el fadeIN mas rapido que el fade out y hace un efecto en los botones muy bonito como si fuera una estela que por donde pasa el raton se ilumina.

Al final lo he hecho con un rollover y funciona tanto en firefox como IE. Asi que bueno, trankilo ya no te doy mas por culo XDDD

Saludos y gracias por tu paciencia :wink:

Por matriax

11 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Imagen que cambie de gris de normal

Escribe una respuesta rapida