Please help

ddkviking · February 11, 2015

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>

</head>

<body>

<img src="https://pbs.twimg.com/media/B9ii-g5IQAAwho5.png:large" width="640" height="428" alt="Halo Risk Map"

usemap="#haloriskmap">

</map>

</div>

</body>

tejasamrute · February 11, 2015

http://www.sitepoint.com/highlight-image-map-area-hotspots-jquery/

check the source code of the map which suits you

ddkviking · February 11, 2015

Im not too familiar with Javascript yet, is there anyway to do this with html or css,

tejasamrute · February 11, 2015

http://www.cssplay.co.uk/menu/imap.html

http://www.tankedup-imaging.com/css_dev/rollover.html

Try these

dsonesuk · February 11, 2015

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>

ddkviking · February 11, 2015

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

dsonesuk · February 11, 2015

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

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 February 11, 2015 by dsonesuk

Sign In

Please help

Recommended Posts

ddkviking

Link to comment

Share on other sites

tejasamrute

Link to comment

Share on other sites

ddkviking

Link to comment

Share on other sites

tejasamrute

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

ddkviking

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity