Busca el tema de tu interés

domingo, 4 de octubre de 2015

Como se usa y para que sirve el evento onmouseover en javascript

Este post lo dedicamos a las personas que trabajan con el diseño y programación usando el lenguaje de programación javascript, en este post hablaremos de como se usa el evento de javascript onmouseover en una página dinámica.

La oración "on mouse over" = onmouseover , si interpretamos esta oración que está escrita en inglés , esta oración se podría interpretar como "Poner el mouse encima", en otras palabras el evento onmouseover se produce o ejecuta cuando ponemos el mouse encima de un elemento de una página web o algún programa, este elemento de esta página web puede ser un párrafo, un botón, un div, ect.

Ahora bien el código de lo que sucederá en una etiqueta de un html se puede escribir dentro del mismo elemento en el que queremos que ocurra el evento onmouseover ejemplo si tenemos una etiqueta correspondiente a un botón llamado 'Probadme' de color negro y queremos que este botón cambie a un color azul cuando coloquemos el mouse encima de este botón, el código es similar a este.

<input onmouseover="if(this.style.backgroundColor == 'black'){this.style.backgroundColor = 'blue'}else{this.style.backgroundColor = 'black'}" style="background-color: black;Color:white;font-weight:bold;font-size:large;" type="button" value="Probadme" />

El código para el evento onmouseover lo que hace es cambiar el color a azul (blue) si el botón está negro (black) cuando ponemos el mouse encima del botón "Probadme", pero si el botón cambia a azul (blue) y volvemos y colocamos el mouse encima del botón "Probadme" el botón vuelve a cambia al color negro,  
Pase el mouse encima "Probadme", y oserve como cambia de color.



Una forma más limpia de escribir el código anterior es asignando una clase al código del botón "Probadme", esta clase (class) la llamaremos "boton", y aplicaremos el estilo a este botón desde fuera con la etiqueta style (estilo).

El código se vería ahora así.

<style>
.boton{
background-color: black; 
color: white;
 font-size: large;
 font-weight: bold;
}

</style>
<input class = "boton" onmouseover="if(this.style.backgroundColor == 'black'){this.style.backgroundColor = 'blue'}else{this.style.backgroundColor = 'black'}"  type="button" value="Probadme" />



Otra forma de ejecutar el evento onmouseover es creando una función que contenga todas las indicaciones que queremos que se ejecuten cuando pasemos el mouse encima del botón "Probadme", lo que sucederá es que cuando pasemos el mouse encima del botón, el evento onmouseover llamará una función con todas las indicaciones que queremos que se ejecuten, para ver un ejemplo la función la llamaremos "Cambiando_Color()" y la colocaremos en las etiquetas script (guión) de nuesstro html y identificaremos nuestro código del botón "Probadme" con el id "cambio" , para luego poder referirnos a esta etiqueta con esta identificación.

<script type = "text/javascript">
function Cambiando_Color(){

//Esta funcion cambia el color de negro a azul cuando
//colocamos el mouse encima de boton "Probadme"
// la variable toma representa el boton con id=cambio

var toma = document.getElementById("cambio");

if(toma.style.backgroundColor == 'black'){
toma.style.backgroundColor = 'blue' ;
}else{toma.style.backgroundColor = 'black' ;
};


}
</script>
<style>
.boton{
color: white;
font-size: large;
font-weight: bold;
}

</style>
<input class = "boton" id="cambio" onmouseover="Cambiando_Color();" style="background-color: black;"  type="button" value="Probadme" />

En este código la etiqueta input nos queda mucho más limpia ya que el estilo a excepción del "background-color", lo aplicamos desde fuera de la etiqueta input y el evento onmouseover llama una función escrita externamente "Cambiando_Color()".

También el código anterior puede ser escrito llamando el evento onmouseover y la función "Cambiando_Color()" desde afuera de la etiqueta input de esta manera la etiqueta input nos queda todavía mucho más limpia.

<script type = "text/javascript">

// la variable toma representa el boton con id=cambio


var toma = document.getElementById("cambio");

// asignamos el evento onmouseover a la etiqueta con // id=cambio 

toma.onmouseover = Cambiando_Color ;

function Cambiando_Color(){

//Esta funcion cambia el color de negro a azul cuando
//colocamos el mouse encima de boton "Probadme"


if(toma.style.backgroundColor == 'black'){
toma.style.backgroundColor = 'blue' ;
}else{toma.style.backgroundColor = 'black' ;
};


}
</script>
<style>
.boton{
color: white;
font-size: large;
font-weight: bold;
}

</style>
<input class = "boton" id="cambio" style="background-color: black;"  type="button" value="Probadme" />


Como se puede ver en el código anterior el evento onmouseover y la llamada a la función "Cambiando_Color()" son hecho desde afuera de la etiqueta input del botón "Probadme", todos los códigos anteriores son equivalentes ya que hacen la misma función, cambiar el color de negro a azul y de azul a negro cada vez que se produce el evento onmouseover




Vea también
Ejemplos de tipos de códigos para crear una función en visual basic
Fundamentos básicos para crear y diseñar una página web