Make the tiles / images clickable

Hey everyone!

Just want some help in making the Services tiles clickable so they take to their section on the services page. The graphics are SVG so they are already in a code block, so I tried adding the URL e.g. <a href="https://www.dataterminus.com/services#audits"</a> (with different variations of the 'a' tag) on the same SVG block and a separate code but it won't work.

The parts I want clickable are highlighted below.

The SVG code looks like this:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg height="80px" width="80px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 495.2 495.2" xml:space="preserve" fill="#000000">

<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier"> <circle style="fill:#e6e6e6;" cx="174.6" cy="176" r="144"/> <path style="fill:#ffffff;" d="M318.6,176c0-40-16-76-42.4-102.4c-20.8-11.2-44-17.6-69.6-17.6c-79.2,0-144,64.8-144,144 c0,40,16,76,42.4,102.4c20.8,11.2,44,17.6,69.6,17.6C253.8,320,318.6,255.2,318.6,176z"/> <path style="fill:#fdd140;" d="M174.6,8C81.8,8,6.6,83.2,6.6,176s75.2,168,168,168s168-75.2,168-168S267.4,8,174.6,8z M174.6,312 c-75.2,0-136-60.8-136-136s60.8-136,136-136s136,60.8,136,136S249.8,312,174.6,312z"/> <path style="fill:#000000;" d="M484.2,441.6c11.2,11.2,11.2,28.8,0,40l-5.6,5.6c-5.6,5.6-12.8,8-20,8s-14.4-2.4-20-8L269,318.4 c-27.2,17.6-59.2,28-93.6,28c-36.8,0-71.2-12-99.2-32l-12.8,12.8c1.6,3.2,2.4,7.2,2.4,10.4c0,13.6-11.2,24.8-24.8,24.8 s-24.8-11.2-24.8-24.8s11.2-24.8,24.8-24.8c3.2,0,7.2,0.8,9.6,2.4l12-11.2c-36.8-32-60-78.4-60-130.4C2.6,77.6,80.2,0,175.4,0 s172.8,77.6,172.8,172.8c0,5.6,0,10.4-0.8,15.2h7.2c3.2-9.6,12.8-16,23.2-16c0,0,0,0,0.8,0l55.2-95.2c-3.2-4-5.6-9.6-5.6-16 c0-13.6,11.2-24.8,24.8-24.8c13.6,0,24.8,11.2,24.8,24.8S466.6,85.6,453,85.6c-1.6,0-3.2,0-4-0.8l-53.6,92.8c4.8,4.8,8,11.2,8,18.4 c0,13.6-11.2,24.8-24.8,24.8c-10.4,0-20-7.2-23.2-16.8h-8.8c-4.8,24.8-15.2,48-28.8,67.2L484.2,441.6z M472.2,469.6c4-4,4-11.2,0-16 l-46.4-46.4l-21.6,21.6l46.4,46.4c4,4,11.2,4,16,0L472.2,469.6z M391.4,416l21.6-21.6l-108-108c-6.4,8-14.4,14.4-21.6,20.8 L391.4,416z M331.4,172.8c0-85.6-69.6-156-156-156s-156,70.4-156,156s69.6,156,156,156S331.4,258.4,331.4,172.8z"/> <path style="fill:#fdd140;" d="M472.2,453.6c4,4,4,11.2,0,16l-5.6,5.6c-4,4-11.2,4-16,0l-46.4-46.4l21.6-21.6L472.2,453.6z"/> <path style="fill:#81d8ca;" d="M413,394.4L391.4,416l-108-108c8-6.4,15.2-13.6,21.6-20.8L413,394.4z"/> <g> <path style="fill:#000000;" d="M297,188.8c0.8-5.6,1.6-10.4,1.6-16c0-62.4-48-114.4-109.6-120.8c-4-0.8-8-4-8-8v-1.6 c0-4.8,4-8.8,8.8-8c70.4,7.2,125.6,66.4,125.6,139.2c0,79.2-66.4,143.2-146.4,139.2c-72-3.2-130.4-63.2-132.8-135.2 c-1.6-41.6,16-79.2,44-105.6c5.6-4.8,14.4-1.6,14.4,6.4c0,2.4-0.8,4.8-2.4,6.4c-24,22.4-38.4,53.6-38.4,89.6 c0,38.4,17.6,72,44.8,95.2l60.8-60.8c-1.6-3.2-2.4-6.4-2.4-9.6c0-13.6,11.2-24.8,24.8-24.8c10.4,0,19.2,6.4,23.2,16h92V188.8z M293,205.6h-88c-3.2,9.6-12.8,16.8-23.2,16.8c-4,0-8-0.8-11.2-2.4l-58.4,58.4c20,12,44,18.4,68.8,17.6 C234.6,292.8,279.4,255.2,293,205.6z"/> <path style="fill:#000000;" d="M165.8,43.2L165.8,43.2c0,4.8-3.2,8-7.2,8.8c-12.8,1.6-24.8,5.6-36,11.2c-5.6,3.2-12.8-0.8-12.8-7.2 c0-3.2,1.6-6.4,4.8-8c12.8-6.4,26.4-10.4,41.6-12.8C161,34.4,165.8,38.4,165.8,43.2z"/> </g> </g>
<a href="https://www.dataterminus.com/services#audits"/>
</svg>

I'd appreciate any help!

Thank you!

Can you share link to page where you use these images? We can test code easier

@tuanphan Sorry, here's the page. https://www.dataterminus.com/ (right on the homepage).

@tuanphan Hi! Just quickly following up.

Try this code to Website > Website Tools > Code Injection > Footer (this code for Audits, if it works, I will send code for other items)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$(".fe-block-5b3ad618d85dc21a716a").click(function() {
			var link = $(this).text(),
				href = "/services#audits";
			window.location.href=href;
		});
});
</script>

@tuanphan Thank you! I added to the footer but it doesn't seem to be working, unfortunately.

On 4/17/2024 at 10:17 PM, theuq said:

@tuanphan Thank you! I added to the footer but it doesn't seem to be working, unfortunately.

I tried clicking it and it already scroll here. You try clicking it and see.

@tuanphan Yeah, I had added the code on the 'text' so all of them go to the services page but the icons above aren't clickable.

Oh wait, I see what you mean. It does go to the services page, but it just doesn't show that 'hand' icon. Can we please make it show a hand icon when it hovers like it's a clickable link? And also I think it will work for others as well.

On 4/23/2024 at 9:57 PM, theuq said:

Oh wait, I see what you mean. It does go to the services page, but it just doesn't show that 'hand' icon. Can we please make it show a hand icon when it hovers like it's a clickable link? And also I think it will work for others as well.

You can use this code to Website > Website Tools > Custom CSS

div.fe-64d10c4f02b1412160deb370>div:nth-child(n+2) {
    cursor: pointer;
}

On 4/25/2024 at 11:47 AM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

div.fe-64d10c4f02b1412160deb370>div:nth-child(n+2) {
    cursor: pointer;
}

 

Thank you again @tuanphan! That worked well. So, I used your logic to add other tiles in the mix as well and wanted to check if this is okay even though it's working?

<script>
$(document).ready(function() { 
		$(".fe-block-5b3ad618d85dc21a716a, .fe-block-6059bf2d94c8136d0a2e, .fe-block-yui_3_17_2_1_1698949961000_71039").click(function() {
			var link = $(this).text(),
				href = "/services#audits";
			window.location.href=href;
		});
  		$(".fe-block-9170e3f6af7ca5dec93f, .fe-block-84581ef9e5cb3897ea56, .fe-block-1c1575199307ba414124").click(function() {
			var link = $(this).text(),
				href = "/services#measurement_strategy";
			window.location.href=href;
		});
      		$(".fe-block-d3ad58917ca9dd4c8f7b, .fe-block-56c016aa102d56bc9fcc, .fe-#block-9100eb19999ae9684404").click(function() {
			var link = $(this).text(),
				href = "/services#data_collection";
			window.location.href=href;
		});
      		$(".fe-block-4d8b5fea1940e19039fc, .fe-block-2a8f42e9830a7c456964, .fe-block-ec8d0014852df5a23405").click(function() {
			var link = $(this).text(),
				href = "/services#analysis";
			window.location.href=href;
		});
        	$(".fe-block-18517888e82427bf7288, .fe-block-bee1037f3fbdd96a57bb, .fe-block-9269f2f4a3286a1ac68f").click(function() {
			var link = $(this).text(),
				href = "/services#visualisation";
			window.location.href=href;
		});
          	$(".fe-block-46480a97c8ddc4a14011, .fe-block-c5fc181b9f26d2318a46, .fe-block-81512a8ad410792ed3a8").click(function() {
			var link = $(this).text(),
				href = "/services#cro";
			window.location.href=href;
		});
});
</script>

Again, thank you so much!