Can html/css, natively, click through the transparent area of an image?
I'd like to place two buildings side by side. And if a user clicks on a transparent area (green) of the nearest image, the click would pass through and go the the farther (the taller one).
I've already checked, with no luck:
Click through transparent area on partially transparent image
Click area on sprite in canvas
html/css alone might be very difficult. Even plus javascript, because when you click on the red house picture, the event is triggered on the picture itself. And the green area you defined is not a square. it is hard to define such a area simply in html/css.
My suggestion would be add another picture of that green shape, with the exact content of it and put it on top of the red house picture.
As a result, you have three pictures with the farther one at bottom, the red house on top of the building, and the special shape made from the building on the top of the red house. So when people click on the transparent area, they actually click on the special shape instead click on the red house picture. Then you can attach a link to the special shape of green area so it link to the two levels building. This is the easiest method I can think about.
Hope it helps.
Related
Regarding color contrast:
In this example, do I need to be careful of the blue background even though there is no copy directly on top of it? I.e. do I only need to be concerned with background color when there is copy on top of it, and I could hide the element with the background color from screen readers without causing an issue?
And in this one, do I need to be careful of the contrast between the light blue background and the button or am I only concerned with the contrast between the copy and the button? (I know the image is blurry. It's just an example.)
Both examples are fine as they are.
There are two things that are applicable here.
The first is contrast between text and the background for that text - you must have a contrast ratio of 4.5:1 for normal text and 3:1 for large text / bold text to be WCAG AA compliant. In the first example it is essentially black on white so it will pass easily.
The second is for controls. Buttons, inputs etc. should have a contrast ratio with their background of 3:1 minimum, no matter what state they are in (so if your above button turned white with black text on hover it probably wouldn't pass). In your second example your button is black on light blue so it certainly passes this also.
Also worth noting is that text within controls (your button) has the same 4.5:1 contrast requirement. Yet again white on black passes easily so you are fine.
Just check the contrast (almost certainly fine) on the red button with white text, reds and oranges can be deceiving in their contrast ratios (but as it is quite a dark red I am 99% sure you are fine just by looking at it).
For clarity your blue background in the first one could be 1% darker than the white box and it would be fine as it is not an interactive control that it surrounds.
I'm currently coding a design mockup into HTMl and I'm trying to figure out the best way to achieve this look responsively. As you see, there's a purple line that stems from the hero CTA button in the bottom right corner. How would I go about changing the line color when it enters the new section; purple to white?
I thought about making two separate lines, but It's difficult to always have them line up right. I wonder if there's some sort of masking trick?
I added a red circle to show the interlacing I'm having issues with.
Screenshot
How do i show a country map and make cities separate by changing color of mouseover
I need an Idea how to do it like www.mudah.my site.
Basically how they (http://www.mudah.my/) do is by having 1 normal map image with no country highlighted (actually it looks like they use a couple images but make it like 1 image by placing a transparent div over the top of them).
They have a standard image map applied to this '1' image to define the separate areas and when the user mouses over a relevant part of the map they display a specify section of the highlight image (http://www.mudah.my/img/map_highlight.png) in a specific place on top the the existing image, but behind the 1 main transparent div. Presumably so the links associated with the image map) continues to work.
Hope this helps.
I would like to customize the shape of the button to different shapes like circle, star, square or of any shape. How would i achieve so?
I apologize because this doesn't answer your question, but:
In order to make sure the user can reliably click on your button, you probably want it to be a convex shape. A rectangle or circle is fine, and you could paint a star on it. But you wouldn't want the user to try to click your star and miss, just because they were not quite inside one of its arms.
Canvas can be used as button.
Take a canvas of required size. Give your required button shape(image) as background image to canvas.
Example:
Explanation: {nextYellowButton} is the embedded button. It is an arrow mark shape button.
It is a .PNG image. So, it doesn't include the background color.
Now your button is of arrow shape. it occupies 50px * 50px area on screen. But it looks exactly like an arrow mark.
Anyone know where I can find the Microsoft guidelines for creating WPF gel-type buttons? I'm not sure if "gel" is the correct name for this effect but I have heard many people use the term. If MS doesn't have a guideline, do you have some other standards or guidelines for creating these buttons?
Have a look at the glass button.
There are a number of XAML elements
which go into making up the button.
They are clearly commented in the XAML
but the list is as follows:
Drop-shadow: an ellipse with a radial gradient of black fading to
tranparent
Button surround: a white ellipse slightly bigger than the green one
Black button background: only visible round the edges of the green
when the button is pressed
Main button colour: the green (or whatever color you want) of the
button. This ellipse is clipped to
its initial outline, thus allowing us
to move the ellipse slightly for the
button press without it overlapping
the button surround
Top glow: an ellipse with a linear gradient background of white (at the
top) fading to transparent. Smaller
than the main button colour and
positioned so that the tops are the
same
Bottom glow: an ellipse the same size as the main button colour but
with a linear gradient background of
white (at the bottom) fading to
transparent. This is also clipped as
per the main button colour.
Hover-over glow: an ellipse the same size as the main button colour
with a radial gradient background of
white (at the centre of the ellipse)
fading to transparent. This is
initially transparent.
Transparent element for catching mouse events: on top of all of this is
a transparent ellipse the same size as
the white button surround for catching
MouseEnter, MouseLeave,
MouseLeftButtonDown and
MouseLeftButtonUp events. This
element also contains the Storyboard
for the pulsating hover-over effect
(although this could be in any XAML
element).