Title Bar Link Effect
Use every inch of screen space. This script listens for mouse interactions on links and updates the browser tab text (`document.title`) instantly.
Copy the Script
<script>
var originalTitle = document.title;
function changeTitle(txt) {
document.title = txt;
}
function restoreTitle() {
document.title = originalTitle;
}
</script>
<a href="#" onmouseover="changeTitle('Home Page')" onmouseout="restoreTitle()">Home</a>Frequently Asked Questions
It can be if overused. It works best for playful sites or specific interactive apps. Avoid changing it too rapidly as flashing tab titles looks spammy.
Yes. The script captures the `originalTitle` on load and restores it `onmouseout` so the user doesn't lose track of the page context.
No. Search engines index the `` tag in the HTML source code. JavaScript changes to `document.title` after load generally don't change search rankings. </div>
</div>
</div>
</div>
</div>
<script>
var defaultTitle = document.title;
function changeTitle(txt) { document.title = txt; }
function resetTitle() { document.title = defaultTitle; }
function copyCode(btn) { navigator.clipboard.writeText(document.getElementById('codeBlock').innerText); btn.innerText = "Copied!"; }
</script>
</div>
<aside class="col-lg-4">
<div class="sticky-top" style="top: 90px;">
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-4">
<h3 class="h6 fw-bold text-uppercase text-muted mb-3 border-bottom pb-2">
Navigation Scripts
</h3>
<div class="list-group list-group-flush">
<a href="add-to-favorites.php" class="sidebar-link ">Add to Favorites</a>
<a href="animated-link-menu.php" class="sidebar-link ">Animated Link Menu</a>
<a href="breadcrumb-navigation.php" class="sidebar-link ">Breadcrumb Navigation</a>
<a href="browser-compatibility-detector.php" class="sidebar-link ">Browser Compatibility Detector</a>
<a href="browser-redirect.php" class="sidebar-link ">Browser Redirect</a>
<a href="browser-specific-redirect.php" class="sidebar-link ">Browser Specific Redirect</a>
<a href="collapsible-sidebar-menu.php" class="sidebar-link ">Collapsible Sidebar Menu</a>
<a href="color-changing-links.php" class="sidebar-link ">Color Changing Links</a>
<a href="current-url-display.php" class="sidebar-link ">Current URL Display</a>
<a href="detect-browser.php" class="sidebar-link ">Detect Browser Script</a>
<a href="detect-monitor-size.php" class="sidebar-link ">Detect Monitor Size</a>
<a href="detect-screen-resolution.php" class="sidebar-link ">Detect Screen Resolution</a>
<a href="display-browser-type.php" class="sidebar-link ">Display Browser Type</a>
<a href="display-browser-version.php" class="sidebar-link ">Display Browser Version</a>
<a href="dropdown-jump-menu.php" class="sidebar-link ">Dropdown Jump Menu</a>
<a href="dynamic-nav-bar.php" class="sidebar-link ">Dynamic Nav Bar</a>
<a href="glowing-links.php" class="sidebar-link ">Glowing Links</a>
<a href="language-selector.php" class="sidebar-link ">Language Selector</a>
<a href="link-background-highlight.php" class="sidebar-link ">Link Background Highlight</a>
<a href="link-based-redirect.php" class="sidebar-link ">Link Based Redirect</a>
<a href="link-highlight.php" class="sidebar-link ">Link Highlight</a>
<a href="link-overline-underline.php" class="sidebar-link ">Link Overline Underline</a>
<a href="mouseover-link-follow.php" class="sidebar-link ">Mouseover Link Follow</a>
<a href="page-load-delay.php" class="sidebar-link ">Page Load Delay</a>
<a href="page-reload-button.php" class="sidebar-link ">Page Reload Button</a>
<a href="platform-sniffer.php" class="sidebar-link ">Platform Sniffer</a>
<a href="print-page-button.php" class="sidebar-link ">Print Page Button</a>
<a href="print-page-trigger.php" class="sidebar-link ">Print Page Trigger (Auto)</a>
<a href="quick-jump-menu.php" class="sidebar-link ">Quick Jump Menu</a>
<a href="radio-button-redirect.php" class="sidebar-link ">Radio Button Redirect</a>
<a href="random-link-button.php" class="sidebar-link ">Random Link Button</a>
<a href="random-link-wheel.php" class="sidebar-link ">Random Link Wheel</a>
<a href="remove-link-underlines.php" class="sidebar-link ">Remove Link Underlines</a>
<a href="resolution-based-redirect.php" class="sidebar-link ">Resolution Based Redirect</a>
<a href="scroll-to-top.php" class="sidebar-link ">Scroll to Top</a>
<a href="set-homepage-link.php" class="sidebar-link ">Set Homepage Link</a>
<a href="simple-go-menu.php" class="sidebar-link ">Simple Go Menu</a>
<a href="simple-page-redirect.php" class="sidebar-link ">Simple Page Redirect</a>
<a href="status-bar-redirect.php" class="sidebar-link ">Status Bar Redirect</a>
<a href="title-bar-link-effect.php" class="sidebar-link active">Title Bar Link Effect</a>
<a href="url-jump-box.php" class="sidebar-link ">URL Jump Box</a>
<a href="website-redirector.php" class="sidebar-link ">Website Redirector</a>
</div>
<hr>
<div class="py-2 text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4013521895230863"
data-ad-slot="1543106157"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
</div>
</div>
</div>
</aside></div>
</main>
<footer class="container py-5 border-top text-muted">
<div class="row align-items-center">
<div class="col-md-6">© 2026 <strong>Java-Scripts.net</strong></div>
<div class="col-md-6 text-md-end">
<a href="/privacy.phtml" class="text-decoration-none text-muted me-3">Privacy</a>
<a href="mailto:info@java-scripts.net" class="text-decoration-none text-muted">Contact</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function () {
let adsLoaded = false;
function loadAds() {
if (adsLoaded) return;
const s = document.createElement("script");
s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4013521895230863";
s.async = true;
s.crossOrigin = "anonymous";
document.head.appendChild(s);
adsLoaded = true;
["scroll", "mousemove", "keydown", "touchstart"].forEach(evt => window.removeEventListener(evt, loadAds));
}
["scroll", "mousemove", "keydown", "touchstart"].forEach(evt => window.addEventListener(evt, loadAds, { passive: true, once: true }));
})();
</script>
</body>
</html>