Dashboards & Visualizations

How do you remove the blue hyperlink color and background from an image when you click on it?

pgadhari
Builder

Hi all,

I am using some images in my dashboard as hyperlinks. I have used an HTML table for putting the image in a row side by side. But, when I click on the image, a blue background shows up, and also, a line is showing as a border on the image, which is looking very shabby. I am attaching the screenshot of a clicked image having a problem : https://ibb.co/KVnsLs3

I tried putting style="border-style: none" in the CSS, but it's still not working ?

Also, below is the my HTML table code and CSS I am using :

<panel>
      <title>Most Used Apps</title>
      <html>
             <style>
               #myMainMenu li{
                 padding-bottom:10px;
               }
             </style>
            <table id="t01">
            <tr>
              <td style="background-color:white">
               <pre>
                <a href="/app/wifi_app">
                <img src="/static/app/landing_page/wifi.jpg" style="border-style: none"/>
                </a>
              </pre>
              </td>
              <td>
               <pre>
                 <a href="/app/app1">
                <img src="/static/app/search/app1_image.png"/>
                </a>
              </pre>
              </td>
              <td>
               <pre>
                 <a href="/app/app2">
                <img src="/static/app/search/app2_image.png"/>
               </a>
              </pre>
              </td>
             </tr>
             </table>
          </html>
    </panel>
  </row>
  <row>

Below is my table CSS file :

pre{
  background-color: #FFFFFF;
  line-height: 0px;
  padding: 5px;
  border: 1px solid black;
}

table td {
  //border: 1px solid black;
  //border-collapse: collapse;
  padding: 5px;
  background-color: #FFFFFF;
}

td img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  height: 80px;
  width: 160px;
}

Please help resolve the above issues. Thanks.

--PG

0 Karma
1 Solution

pgadhari
Builder

Guys - I was success in removing the blue highlight for the linked image by removing

 tag in my html code. Now, its working fine. 🙂

View solution in original post

0 Karma

pgadhari
Builder

Guys - I was success in removing the blue highlight for the linked image by removing

 tag in my html code. Now, its working fine. 🙂

0 Karma

pgadhari
Builder

I removed pre tag in my html code, and that highlight was removed. In my previous comment, it took pre as tag in the page itself. so please my ignore this question, all awesome people out there. Thanks 🙂

0 Karma

pgadhari
Builder

@niketnilay - can you provide any help on this issue ?

0 Karma
Get Updates on the Splunk Community!

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...