WebSite X5Help Center

 
Stephen H.
Stephen H.
User

Multiple URL links on same image  en

Autore: Stephen H.
Visite 268, Followers 1, Condiviso 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.

Postato il
4 RISPOSTE - 3 UTILI - 1 CORRETTO
John S.
John S.
User

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.

Leggi di più
Postato il da John S.
John S.
John S.
User

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.

Leggi di più
Postato il da John S.
Esahc ..
Esahc ..
Moderator

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

Leggi di più
Postato il da Esahc ..