Hello wise ones. So I am trying to use an image with selectable regions and I can't seem to get the coding to work. You can view my test page here: Test Page.
Here is the code I am using:
<img src="http://db4sgowjqfwig.cloudfront.net/campaigns/21020/assets/619618/DFRPG_BigNavButtons.png?1469374824" width="700" height="490" alt="Big Nav Buttons A"
usemap="#bignavbuttons">
<map name="bignavbuttons">
<area alt="rect" coords="17,3,164,477" href="http://the-emerald-city.obsidianportal.com/wikis/themes-and-threats" alt="Themes & Threats">
<area alt="rect" coords="191,4,339,477" href="http://the-emerald-city.obsidianportal.com/wikis/movers-and-shakers" alt="Movers and Shakers">
<area alt="rect" coords="363,2,512,477" href="http://the-emerald-city.obsidianportal.com/wikis/status-quo" alt="Status Quo">
<area alt="rect" coords="538,3,685,478" href="http://the-emerald-city.obsidianportal.com/wikis/groups-and-organizations" alt="Groups and Organizations">
</map>
I want the different areas with the titles to be selectable and I will have overlays of sigils as you mouse over. But that is something for later. For now I just can't figure out why only the first set of Coordinates I set up is selectable.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
WTF? It is adding artifacts to the code after I pasted it as plain text. Grrr. Well you can view the code on the linked page.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
As a work around you could split the images and make it a 4 cell table...just a 30 sec idea. I'll try and make a better look later after sleep. :)
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
Your problem is that you put area alt="rect" instead of area shape="rect", so your areas aren't defined fully.
- Kallak
Also looking at your code on your test page it looks like you might have an extra carriage return after your first area map. That could also cause a map to stop working after the first area.
For example, I threw in a extra carraige return on the area map after the 3rd area, so only the first 3 work, but the fourth one doesn't.
Test Page
They are among us!
XCom: Defiance - Campaign of the Month November 2016
Awesome. That fixed it. I think the return was the main issue. Thanks guys! Now lets see if I can figure out how to add an overlay to the mouse over. :D
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated