How to change logo as you change page

Asked

Viewed 140 times

0

Summary: Personal I am wanting to make a modification in the site of the company where I work and do not know how to do it.

PROBLEM: I would like to create a form in Javascript that as it changes page was changing as soon as it is located at the top/center of the site using Javascript or even CSS if possible.

Technologies Used in this project: ASP.NET CORE MVC, HTML, CSS, Javascript.

Code of the part that is the logo:

  <div id="header">
    <a href="/" title="Sport Club Corinthians Paulista" class="header-logo" onclick="ga('send', 'event', 'Links', 'click', 'Home');" style="
        height: 148px;width: 122px;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);height: 50px;z-index: 2;">
        <span class="ct-logo">
            <img class="logo" src="https://dnxstorage.blob.core.windows.net/dnx/publico/FundoTransparente.png" title="DNX Soluções Tecnológicas" alt="DNX Soluções Tecnológicas">
        </span>
    </a>
    <div>

...

javascript css
  • 1

    It would not just be the case to change the img src?

  • So my friend is that as it is in ASP this part stays in the layout what replicates in all pages. I would like something with more dynamism than when the user clicked on who we are for example the logo that is located in the Shared layout view was updated to the destination page change the logo. If on each page there was a specific part for the logo I could do what you told me, more like it’s a parent view code for several daughters view then I can’t do it this way.

  • So it wouldn’t be the case to put an id on the logo and execute the command document.getElementById(idDaLogo).src = novoSrc; in js when the page loads?

1 answer

2


You can take the window.location.href and make a check with if/else and change the .src of the image. if the window.location.href for == index.asp you put a src in the image, else if another page (other href in the window) you change the src image. Vc can still use path !=, if you want only for different urls of index.Asp to have another one src for the image .logo

To better understand see the script below:

let path = window.location.href;
let img = document.querySelector('.logo');

if( path == 'index.asp'){
    img.src = 'https://unsplash.it/100/200';
} else if(path == 'contato.asp'){
    img.src = 'https://unsplash.it/200/200';
}
<img class="logo" src="https://unsplash.it/100/100" title="DNX Soluções Tecnológicas" alt="DNX Soluções Tecnológicas">

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.