(Solved)How do I limit the clickable area in my webpage

1

I have asked similar question before. Me myself have yet to find out the solution.
My question is this, I have one webpage I just wrote and I want to modify it , to make it looks exactly like my prototype.
(As you can see in the link as well as the pic)

The things I wanna achieve:

1 . It is responsive. a.k.a it will adjust itself to screen width.
2 . The 4 windows has a certain width and length. (Just like in the pic) And I am able to manually change it.
3 . The clickable area is locked in to those 4 windows. I have tried to do this but failed multiple times.

Work section version 2

Screen Shot 2017-01-01 at 1.46.38 PM.png1175Ă—563 22.2 KB

2

Your img is enclosed in <a> links and so becomes a link itself so there’s no reducing the clickable area there.

Any chance you could create a small div, position absolute, center it on the image, make it transparent and have that in <a> tags? And maybe have our img as background to makes things easier?

[edtit] if your img is set as background then you might not have to use absolute positioning?

1 Like
3

Hey!!! I did it!!! So I might just share with you here.

I still seeded the image into the <a> links.
But this time I did 2 extra things.

1st: I added 4 different ids to those 4 images I have shown in the webpage. #work1

2nd: In the css section I used
#work1{ position:static; width:500px; height:228px; margin: 20px auto 30px auto; }

And here is the updated version. The only clickable area is the blue pic. Other than that it is all normal. And I can manually change the size of the image. And it is responsive! WooHoo!!

FinalVersion

EDIT: I THOUGHT I SOLVED IT … NOPE… back to working… :rage:

4

The first thing you need to do in order for website to be responsive, is to add the <meta> tag into your <head>, so it will look like this:

<head>
 <meta name="viewport" content="width=device-width , initial-scale=1>  
</head>

Then, in order for image to be unclickable, you would do something like this:

<a href="javascript:void()">
 <img src="..." alt="...">
</a>

But in order to work everything as it should, I recommend using Twitter’s Bootstrap, because some geeks already coded everything you need for your page.

For example, a responsive image using Bootstrap would be:

<a href="javasript:void()">
 <img class="img-responsive" src="..." alt="...">
</a>

Oh, and it should all be in a container, so:

<div class="container">
 <div class="row">
  <a href="javascript:void()>
   <img class="img-responsive" src="..." alt="..">
  </a>
 </div>
</div>
5

Maybe I didn’t understand what you wanted then… I thought you wanted the image to be clickable but not all over!

6

What do you mean by “clickable area”? What behavior are you trying to prevent by making some areas not clickable?

7

Hey, sorry did not make myself clear.
As you can see that in this page I made, the white area next to those 4 images are clickable too.
I want to eliminate that.

Here is the pic.

Screen Shot 2017-01-02 at 5.21.14 AM copy.png2560Ă—1440 468 KB

@PortableStick @timotheap

8

ok I may be wrong again but I think the reason a portion of the white is clickable is because of the margin you gave to your img. The margin is part of the img and so is also a link.

Remove the margin and adjust the space between the images by playing with the columns themselves, so that the white belongs to the columns (and so isn’t clickable) and not the img.

So you could give instead some padding to your columns.

1 Like
9

Understood. A link is clicked when a user clicks anywhere in the element’s padding. Try setting padding on those links to 0. Also, take all of the rules that will apply to your project links and put them in a class instead of multiple ids. That way, you can write one class that will apply to all of your examples, and then you can make more specific rules with the id.

1 Like
10

Will work on it later and post result here. You guys rock!!!

@PortableStick . @timotheap

1 Like
11

Nope. Tried to set paddings to 0. Nothing happened… This is driving me nuts… :anger:

@PortableStick . @timotheap

12

I think it’s because the images are display:block; (due to the img-responsive class) that you get those invisible clickable areas. Try removing that class and add text-center to the column <div>s.

1 Like
13

If I delete the img-responsive class, the website won’t rearrange itself when screen become smaller…
That defeats the whole purpose of including bootstrap in my HTML isn’t it?

Edit: Oh… I just tried. It does not make the website irresponsive.

14

Wow… it worked… Care to explain why???

15

Hmm… How about keeping img-responsive, but set your images to display:inline, then add the text-center class to the col <div>s?

16

I removed the img responsive class. and added text-center into the class of 4 images. And it worked…

17

I’m not quite sure, but when you wrap a block element in <a>, the entire span of that block becomes clickable too (like in this pen, the <h1> is only half the width of the page, but you can click on the space to the right of it).

img-responsive turns images to block elements.

1 Like
18

I will keep this in heart, this issue had driving me crazy for like a month… Thank you so much!

19