zmiana zawartości diva

pytanie zadane 26 maja 2018 w JavaScript przez niezalogowany
edycja 26 maja 2018

Hejka.

Przejrzałam wszystkie tematy z google z tego forum i po prostu nic nie zatrybiło, albo nie pasowało.

Proszę o pomoc. Kod: (mam pełen błędów, jak któryś poprawię to brackets wywala kolejne):

document.getElementById('#imglogo').addEventListener(onmouseover, function(){
    document.getElementById('#imglogo').innerHTML = "<img src='P3images/logo.png'/>";
});

document.getElementById('#imglogo').addEventListener(onmouseout, function(){
    document.getElementById('#imglogo').innerHTML = "<img src='P3images/logov1.png'/>";
});

Nie działa mi ta podmiana, zero reakcji. Wyrzucałam zawartość diva z kodu html, js to dla mnie nowość, a to mi potrzebne do projektu hmtl ;/

Jak to poprawić? Pomocy:)

Cały kod:

<!DOCTYPE html>
<html>

    <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width", initial-scale=1>
        <title>Portfolio</title>
        <link rel="stylesheet" href="P3main.css" type="text/css">
        
    </head>
    
    <body>
       
       <header>
              <div id="imglogo">
           <img src="P3images/logov1.png">
              </div>         
               
            <nav>
                <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">About</a></li>
                   <li><a href="#">Contact</a></li>
                </ul>
           </nav>
       </header>
       
       <section class="home-home">
           
           <div class="container">
               <h1 class="title"><span class="title1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget ipsum a sem egestas blandit. Cras quam augue, semper eget porta eu, tincidunt </span> </h1>

               <a href="" class="button button1 button2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
           
       </section>
       
       <section class="home-about">
           
           <div class="textbox">
               <h1>Who I am</h1>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget ipsum a sem egestas blandit. Cras quam augue, semper eget porta eu, tincidunt commodo felis. Nullam eu augue faucibus, feugiat risus non, malesuada lacus. Suspendisse maximus lacinia nulla et imperdiet. Nam lobortis laoreet aliquam. Curabitur vel bibendum nibh, non sagittis mauris. Curabitur ornare erat sed erat fringilla elementum. In sollicitudin quam enim, eleifend pharetra dolor tempor quis. Vestibulum dictum interdum velit non blandit. Sed sed nibh </p>
               <p>Curabitur et nulla molestie, ultricies dolor eu, convallis augue. Ut non elit at justo lobortis vestibulum. Aliquam vestibulum ultricies nulla et ullamcorper. Ut pellentesque, erat condimentum molestie accumsan, libero est tincidunt neque, ut porttitor diam libero quis lacus. Praesent ut lorem scelerisque, blandit tellus ac, vulputate enim. Vivamus dignissim blandit lectus, eget porta ligula aliquet quis. </p>
               
           </div>
           
       </section>
       
       <section class="portfolio">
           
           <h1>porta ligula aliquet</h1>
           
           <figure class="image">
               <img src="P3images/P1.2.png" alt="">
               <figcaption class="description">
                   <p>Project title</p>
                   <a href="" class="button button1 button-small">Szczegóły projektu</a>
               </figcaption>
           </figure>
           
           <figure class="image">
               <img src="P3images/P1.3.png" alt="">
               <figcaption class="description">
                   <p>Project title</p>
                   <a href="" class="button button1 button-small">Szczegóły projektu</a>
               </figcaption>
           </figure>
           
           <figure class="image">
               <img src="P3images/P1.4.png" alt="">
               <figcaption class="description">
                   <p>Project title</p>
                   <a href="" class="button button1 button-small">Szczegóły projektu</a>
               </figcaption>
           </figure>
           
           <figure class="image">
               <img src="P3images/P1.5.png" alt="">
               <figcaption class="description">
                   <p>Project title</p>
                   <a href="" class="button button1 button-small">Szczegóły projektu</a>
               </figcaption>
           </figure>
           
           <figure class="image">
               <img src="P3images/P1.6.png" alt="">
               <figcaption class="description">
                   <p>Project title</p>
                   <a href="" class="button button1 button-small">Szczegóły projektu</a>
               </figcaption>
           </figure>
           
           <figure class="image">
               <img src="P3images/P1.7.png" alt="">
               <figcaption class="description">
                   <p>Project title</p>
                   <a href="" class="button button1 button-small">Szczegóły projektu</a>
               </figcaption>
           </figure>
           
       </section>
       
       <footer>
           <h1>Prawa zastrzeżone</h1>
       </footer>
       
       <script>
        document.getElementById('imglogo').addEventListener(mouseover, function(){
        document.getElementById('imglogo').innerHTML = "<img src='P3images/logo.png'/>";
        });

        document.getElementById('imglogo').addEventListener(mouseout, function(){
        document.getElementById('imglogo').innerHTML = "<img src='P3images/logov1.png'/>";
        });
        </script>
    </body>
    
</html>

2 odpowiedzi

odpowiedź 26 maja 2018 przez shotokan Nałogowiec (39,660 p.)
wybrane 26 maja 2018

Najlepsza

Po pierwsze jak odwołujesz się do elementu strony przez getElementById to podajesz tylko nazwę id:

document.getElementById('imglogo')

po drugie wykorzystując addEventListener, podajemy nazwę zdarzenia bez przedrostka 'on' :

document.getElementById('imglogo').addEventListener('mouseout', function() { })

komentarz 26 maja 2018 przez niezalogowany

aha, dziękuję. Zapamiętam.

Niestety tylko, nadal nie reaguje na myszkę xd

komentarz 26 maja 2018 przez shotokan Nałogowiec (39,660 p.)

Zapodaj cały kod, bo jakoś nie chce mi się wierzyć, aby zdarzenia nie zostały zarejestrowane.

komentarz 26 maja 2018 przez niezalogowany

Oki, dodany wyżej, aby było więcej miejsca na szerokość.

komentarz 27 maja 2018 przez niezalogowany

@shotokan,
ach, już wiem, apostrof wokół myszek

odpowiedź 27 maja 2018 przez niezalogowany

Podmiana diva już wychodzi, ale okazuje się, że lipnie wygląda, gdy ledwo po najechaniu diva zmienia się logo, a to jeszcze pusta przestrzeń w miejscu najechania.

Próbuję więc czegoś innego:

document.querySelector('header img').addEventListener('mouseenter', function(){
        document.querySelector('header img').innerHTML = "<img src='P3images/logo.png'/>";
});

        document.querySelector('header img').addEventListener('mouseleave', function(){
        document.querySelector('header img').innerHTML = "<img src='P3images/logov1.png'/>";
});

Wie ktoś, czemu to nie reaguje?

I w jaki sposób można uzyskać płynną podmianę?

FadeIn i FadeOut nie są zsynchronizowane, gdy jedno się kończy, drugie się zaczyna.