Inne działy

 

JavaScript zdarzenie onmouseout

 

Zdarzenie onmouseout, występuje, gdy wskaźnik myszy opuści granice obiektu. Jest ono powszechnie stosowane ze zdarzeniem  onmouseover do tworzenia i efektu rollout.

Składnia:

 

// Javascript
element.onmouseout = jsFunkcja;
// HTML
<element onmouseout="jsFunkcja();"></element>

Obsługa skryptu zdarzenia onmouseoutpoprzez JavaScript i DOM:

 

<!DOCTYPE html>

<html>
    <head>
        <title>Obsługa zdarzenia onmouseout przez JavaScript</title>
        <meta charset="UTF-8">
        <script type="text/javascript">
            
            function przechwycZdarzenie(){
                var kontener1 = document.getElementById('kontener1');
                var kontener2 = document.getElementById('kontener2');
                kontener1.onmouseover = wejscie;
                kontener2.onmouseover = wejscie;
                kontener1.onmouseout = wyjscie;
                kontener2.onmouseout = wyjscie;
                
                function wejscie(){
                    this.style.background = "#B0D8FE";
                }
                
                function wyjscie(){
                    this.style.background = "#EBF0C9"
                }
            }
            window.onload = przechwycZdarzenie;
        </script>
    </head>
    <body>
        <div id="kontener1" style="background: #EBF0C8">Przesunięcie myszy poza element 1</div>
        <div id="kontener2" style="background: #EBF0C8">Przesunięcie myszy poza element 2</div>
    </body>
</html>

Obsługa zdarzenia onmouseout bezpośrednio przez element HTML:

 

<!DOCTYPE html>

<html>
    <head>
        <title>Obsługa zdarzenia onmouseout przez HTML</title>
        <meta charset="UTF-8">
        <script type="text/javascript">
            
            function wejscie(element){
                element.style.background = "#B0D8FE";
            }
                
            function wyjscie(element){
                element.style.background = "#EBF0C9"
            }
            
        </script>
    </head>
    <body>
        <div  onmouseover="wejscie(this);" onmouseout="wyjscie(this);" 
              style="background: #EBF0C8">Przesunięcie myszy poza element 1</div>
        <div  onmouseover="wejscie(this);" onmouseout="wyjscie(this);" 
              style="background: #EBF0C8">Przesunięcie myszy poza element 2</div>
    </body>
</html>


 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.