Jump to content

ddkviking
 Share

Recommended Posts

Hello
I have made a map for my community, but im having some issues... I want to be able to move the mouse over to a certain section of the map and it change colors like a blue or a red. If this is not possible is there a way to do it where just that section is highlighted, for example this first area shape is a polygon, but when i try to the entire map gets highlighted instead.
Im not all that experience with html even less so with jscript so im not even sure not to set that up, with this.
If someone could at least help me with that first coord that would be awesome.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<head>
<style type="text/css"> .pic{ width:640px; height:428px; opacity: 1; filter: alpha(opacity=100); no-repeat; } .pic:hover { opacity: 0.3; filter: alpha(opacity=30); } </style>
</head>
<body>
<div class="pic">
<img src="https://pbs.twimg.com/media/B9ii-g5IQAAwho5.png:large" width="640" height="428" alt="Halo Risk Map"
usemap="#haloriskmap">
<map name="haloriskmap">
<area shape="poly" coords="175,293, 161, 294, 155, 287, 145,285, 145, 268, 161, 243, 171, 242, 177, 246, 175, 259, 171, 262, 171, 269, 178, 277, 178, 287" href="www.deadlysinsgaminghq.enjin.com" alt="1">
</map>
</div>
</body>
Link to comment
Share on other sites

The map tag method you are using must use JavaScript.

You would usually make copies of the base image you have now, and colour all different areas on individual images, so when you hover (javascript onmouseover) a specific area set by the area tag, it would swap to the image that has that area highlighted.

        <div class="pic">            <img src="https://pbs.twimg.com/media/B9ii-g5IQAAwho5.png:large" width="640" height="428" alt="Halo Risk Map"  usemap="#haloriskmap" id="haloriskmap">            <map name="haloriskmap" id="haloriskmap">                <area shape="poly" coords="175,293,161,294,155,287,145,285,145,268,161,243,171,242,177,246,175,259,171,262,171,269,178,277,178,287" href="www.deadlysinsgaminghq.enjin.com" alt="1" onmouseover="MM_swapImage('haloriskmap','','base_area1_highlighted_image.png',1)" onmouseout="MM_swapImgRestore()" />            </map>    </div>

where 'base_area1_highlighted_image.png' would be a copy of default image (https://pbs.twimg.com/media/B9ii-g5IQAAwho5.png:large) with area 1 highlighted.

 

required javascript

<script>function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}</script>
Link to comment
Share on other sites

Ive tried your method dsonesuk and the image still isnt working.. sorry like i said im not too familiar with jscript. the image is clickable but nothing changes, when i make a new image and have it as a different color how do i put that in the jscript so it will work?

 

Heres a different image with different colors

https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/16230_795667043837732_5977530183859567072_n.jpg?oh=ac02eaea05b53998e45054b5ca23466e&oe=555989D8&__gda__=1430994139_f38e07039e92c87017f586413a04702c

Link to comment
Share on other sites

IF you want to highlight each individual location in different colour for instance, for each location get the area coordinates, then set the MM_swapImage function id ref (1st argument, note this will remain the same on all these function for each area) to match the default image id ref all shown in red, the third argument (only this image link will be different relative to the area hovered over) in green will be the image that will be swapped with default on hover

 

<div class="pic">

 

<img src="B9ii-g5IQAAwho5.png" width="640" height="428" alt="Halo Risk Map" usemap="#haloriskmap" id="haloriskmap_default">

<map name="haloriskmap" id="haloriskmap"> <area shape="poly" coords="175,293,161,294,155,287,145,285,145,268,161,243,171,242,177,246,175,259,171,262,171,269,178,277,178,287" href="www.deadlysinsgaminghq.enjin.com" alt="1" onmouseover="MM_swapImage('haloriskmap_default', '', '16230_795667043837732_5977530183859567072_n.jpg', 1)" onmouseout="MM_swapImgRestore()" /> <area shape="poly" coords="68,143,66,152,61,158,61,171,55,180,55,190,58,198,62,200,66,211,71,213,87,220,108,221,119,218,126,206,134,204,145,199,150,201,160,205,168,211,170,223,173,227,178,224,180,227,186,227,194,212,198,207,193,202,196,197,197,191,190,183,188,166,183,170,179,173,176,172,173,168,175,163,146,157,130,156,107,155,97,149,82,152" href="#" alt="Area #2" onmouseover="MM_swapImage('haloriskmap_default', '', 'This_will_be_Highlighted_area_2_image.jpg', 1)" onmouseout="MM_swapImgRestore()" /> </map> </div>

 

EDIT: sorry i missed one of the functions to include which MM_swapImage requires

 

complete javascript

           function MM_findObj(n, d) { //v4.01                var p, i, x;                if (!d)                    d = document;                if ((p = n.indexOf("?")) > 0 && parent.frames.length) {                    d = parent.frames[n.substring(p + 1)].document;                    n = n.substring(0, p);                }                if (!(x = d[n]) && d.all)                    x = d.all[n];                for (i = 0; !x && i < d.forms.length; i++)                    x = d.forms[i][n];                for (i = 0; !x && d.layers && i < d.layers.length; i++)                    x = MM_findObj(n, d.layers[i].document);                if (!x && d.getElementById)                    x = d.getElementById(n);                return x;            }            function MM_swapImage() { //v3.0                var i, j = 0, x, a = MM_swapImage.arguments;                document.MM_sr = new Array;                for (i = 0; i < (a.length - 2); i += 3)                    if ((x = MM_findObj(a[i])) != null) {                        document.MM_sr[j++] = x;                        if (!x.oSrc)                            x.oSrc = x.src;                        x.src = a[i + 2];                    }            }            function MM_swapImgRestore() { //v3.0                var i, x, a = document.MM_sr;                for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++)                    x.src = x.oSrc;            }
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...