[Problema]Evento sencillo javascript

KuraraGNU · 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 (javascript) [Seleccionar]

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 (html4strict) [Seleccionar]

<script type="text/javascript" src="Scripts/index.js"></script>

Spider-Net · 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 (javascript) [Seleccionar]

function cambia(){
 document.getElementById("prueba").style.borderColor="red";
}

Tu archivo html:

Código (html4strict) [Seleccionar]

<!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" />
<title>Prueba</title>
<script type="text/javascript" src="index.js"></script>
</head>

<body>
<div id="prueba" style="width: 60%; border: 1px solid #2F5CB3; background-color: #CCD2EE;padding: 10px;" onmouseover="cambia();">Prueba <br /><br /><br  /></div>
</body>
</html>

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

Un saludo.

KuraraGNU · 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 (html4strict) [Seleccionar]

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

me lo ahorro, no?

Spider-Net · 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.

Nakp · 1 Abril 2011, 17:15 PM

no es mas facil agregar esto a la hoja de estilos?

Código (css) [Seleccionar]

#link:hover{
 border-color: red;
}

Spider-Net · 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.

KuraraGNU · 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 (html4strict) [Seleccionar]

<!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" />
<title>montacarichi</title>
<link rel="shortcut icon" href="../img/controlecuadrado.ico" type="image/ico" />
<link rel="stylesheet" type="text/css" href="../css/montacarichi.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
<script language="javascript" src="code.js"></script>
</head>

<body>
<h1>Montacarichi</h1>
<p></p>
<p></p>
<div id="capa1">
<img id="imagenGaleria2" class="borde" src="montacarichi/montacarichicopia.jpg" name="Imagen1" />
<img id="imagenGaleria" src="montacarichi/montacarichi1copia.jpg" name="Imagen2" />
<img id="imagenGaleria" src="montacarichi/montacarichi2copia.jpg" name="Imagen3" /></div>
<div id="anterior"><a href="#" onclick="change();">&lt;&lt; </a></div>
<div id="posterior" ><a href="#" onClick="change();">&gt;&gt;</a></div>
</body>
</html>

Mi javascript:

Código (javascript) [Seleccionar]

var cont = 0;

function change()
{
        if(cont==0)
        {     
         document.getElementById("imagengaleria2").src = "montacarichi/montacarichi3copia.jpg";
                document.imagen2.src="montacarichi/montacarichi4copia.jpg";
                document.imagen3.src="montacarichi/montacarichi5copia.jpg";
                cont=1;
        }

        else
        {
                imagen1.src="montacarichi/montacarichicopia.jpg";
                imagen2.src="montacarichi/montacarichi1copia.jpg";
                imagen3.src="montacarichi/montacarichi2copia.jpg";
                cont=0;
        }
}

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

Os quiero

:* :* :* :* :* :*

Spider-Net · 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

Libro AJAX

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

KuraraGNU · 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.

Spider-Net · 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.