CODEWITHSUNDEEP
htmlcss
Liam
Liam

Reputation: 1

Apply more than 1 ID to an image

I want to add an image of Ireland to my website. Ireland is made up of 32 counties; what I want to do is allow the user to click on a county, which will bring them to a more detailed page about that county. Also, the appearance of that county will change on hover.

To accomplish this, I'd like to have multiple IDs for the same element. Is this possible?

Upvotes: 0

Views: 287

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201748

You cannot have more than one id per element. What you describe as a goal suggests that you can use a client-side image map, implemented using a map element with area elements specifying areas in an image and associated URLs. For a geographic map, you probably want to use some image map utility that lets you specify the areas graphically and generates the markup for you (which looks messy, since the counties would need to be specified by the coordinates of the vertexes of a polygon).

There is no direct way to change an area of an image map on mouseover. You would need to use a graphics program to generate 32 versions of the image, each with one county highlighted, and change the entire image when one of the areas is highlighted.

Upvotes: 0

AstroCB
AstroCB

Reputation: 12367

You don't want to use an ID for this, as IDs are unique and are to be used to indicate one object.

Instead, try using classes separated by spaces:

<div class="county ireland" id="mayo"></div>
<div class="county ireland" id="clare"></div>

Then, you can refer to them like this:

#mayo {
    /* Styling for a specific div */
}

.county {
    /* Styling for all county divs */
}

.ireland {
    /* Styling for Ireland counties */
}

.county: hover {
    /* Styling when counties are hovered over */
}

Upvotes: 1

Scott
Scott

Reputation: 21890

I don't see a question, but why not simply use a class in conjunction with an id???

<img src="#" id="firstID" class="thisImage">

Then simply use #firstID.thisImage or #firstID, or .thisImage to select the image.

Upvotes: 1

Related Questions