HTML Code
<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="UTF-8">



  <meta name="viewport" content="width=device-width, initial-scale=1.0">



  <title>nohref — dynamic href</title>



  <style>



    body {



      font-family: system-ui, sans-serif;



      margin: 0;



      padding: 1.5rem;



      background: #f8fafc;



      color: #334155;



      line-height: 1.7;



    }



    h1 { margin: 0 0 0.75rem; font-size: 1.25rem; color: #0f172a; }



    img { display: block; border-radius: 8px; border: 1px solid #cbd5e1; max-width: 100%; }



    .controls { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }



    button {



      padding: 0.5rem 1rem;



      font: inherit;



      cursor: pointer;



      border-radius: 6px;



      border: 1px solid #cbd5e1;



      background: #fff;



    }



    button.primary { background: #2563eb; color: #fff; border-color: #1d4ed8; }



    .status {



      margin-top: 0.75rem;



      font-size: 0.8125rem;



      color: #64748b;



      max-width: 420px;



    }



    code { background: #e2e8f0; padding: 0.1rem 0.35rem; border-radius: 4px; }



  </style>



</head>



<body>



  <h1>Enable / disable area link</h1>



  <img src="/images/area-example.png" alt="Diagram with toggleable HTML hotspot" width="256" height="256" usemap="#toggle-map">



  <map name="toggle-map">



    <area id="toggle-area" shape="rect" coords="253,98,111,1" href="/html/tags/a" alt="Learn HTML">



  </map>



  <div class="controls">



    <button type="button" class="primary" id="disableBtn">Remove href (disable link)</button>



    <button type="button" id="enableBtn">Restore href</button>



  </div>



  <p class="status" id="status">Link is <strong>enabled</strong> — area has <code>href="/html/tags/a"</code>.</p>







  <script>



    var area = document.getElementById("toggle-area");



    var status = document.getElementById("status");



    var savedHref = area.getAttribute("href");







    document.getElementById("disableBtn").addEventListener("click", function () {



      area.removeAttribute("href");



      status.innerHTML = "Link is <strong>disabled</strong> — <code>href</code> removed (modern equivalent of nohref).";



    });







    document.getElementById("enableBtn").addEventListener("click", function () {



      area.setAttribute("href", savedHref);



      status.innerHTML = "Link is <strong>enabled</strong> — <code>href</code> restored.";



    });



  </script>



</body>



</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML nohref Attribute — Toggle href with JavaScript
