Excessive clickable area below image

» javascript » Excessive clickable area below image

By : Mike R

Date : November 28 2020, 08:01 AM

I wish did fix the issue. Welcome to the world of Web Design @lysergic.
Browsers by default can cause unwanted margin/padding to elements in your HTML. To fix this, you can use a CSS reset.

code :

Share :

How to make an image clickable in jira comment, so it pops up as if you click on attached image in attachment area?

By : user3018950

Date : March 29 2020, 07:55 AM

I think the issue was by ths following , You want this to allow a small image in the comment to be expanded into a larger light box view:

code :

!my-screenshot-image.jpg|thumbnail!

align
border
bordercolor
alt
title
longdesc
height
width
src
lang
dir
hspace
vspace
ismap
usemap
id
class

Image areas not turning into clickable area in Image Map

By : Juice

Date : March 29 2020, 07:55 AM

it helps some times This is because the coords takes three items and not 2: x,y,radius. So you need to add values for the radius (here is an example):

code :

h1 {
  background-color: red;
}

 <h1> This is Frame A </h1>


<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="330,118,60" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
  <area shape="circle" coords="205,70,30" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
  <area shape="circle" coords="452,82,35" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>

How to center-align image link and make it clickable only on image not overflowing area?

By : user6229024

Date : March 29 2020, 07:55 AM

wish helps you Add display: inline; to image .post-image to get it centered and add text-align: center; to tha parent of a tag

code :

div {
  margin: 0 auto;
  text-align: center;
}
a {
  margin: 0px auto;
}
.post-image {
  margin: 20px auto;
  display: inline;
  max-width: 100%;
  height: auto;
}

<div>
  <a href="https://i.stack.imgur.com/gKSXt.jpg">
    <img class="post-image" src="https://i.stack.imgur.com/gKSXt.jpg" />
  </a>
</div>

Image with hyperlink - clickable area exceeds image

By : Jelle

Date : March 29 2020, 07:55 AM

around this issue I have an issue with the galleries on my WordPress website: each image in the gallery has a clickable area that exceeds the image. For example, if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content. I only want the hyperlink over the image itself, I don't want the image to open when clicking anywhere to the left or right of it. (example gallery: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/) , This CSS fixed it:

code :

.gallery .gallery-icon img {
display: inline-block;
}

clickable area of image

By : doyouevencpp

Date : March 29 2020, 07:55 AM

will be helpful for those in need I have 2 solutions for your requirement.in both,the whole image stays clickable but you can get information about clicked area.
Solution 1: