All geek questions in one place

Change the background color of the HTML <area> tag

I have an image with more than 100 geometric shapes with different sizes and sizes, I used the image display on it and assigned an id to each <area> , like <area id="1"> . I saved records in mysql db about each form, for example:

 -------------------- box_id | color_code -------------------- 1 #AEEE11 2 #AEEE01 3 #DEEF11 4 #0EE001 --------------------

now I want to set backgroung-color for each in relation to their identifiers.

Here I insert the HTML code for some area, as the whole page will increase my post:

 <img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" /> <map name="Msj_Map" id="Msj_Map"> <area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" /> <area id="1" shape="poly" coords="163,148,163,170,159,170" /> <area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" /> <area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" /> <area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" /> <area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" /> <area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" /> <area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" /> <area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" /> <area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" /> <area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" /> <area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" /> <area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" /> </map>

I also tried:

 <area id="1" shape="poly" coords="604,140,657,140,677,160,677,234,605,234" style="background-color:#00FFEE;" />

but does not work ...: (

+4
source share
4 answers

I think you should use the jquery imagemap plugin ... this is my favorite

Link: http://archive.plugins.jquery.com/project/maphilight

Demo: http://davidlynch.org/projects/maphilight/docs/demo_usa.html

This section has also been discussed in detail here.

Using jQuery hover with HTML image map

I do not think there is a need for duplication

============== Updating your comments ====================

Go to https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js

You see the following that maphilight accepts fillColor: '000000';

You need to change fillOpacity to 1.0 to remove opacity

All you have to do is work without a mouse by editing the code below and replacing it

  $(map).trigger('alwaysOn.maphilight').find('area[coords]') .bind('mouseover.maphilight', mouseover) .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });;

You have a working version of the background color ...

Thanks :)

+5
source

The area element just makes a part of the image clickable. This does not affect the rendering, and setting background properties on it probably has no effect.

The background will matter if the image contains transparent areas. In this case, you can overlay (with CSS positioning) an image with another image of the same size and contain the required colors; this image, of course, has a lower z-index value. But it would be easier to put backgrounds in the image directly (if you do not want to use different backgrounds in different situations).

+2
source

Since you have a bunch of areas with an identifier that matches your tables, the only thing you really need to do is create CSS markup for each of these identifiers. What you want to do is loop your mysql table and “echo” the CSS markup somewhere between your headers.

1) Establish a MySQL connection

2) Create a select statement and run the while loop

3) echo your css code.

 <html> <head> <style type="text/css"> <?php mysql_connect("localhost", "username", "password") or die(mysql_error()); mysql_select_db("database") or die(mysql_error()); $result="SELECT `box_id`,`color_code` FROM `tablename`"; while ($row=mysql_fetch_assoc($result)) { echo "#{$row['box_id']}\{background-color: {$row['color_code']}\}"; } mysql_close(); ?> </style> </head> <body></body> </html>
0
source

As Baba has already said, you can fool a background area using a maphilight script.

Check out the example here:

davidlynch.org/projects/maphilight/docs/demo_features.html

The background will stand out like this:

 <script> jQuery(document).ready(function() { var data = $('#s1').mouseout().data('maphilight') || {}; data.alwaysOn = !data.alwaysOn; $('#s1').data('maphilight', data).trigger('alwaysOn.maphilight'); }); </script> <img src="aaaa.jpg" usemap="#myMap" width="927" height="1106" /> <map name="myMap" id="myMap"> <area shape="rect" coords="219,800,314,819" id="s1" class="{fill:true,fillColor:'cd3333',fillOpacity:0.4,stroke:true,strokeColor:'003333',strokeOpacity:0.8,strokeWidth:1}" /> </map>
0
source

Source: https://habr.com/ru/post/1402975/

More articles:


All Articles