Graphics

img to imagemap

Type:	code fragment
Added by:	joeldg
Entered:	09/10/2002
Last modified:	31/10/2001
Rating:	- (fewer than 3 votes)
Views:	4564

This is some code I whipped together that creates an imagemap from an image that if you hover your mouse over it, the color you hover over will be displayed in a text box. This could be useful for working with a color wheel when asking people for color entries in web apps.

<font size="1"><b><PRE STYLE="font-size: 6pt;line-height: 6pt;">

                                <!-- color table crap -->

                                <script language=JavaScript>

                                <!-- Begin

                            

                                function showColor2(val) {

                                document.bgColor = val;

                                document.test.background.value = val;

                                }

                                //  End -->

                                </script>

                            

                            <?

                            

                            $MODIFIER = 3;

                            function RGB_to_HEX($r, $g, $b) {

                                    // r

                                    $red = dechex($r);

                                    if(!isset($red[1])) { $red = "0".$red; } 

                                // g

                                    $green = dechex($g);

                                    if(!isset($green[1])) { $green = "0".$green; }

                                    // b

                                    $blue = dechex($b);

                                    if(!isset($blue[1])) { $blue = "0".$blue; }

                                    return "#".$red.$green.$blue;

                            }

                            if(!$file) $file = "colorwheel2.jpg";
 $image = imagecreatefromjpeg($file);
 $width = imagesx($image);
 $height = imagesy($image);

                            unset($text);
 $text[0] = "#";
 $y=1; while($y<$height) {

                                    $x=1; while($x<$width) {

                                            $index = imagecolorat($image, $x, $y);

                                            $array = imagecolorsforindex($image, $index);

                                            $color = RGB_TO_HEX($array["red"],$array["green"],$array["blue"]);

                                            if(!isset($text[$i])) $i=0;

                                        $map .= "<area shape=RECT coords=$x,$y,".($x+$MODIFIER).",". ($y+$MODIFIER)." href="javascript:showColor2('$color')">n";

                                            $lastcolor = $color;

                                            $x=$x+$MODIFIER; $i++;

                                    }

                                    $y=$y+$MODIFIER;

                            }
 ?>
 <img src="colorwheel2.jpg" usemap=#colmap2 border=0> 

                            <map name=colmap2>

                            <? echo $map ?>
 </map>

                            <br><form name=test><input SIZE=8 VALUE=FFFFFF NAME=background CLASS="Input"></form>

                            </font></pre></b></font>

Usage Example

Rate This Script

Zend - The PHP Company

Graphics

Search