Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: KuraraGNU en 1 Abril 2011, 10:20 am


Título: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 1 Abril 2011, 10:20 am
Buenas! Tengo un problema, en mi pagina web tengo todo para que se linkee a la hoja de codigo javascript que esta aparte, pero no me hace nada de la pagina esa, probe a hacer una funcion pero nada, basicamente lo que quiero hacer es esto:
Código
  1. document.getElementById('link').onmouseover = this.style.borderColor = "red";
Para cambiar el color del borde del div.

El link es un div y aqui esta por si preguntais el codigo donde aniado el archivo
Código
  1. <script type="text/javascript" src="Scripts/index.js"></script>

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Spider-Net en 1 Abril 2011, 10:50 am
Es porque no lo estás haciendo correctamente. No sé si es ese todo el código referente al div que quieres cambiar, pero ten en cuenta que primero dentro del archivo index.js deberías crear una función que sea la que cambie el color del borde. El evento onMouseOver deberías usarlo en el propio div, para que éste cambie de color al pasar por encima. Te digo como lo haría yo:

index.js:

Código
  1. function cambia(){
  2. 	document.getElementById("prueba").style.borderColor="red";
  3. }

Tu archivo html:

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Prueba</title>
  6. <script type="text/javascript" src="index.js"></script>
  7. </head>
  8.  
  10. <div id="prueba" style="width: 60%; border: 1px solid #2F5CB3; background-color: #CCD2EE;padding: 10px;" onmouseover="cambia();">Prueba <br /><br /><br  /></div>
  11. </body>
  12. </html>

Ese ejemplo funciona perfectamente, no tengo claro del todo si es lo que querías o no.

Un saludo.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 1 Abril 2011, 12:23 pm
Si gracias, es que me lio con el javascript, tambien lo hice creando una funcion pero luego la funcion no la usaba donde debia, por cierto, uso css asi que lo de

Código
  1. style="width: 60%; border: 1px solid #2F5CB3; background-color: #CCD2EE;padding: 10px;"

me lo ahorro, no?

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Spider-Net en 1 Abril 2011, 13:20 pm
Claro, el CSS puedes usar el que tú quieras, yo puse el style simplemente para que al hacer la prueba se notase el cambio de color, nada más. Pero por supuesto lo puedes hacer con tus propios estilos CSS, funcionará igual.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Nakp en 1 Abril 2011, 17:15 pm
no es mas facil agregar esto a la hoja de estilos?

Código
  1. #link:hover{
  2.  border-color: red;
  3. }

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Spider-Net en 1 Abril 2011, 19:52 pm
Más fácil si que es, pero es puro CSS. Yo supongo que preguntó lo del hacerlo con javascript porque igual necesita hacerlo con javascript por cualquier motivo. Pero bueno, desde  luego alternativas no faltan, también se puede puede hacer fácilmente con jQuery que tiene unos selectores de DOM más cómodos que el puro javascript. Pero bueno, ya que KuraraGNU elija la opción que más le convenga o necesite claro.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 12 Abril 2011, 14:39 pm
Buenas, gracias, me entere despues de que se podia hacer con css, es que yo no se mucho, solo lo basico y la verdad que estoy empezando a hartarme de javascript, porque cada cosa que quiero hacer no me la hace, creo que probe a poner lo que tu pusiste y no salia, no recuerdo, acabe harta, la verdad. Ahora estoy intentando poner un link que cambie una imagen y tampoco sale nada. Si alguien sabe de un manual bueno de javascript online, porque se ve que los que tengo yo no sirven. De todas formas, por si acaso, voy a poner lo que he hecho aqui:

Mi codigo HTML:
Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>montacarichi</title>
  6. <link rel="shortcut icon" href="../img/controlecuadrado.ico" type="image/ico" />
  7. <link rel="stylesheet" type="text/css" href="../css/montacarichi.css" media="screen" />
  8. <link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
  9. <script language="javascript" src="code.js"></script>
  10. </head>
  11.  
  13. <h1>Montacarichi</h1>
  14. <p></p>
  15. <p></p>
  16. <div id="capa1">
  17. <img id="imagenGaleria2" class="borde" src="montacarichi/montacarichicopia.jpg" name="Imagen1" />
  18. <img id="imagenGaleria" src="montacarichi/montacarichi1copia.jpg" name="Imagen2" />
  19. <img id="imagenGaleria" src="montacarichi/montacarichi2copia.jpg" name="Imagen3" /></div>
  20. <div id="anterior"><a href="#" onclick="change();">&lt;&lt; </a></div>
  21. <div id="posterior" ><a href="#" onClick="change();">&gt;&gt;</a></div>
  22. </body>
  23. </html>

Mi javascript:
Código
  1. var cont = 0;
  2.  
  3. function change()
  4. {
  5.         if(cont==0)
  6.         {     
  7. 	        document.getElementById("imagengaleria2").src = "montacarichi/montacarichi3copia.jpg";
  8.                 document.imagen2.src="montacarichi/montacarichi4copia.jpg";
  9.                 document.imagen3.src="montacarichi/montacarichi5copia.jpg";
  10.                 cont=1;
  11.         }
  12.  
  13.         else
  14.         {
  15.                 imagen1.src="montacarichi/montacarichicopia.jpg";
  16.                 imagen2.src="montacarichi/montacarichi1copia.jpg";
  17.                 imagen3.src="montacarichi/montacarichi2copia.jpg";
  18.                 cont=0;
  19.         }
  20. }

Bueno, lo he puesto de varias formas a ver si el problema era la forma de acceder al elemento, pero nada. :(

Por si acaso, os digo, el documento code.js esta en la misma carpeta que el index.html y en esa carpeta esta la carpeta llama montacarichi, asi que por problemas de link no creo que sea.

P.D: He solucionado lo del click :D Os quiero ^-^
:* :* :* :* :* :*

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Spider-Net en 12 Abril 2011, 16:06 pm
Has solucionado lo de la imagen al final?, es que no me ha quedado claro si lo solucionaste.

Yo te recomiendo los libros que leí yo:

Libro javascript (http://librosweb.es/javascript/index.html)

Libro AJAX (http://librosweb.es/ajax/index.html)

Son gratuitos y bastante completos. Luego puedes complementar con jQuery, yo te lo recomiendo encarecidamente, porque te ahorrará mucho trabajo.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 14 Abril 2011, 10:07 am
ìGracias! Si, lo tengo todo solucionado ^-^ Si me pasa algo lo vuelvo a escribir en este post XD que me siento ya como en casa en el. Los libros son los que yo miraba, pero no sabia que es lo que es AJAX, asi que solo me e leido el primero.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Spider-Net en 14 Abril 2011, 16:18 pm
Te recomiendo echarles entonces un vistazo también al de CSS y CSS Avanzado, ya que la mayoría de efectos los puedes hacer directamente con CSS, sin necesidad de usar javascript. El de AJAX yo diría que es imprescindible, hoy en día prácticamente todas las webs importantes usan AJAX. Cualquier duda que te surja, por aquí estamos para ayudarte en lo que se pueda.

Un saludo.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Nakp en 14 Abril 2011, 23:11 pm
por cierto ahora que veo tu codigo me he fijado que al evento le has asignado una asignacion xD debias asignar una function(){ asignacion;} jajaja pero bueh :P para la proxima xD

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 15 Abril 2011, 11:09 am
Cita de: Nakp en 14 Abril 2011, 23:11 pm
por cierto ahora que veo tu codigo me he fijado que al evento le has asignado una asignacion xD debias asignar una function(){ asignacion;} jajaja pero bueh :P para la proxima xD

No veo lo que dices e.e

@Spider-Net: Si, esos si los he mirado mucho, los de css, el de avanzado no mucho, lo estoy empezando a mirar este año (es que el otro lo mire para clase el año pasado) pero css no me da problemas, lo del hoover me lo dijeron mas tarde, ya he aprendido mucho. Cuando este mi pagina os la ensenio, es que tiene flash y html y desde el flash tengo que ir al html y nos da error no se por que si el actionscript que controla el evento del click enlaza perfectamente, pero es que yo escribo una cosa y el flash me coje la url que quiere, no la que escribo yo, no se, estoy aburrida de flash XD. Pero no voy a preguntar aqui nada de eso que este post es de javascript :3

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 20 Abril 2011, 15:01 pm
Hola, tengo otro problema u.u lo siento soy muy pesada, pero es que busco y busco y no se por que no me funciona lo que encuentro.

Resulta que quiero que una funcion, me abra un nuevo link, estilo a <a href:> pero tiene que ser en javascript, porque quiero que al hcer click, ocurra una cosa y despues se abra el link, si lo pongo como <a href> ocurre el link y no pasa lo que quiero que pase. Vamos, basicamente es que quiero que una imagen se mueva y cuando llegue a X posicion salte el link (lo de la imagen no quiero saber como hacerlo, ya lo hago yo que parece divertido) Estoy intentando que salte el link normalmente y nada, paso el firebug y no hay problema ninguno, mirad, este es el codigo:

Código
  1. function chiSiamoClick() {
  2. 	window.document.URL = "chiSiamo.html";
  3. 	}

windows.document.URL devuelve la direccion actual de la pagina, pero es un prametro modificable, de lectura/escritura. He probado poner la ruta absoluta, lo cual seria una locura cuando lo subiese, pero no funciona tampoco.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: merolhack en 20 Abril 2011, 15:06 pm
El redirect con javascript de hace con:
<script type="text/javascript">
<!--
window.location = "http://www.google.com/"
//-->
</script>


Fuente:
http://www.tizag.com/javascriptT/javascriptredirect.php

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 20 Abril 2011, 15:48 pm
Citar
El redirect con javascript de hace con:
<script type="text/javascript">
<!--
window.location = "http://www.google.com/"
//-->
</script>

Fuente:
http://www.tizag.com/javascriptT/javascriptredirect.php

Si pero window.location esta deprecated, su funcion es la misma que lo que he puesto yo ahi. Entonces tengo que poner un url con "http://www.mipagina.com/nuevaPagina"? No valen direciones relativas? Intente con file://direccion_en_mi_ordenador pero no funcionaba, si hay alguien que lo haya hecho alguna vez y me pueda ayudar, que creo que mi problema esta ahi, pero por internet no pone nada.

El problema que tiene el windows.location es que en navegadores como iexplorer, ya que windows usa una ruta de \\ en vez de // como en los sistemas unix, no carga a veces la pagina, el document.URL soluciona este aspecto.

Título: Re: [Problema]Evento sencillo javascript
Publicado por: merolhack en 20 Abril 2011, 17:23 pm
Pues aqui hay más redirects!

http://ntt.cc/2008/01/21/5-ways-to-redirect-url-with-javascript.html

Código:
<script language=”javascript” type=”text/javascript”>
window.location.href=”login.jsp?backurl=”+window.location.href;
</script>

Código:
<script language=”javascript”>
alert(”back”);
window.history.back(-1);
</script>

Código:
<script language=”javascript”>
window.navigate(”top.jsp”);
</script>

Código:
<script language=”javascript”>
self.location=”top.htm”;
</script>

Código:
<script language=”javascript”>
alert(”Access Violation”);
top.location=”error.jsp”;
</script>

Título: Re: [Problema]Evento sencillo javascript
Publicado por: Nakp en 21 Abril 2011, 01:48 am
como no ves lo que digo? el "evento" lo tienes asi

Código
  1. document.getElementById('link').onmouseover = this.style.borderColor = "red";

document = style = "red"; ahora si? deberia ser

Código
  1. document.getElementById('link').onmouseover = function() {this.style.borderColor = "red";}

donde al evento le asignas una accion no un valor

Título: Re: [Problema]Evento sencillo javascript
Publicado por: KuraraGNU en 27 Abril 2011, 10:17 am
Cita de: Nakp en 21 Abril 2011, 01:48 am
como no ves lo que digo? el "evento" lo tienes asi

Código
  1. document.getElementById('link').onmouseover = this.style.borderColor = "red";

document = style = "red"; ahora si? deberia ser

Código
  1. document.getElementById('link').onmouseover = function() {this.style.borderColor = "red";}

donde al evento le asignas una accion no un valor

Gracias, esa parte ya la solucione ^-^

merolhack, ahora pruebo lo que has puesto tu a ver.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines