Multiple URL links on same image 
Autor: Stephen H.
Visited 1807,
Followers 1,
Udostępniony 0
Is it possible to have more than one link to URL's on the same image. What I would like to do is place a map of Australia (1 image) on a web site and then when the user clicks on a different state each state would have a separate link to a sub-domain.
Posted on the
Yes - this is possible.
Take a look here : http://www.energifremtiden.dk/c4d/accordion-3---copy.html
The "map" to the left has more clickable/hoverable areas defined.
When clicked a map is opened. When hovered the accordeon is unfolded.
If this is what you meant, then you can see the some code for that here : https://www.w3schools.com/tags/att_img_usemap.asp
In the example is both the image-mapping and the accordeon made with pure html and css and is i remember a little bit of JS.
But both the image-mapping and the accordeon can be made with pure html and css. It is only when you want them to correspond that a little JS is needed. If you hover the icons on the accordeon, then the corresponding place will be "highlighted" by a text.
The shapes need not to be squares : https://www.w3schools.com/howto/howto_css_shapes.asp
When you have an area that is "difficult", then you can have more shapes to cover the area - each of these leading to the same link. It is a kind of combining the shapes.
Another way is to use a program like the WebAnimator or the free Google Web Designer.
But even if an object can be a polygon, then the shape will be a rectangle. But also here you can "combine" the objects by having more objects cover the area. This way it will be easier to have your map be responsive.
Stephen, the attached may give you an inital "kick start", it is not as comprehensive a solution as those offered by John, but it will give you a quick map of australia that you can easily modify to go to sub domains if you wish (it is currently set just to go to an appropriate page)
Paste this HTML into an HTML object, place a copy of australasia1.png into the preview directory of your project (so you can test) and put a copy of australasia1.png in the root directory of your hosting account.
This is the code:-
<!-- Beginning of Client Side Image Map -->
<img src="australasia1.png" USEMAP="#australasia1" BORDER=0>
<map name="australasia1">
<area name="WA" shape="poly" coords="126,193,119,26,26,78,10,124,7,190,66,233,127,198" href="western-australia.html" alt="Western Australia" title="Western Australia" OnMouseOver="window.status='Western Australia'; return true" OnMouseOut="window.status=''; return true">
<area name="NT" shape="poly" coords="128,23,148,12,186,29,185,129,124,130,121,30,129,23" href="queensland.html" alt="NT & QLD" title="NT & QLD" OnMouseOver="window.status='NT & QLD'; return true" OnMouseOut="window.status=''; return true">
<area name="Queensland" shape="poly" coords="187,57,187,57,187,125,190,129,200,128,200,151,234,153,254,156,262,153,271,160,281,155,286,155,289,111,222,7,204,21,189,57" href="queensland.html" alt="Queensland" title="Queensland" OnMouseOver="window.status='Queensland'; return true" OnMouseOut="window.status=''; return true">
<area name="SA" shape="poly" coords="125,131,125,131,199,131,198,150,199,222,126,174,125,132" href="south-australia.html" alt="South Australia" title="South Australia" OnMouseOver="window.status='South Australia'; return true" OnMouseOut="window.status=''; return true">
<area name="NWS" shape="poly" coords="288,158,281,156,278,157,275,159,273,162,268,160,262,155,258,155,255,157,252,157,202,152,201,190,211,194,223,206,236,206,253,223,286,168,287,158" href="new-south-wales.html" alt="New South Wales" title="New South Wales" OnMouseOver="window.status='New South Wales'; return true" OnMouseOut="window.status=''; return true">
<area name="VIC" shape="poly" coords="202,192,212,196,220,205,223,208,236,208,250,222,250,225,228,233,201,227,201,193" href="victoria.html" alt="Victoria" title="Victoria" OnMouseOver="window.status='Victoria'; return true" OnMouseOut="window.status=''; return true">
<area name="TAS" shape="poly" coords="216,239,244,243,234,267,222,266,215,239" href="tasmania.html" alt="Tasmania" title="Tasmania" OnMouseOver="window.status='Tasmania'; return true" OnMouseOut="window.status=''; return true">
<area name="NZ" shape="poly" coords="291,295,309,303,323,301,378,222,329,187,334,233,292,293" href="new-zealand.html" alt="New Zealand" title="New Zealand" OnMouseOver="window.status='New Zealand'; return true" OnMouseOut="window.status=''; return true">
</map>
<!-- End of Client Side Image Map -->
The image is attached
If it doesn't work as advertised contact us here or contact me directly through https://www.esahc.com