'Best' way to define an image as a clickable button?

1

Hi, I’ve done some general searching on this but have yet been able to find a consensus answer as to ‘best practice’. Namely I am seeking the best way to define an image as a ‘clickable button’.

I understand there is the ‘input’ ‘image’ method but this seems really to only pertain to a ‘submit’ type button (am I wrong ?) where as I am looking for more of an AJAX related function, or a toggle switch that can perform JS function calls, that also allows ‘active’ and/or ‘hover effects’.

I have seen a number of examples where people have used checkbox items, or radio buttons for this purpose, but it feels a bit like ‘hacking’ things together. Also, just for the moment (unless otherwise it is not possible), I would like to avoid the image being set by the div’s background-image property because my requirement is very strict and tight absolute positioning.

There must be a standard or ‘official’ way of doing this ? Would prefer without JQuery just so as to best know the base case, but with JQ could also be okay too.

Any thoughts ?

2

If you don’t want to use the background property, how do you have any other option than using one of the actual image tags?

But the tag itself doesn’t really matter. Also, if the image is the key indicator of what to do, this is a horrible usability practice. Not just for screen readers.

3

Do you mean like an image element with a link inside of it?

4

I mean to give you a sense of what I am looking at, my intent on the Simon Says project:

Still trying to get the layout right. I know everyone uses just CSS for this these days but bandwidth has also become relatively cheap these days and sometimes I just prefer the look of images.

Right now I only have the blue button in the lower right configured for this (i.e. there is a div that contains that lower right quadrant and the blue button itself is a separate image placed carefully on top as part of a second div). It is the ‘images’ that I want to serve as buttons here, but I want to make them clickable and responsive so I can CSS animate them.

I started work using a checkbox as a stand in but then found myself asking ‘is this the best/right’ way of doing it ?

Hopefully that makes things more clear.

5

Well if you want to go full-image, why not use an image map then and just swap it as needed?

6

If you’re going to use CSS to animate them why aren’t you using CSS to create them? Your images are pixelated because they are being stretched larger than their actual dimensions it would seem. That said, maybe assign an id to the image and add an event listener for the image or div that it is contained within. Then your event handler can decide what is to be done when it is clicked or hovered over etc…

1 Like
7

Well I suppose I should ‘rephrase’ here a little bit. Bandwidth has become ‘relatively’ cheap. I understand, as always, minimal overall payload size is the ideal-- I just mean generally there seems to have been a ‘push back’ against using images in all sorts of dynamic properties on a site-- While at the same time maybe they have a video right alongside the content, which of course is a bandwidth hog.

I understand what you mean about the image map, but at the same time I would like to use as few actual image elements as possible. I guess you could say I am trying to strike a balance between the detail an image provides while at the same time balances some elegance (i.e. uses image/bandwidth heavy resources as little as possible).

8

Actually the images are heavily pixelated intentionally as that is the way I drew them-- Given the age of the game I’m trying to go for a bit of the ‘retro 8-bit’ look.

While CSS is great in a lot of cases, stylistically it sometimes it feels a bit like using CGI vs models in movie sets-- It is very useful but I am not always crazy about the ‘super clean’ look.

However, an event listener does sound something to try. Let me look into that.

1 Like
9

You can add “cursor: pointer;” to your button images like this:

.simonButton {
  position: absolute;
  top: 13px;
  left: 16px;
  cursor: pointer;
}

That will change the cursor over to a pointer finger on hover, so at least you can give the visual indication that this part is clickable.

Just a heads up though, since you’re using an image, it’s displaying as a box. Meaning you’ll get that cursor change in the entire area of that image, namely over the gray center area of the simon board.

I know really want to use images, but I’d suggest going the css route to build your shapes or as @lynxlynxlynx go with a image map. They’re crazy easy to set up if you have something as standard as MS paint to grab the coords for each area. Also, if you’re worried about bandwidth, you can always compress the final image down to shave off some bytes without losing overall quality: http://optimizilla.com/

10

Actually, even easier I found-- but did not realize-- you can simply add an onClick event to the img tag itself (i.e. ) without even the need for an event listener and this suits my purposes perfectly fine. Thanks for the help/advice though.

11

The onClick would be the event listener in that case.

12

pixel art is doable in css too:
http://danielnieh.com/

13

I strongly recommend you try using SVG for this type of project, if you’re not using CSS for your image. Mapping your image with the right coordinates might work, but it’s a pain compared to using SVG. With an SVG image you can just put its code directly into your HTML file and each section of the image has its own id. From there you can manipulate each section to your heart’s content (i.e. clicking, changing colour, changing shape, etc…).
If you’re curious check out my game for an example of what I mean: https://soupedenuit.github.io/Simon_Game/
Google has a free SVG editor: https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

2 Likes