Non-rectangular Image Button

[amer...@gmail.com]

I want to create a rollover effect such that when a user hovers over an image it does an image swap. The Image Button component does this, but I wonder if it's possible to create one that is not a rectangle so that it interacts more precisely with an image. I'd like it to be more of a tall trapezoid shape.

I played around with the CSS of the component, but was only able to get cosmetic changes and not actual changes in how it responds to the mouse.

[yor...@mobiusads.com]

Hi,

Every element in HTML is rectangle based, so my guess is: no you can not. Maybe there are options to play with the z-index, but I think it can lead to lots of bugs.

Yordan

[San Khong]

You can use events to do the image swap (turn visibility on and off on mouseover) and also set events to handle the click so you don't need to use the image button component in this case.

Thanks,

San

Google Web Designer team

[amer...@gmail.com]

I did try that but there is still the problem of the original image being rendered as a rectangle even if it isn't one. ie my image is a tall trapezoid but when you hover over the blank spaces just to the sides of it it still does the image swap.

I was able to solve it by placing tilted transparent rectangles over the blank spaces, and making sure to layer them on top of the trapezoid shaped image so as to block the hover effect on the areas where I didn't want it. It's kind of a clumsy solution but it works.