发表新帖
发表新帖

Change background color of HTML <area> tag

前端 未结
关注
4 1612
时光取名叫无心
时光取名叫无心 2021-02-06 11:15

I have an image with more than 100 geometrical shapes with different size and dimensions, i used image mapping over it and assign id to each like

相关标签:
4条回答
  • 一向
    2021-02-06 11:41

    As Baba already said, you can trick area background highlighting with maphilight script.

    Checkout an example here:

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

    Background will highlight somehow 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 讨论(0)
  • 野的像风
    2021-02-06 11:47

    I think you should use a 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 topic has also been discussed in detail here .....

    Using JQuery hover with HTML image map

    I don't think there is need for duplication

    ============= Update on your comments ===================

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

    Can you see the following that maphilight accept fillColor: '000000' ;

    You need to change fillOpacity to 1.0 to remove opacity

    All you need to do is make with work without mouse over by editing the code below and replace with yours 

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

    You have a working Background Color version ...

    Thanks :)

    0 讨论(0)
  • 小鲜肉
    2021-02-06 11:56

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

    The background would matter if the image contains transparent areas. In such a case, you could overlay (with CSS positioning) the image with another image of the same dimensions and containing the desired colors; this image would of course have a lower z-index value. But it would be simpler to put the backgrounds into the image directly (unless you wish to use different backgrounds in different situations).

    0 讨论(0)
  • 孤城傲影
    2021-02-06 11:59

    Since you have a bunch of areas with id's corresponding to your tables, the only thing you really need to do is to create the CSS markup for each of those IDs. What you want to do is loop through your mysql table and "echo" the CSS markup somewhere between your head tags.

    1) Establish MySQL connection

    2) Create your select statement and initiate 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 讨论(0)
 看不清?
提交回复
热议问题