Member Avatar for Traicey

Hi guys

I have 5 images which are hyperlink, so each time I click their color should change to yellow until I click another hyperlink image and also they need to change their height too, I was wandering if thats possible and please I cant use Javascript I need a plain HTML page with css only,

thanks in advance

  • 3 Contributors
  • 3 Replies
  • 114 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Traicey

Dani AI

Generated

This thread from asks for five clickable images that stay highlighted (yellow) and change height until another image is clicked, with no JavaScript. Contrary to (who suggested "Java") and (who thought it impossible), this is doable in pure HTML+CSS on a single page. Two reliable patterns are: using fragment identifiers with the :target pseudo-class, or using hidden radio inputs + labels with the :checked pseudo-class.

A simple fragment/hash approach (CSS :target) highlights whichever element matches the URL hash. It changes the visual state without JS, but it updates the URL and needs a hash per image. See MDN for :target: MDN :target.

<a href="#i1" id="i1"><img src="img1.png" alt="..."></a>
<a href="#i2" id="i2"><img src="img2.png" alt="..."></a>

a:target img {
  outline: 4px solid yellow;
  transform: scaleY(1.05);
}

The radio-input method keeps the state without changing the URL and supports a default selection via the checked attribute. Inputs are visually hidden but remain keyboard-accessible; labels wrap or target the inputs so clicking an image selects its radio.

<input type="radio" name="sel" id="r1" checked>
<label for="r1"><img src="img1.png" alt="..."></label>

<input type="radio" name="sel" id="r2">
<label for="r2"><img src="img2.png" alt="..."></label>

input[type="radio"] { position: absolute; left: -9999px; }
input[type="radio"]:checked + label img {
  border: 4px solid yellow;
  transform: scale(1.1);
}

Notes and caveats: if the images must navigate to different pages, CSS alone cannot preserve the selection across page loads (server-side state or JS required). For accessibility, keep alt text, avoid completely removing inputs from the accessibility tree, and ensure keyboard focus is possible. For details on :checked, see MDN :checked.

Recommended Answers

All 3 Replies

Member Avatar for MJ Pieterse

you would have to use Java to rotate your images

Member Avatar for FC Jamison

I don't believe that's possible using straight html and css.

I could be wrong, though.

Are you sure you mean when you click on the hyperlink image and not when you roll over the image?

Member Avatar for Traicey

Yha when u roll over and it should stay like that until u make another click to another image

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.